UICollectionView-简单讲解

作者: iOS_愛OS | 来源:发表于2015-12-25 14:22 被阅读4648次
  • 好久没有用到UICollectionView差点就不会用了,看来写过的代码要及时复习啊

  • 下面贴一下关于UICollectionView的简单用法

  • 协议
    //代理、数据源协议 @interface RootViewController ()<UICollectionViewDataSource, UICollectionViewDelegateFlowLayout, UIAlertViewDelegate>

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    //创建数据源
    _dataArray = [[NSMutableArray alloc]initWithCapacity:0];
    for (int i = 0; i < 16; i ++) {
        [_dataArray addObject:[NSString stringWithFormat:@"%d",i+1]];
    }
    
    /************UICollectionView*************/
    //UICollectionView  可以自动布局
    //自动布局的类:UICollectionViewLayout  父类
    //UICollectionViewFlowLayout  网格类控件的自动布局的类
    
    //UICollectionViewFlowLayout 实例化
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
    //设置UICollectionView的滑动方向
    /*
     1、UICollectionViewScrollDirectionHorizontal  水平滑动
     2、UICollectionViewScrollDirectionVertical  竖直滑动
     */
    //flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    //设置水平方向的空隙
    flowLayout.minimumInteritemSpacing = 20;
    //设置垂直方向的空隙
    flowLayout.minimumLineSpacing = 50;
    //120 + 20  +120 +20  180-120  60
    
    //UICollectionView  的实例化
    UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20) collectionViewLayout:flowLayout];
    //UICollectionViewDelegateFlowLayout  代理
    collectionView.delegate = self;
    //UICollectionViewDataSource   数据源协议
    collectionView.dataSource = self;
    //默认颜色黑色
    collectionView.backgroundColor = [UIColor whiteColor];
    collectionView.tag = 10000;
    [self.view addSubview:collectionView];
    
    //注册cell类
    [collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"iden"];
    //注册标题头
    //UICollectionElementKindSectionHeader  标题头
    /*
     supplementary [,sʌplɪ'ment(ə)rɪ]
     
     基本释义
     
     adj. 补充的;追加的
*/
    [collectionView registerClass:[MyCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"view"];
    //注册标题尾
    //UICollectionElementKindSectionFooter  标题尾
    [collectionView registerClass:[MyCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"view"];
    
    //刷新数据
    [collectionView reloadData];
    NSLog(@"屏幕的高---->%f",[UIScreen mainScreen].bounds.size.height);
    
}
#pragma mark - UICollectionViewDataSource,UICollectionViewDelegateFlowLayout
//设置段数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}
//设置单元格个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return _dataArray.count;
}
//UICollectionViewCell
//只能用注册自定义cell的方式
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"iden" forIndexPath:indexPath];
    cell.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"10_%ld.jpg",(long)indexPath.item]];
    //NSLog(@"%ld",(long)indexPath.item);
//    indexPath.section;  找到某一段
//    indexPath.row == indexPath.item;  找到某一个单元格
    cell.titleLabel.text = _dataArray[indexPath.item];
    return cell;
}

//水平滑动时:最左上角  最左下角
//竖直滑动时:最左上角  最右上角

//设置item的大小
//item的默认大小:50*50
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    //第一个参数:设置item的宽
    //第二个参数:设置item的高
    return CGSizeMake(100, 120);
}
//120 + 100 +120 +100  - 460    20
//设置水平间隙  : 默认10
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    return 50;
}
//设置竖直间隙  : 默认10
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    return 50;
}
//设置边距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    //上左下右
    return UIEdgeInsetsMake(10 ,10, 10, 10);
}
//点击方法
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    //
    NSLog(@"%ld====%ld",(long)indexPath.section,(long)indexPath.item);
    UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"提示" message:@"是否删除" delegate:self cancelButtonTitle:@"确定" otherButtonTitles:@"取消", nil];
    alert.tag = indexPath.item + 1000;
    [alert show];
}
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{
    NSLog(@"%ld",(long)buttonIndex);
    if (buttonIndex==0) {
        [_dataArray removeObjectAtIndex:alertView.tag - 1000];
        UICollectionView *col = (UICollectionView *)[self.view viewWithTag:10000];
        //刷新数据
        [col reloadData];
    }
}
//设置标题头的高度
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    //水平滑动时:第一个参数有效
    //竖直滑动时:第二个参数有效
    return CGSizeMake(50, 50);
}
//设置标题尾的高度
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
    //水平滑动时:第一个参数有效
    //竖直滑动时:第二个参数有效
    return CGSizeMake(50, 50);
}
//自定义标题头或标题尾
//需要自定义,需要注册
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    MyCollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"view" forIndexPath:indexPath];
    //标题头
    if (kind == UICollectionElementKindSectionHeader) {
        view.label.text = [NSString stringWithFormat:@"第%d标题头",indexPath.section];
    }else if (kind == UICollectionElementKindSectionFooter){
        //标题尾
        view.label.text = [NSString stringWithFormat:@"第%d标题尾",indexPath.section];
    }
    return view;
}

  • 这是item cell
#import "MyCollectionViewCell.h"

@implementation MyCollectionViewCell

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        //
        [self creatUI];
    }
    return self;
}
- (void)creatUI{
    _imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height)];
    [self.contentView addSubview:_imageView];
    
    _titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, self.bounds.size.height+10, self.bounds.size.width, 20)];
    _titleLabel.backgroundColor = [UIColor clearColor];
    _titleLabel.textColor = [UIColor redColor];
    _titleLabel.textAlignment = NSTextAlignmentCenter;
    _titleLabel.font = [UIFont systemFontOfSize:16.0];
    [self.contentView addSubview:_titleLabel];
}

@end
  • 这是 标题头 cell
#import "MyCollectionReusableView.h"

@implementation MyCollectionReusableView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        //
        [self creatUI];
    }
    return self;
}
- (void)creatUI{
    _label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height)];
    _label.backgroundColor = [UIColor yellowColor];
    _label.textAlignment = NSTextAlignmentCenter;
    _label.font = [UIFont systemFontOfSize:12.0];
    _label.textColor = [UIColor redColor];
    [self addSubview:_label];
}

@end

相关文章

  • UICollectionView-简单讲解

    好久没有用到UICollectionView差点就不会用了,看来写过的代码要及时复习啊 下面贴一下关于UIColl...

  • UICollectionView

    UICollectionView主要包括了下面几部分: UICollectionView-内容显示的主视图,类似于...

  • UICOllectionView-集合视图

    一、集合视图的概念 1、如何创建UIColletionView 2、集合视图的布局UICollectionView...

  • linux简单讲解

    LTS长期稳定支持版本 linux两大分支:debian redhat gnu:全球管理开源软件的组织 linux...

  • vuex简单讲解

    vue 理解vuex我们先来认识下vue Vue是单向数据流,v-model只是语法糖而已。单向数据流就是:数据总...

  • Makefile 简单讲解

    编译的过程 1、编译流程: 命令可选项的解释: 2、简单的编译命令: 3、make 工具根据时间戳进行判断,是否重...

  • UICollectionView-调整间隔

    设计要求CollectionView水平、垂直方向的间隔均为0.5pt时,该如何实现,按正常思路,设置 最终运行的...

  • Notification的简单讲解

    通知系统使用户得知应用中重要的事情,例如有新信息到来或者日历事件提醒。将通知作为一个新的通道,提醒用户重要的事情或...

  • RunLoop的简单讲解

    runloop:运行循环。跑圈。基本作用:保持程序的基本运行。处理app的各种事件,比如触摸事件,定时器事件,se...

  • await async简单讲解

    es7的特性,平时用的不多,后面应该全面使用async: await的执行环境, 声明这个是一个异步调用的函数aw...

网友评论

  • 王天琦:这样的话,区头默认是居左的诶,博主有解决方案吗?
  • Sorphiean:很好的入门讲解
  • iOS_愛OS:有专门的属性,,, 1、UICollectionViewScrollDirectionHorizontal 水平滑动
    2、UICollectionViewScrollDirectionVertical 竖直滑动
    分成两行,这个你要计算间距,看一下collectionview的间距怎么算的
  • 叁號選手:知道怎么让collection view横行移动 然后拍成两行 还分区?

本文标题:UICollectionView-简单讲解

本文链接:https://www.haomeiwen.com/subject/pqzvhttx.html