UICollectionView详解（一）：基本使用

2017-08-06
作者勿忘初心
~10.25K 字

UICollectionView在目前的iOS开发中，使用非常广泛，它可以完成许多UITableView完成不了的复杂的布局，在使用上，两者也有着许多的相似之处，主要体现在布局的样式上，UITableView主要有两种布局：plain和group，而UICollectionView则可以根据我们的需要自定义各种各样复杂的布局，这也是下面我们就UICollectionView的使用进行一下详细的解析。

基本使用方法

与UITableView相似，在UICollectionView时，也要遵循数据源（UICollectionViewDataSource）与代理协议方法（UICollectionViewDelegate），也要注册cell，与UITableView不同的是，我们还需要为UICollectionView创建一个布局参数，也就是UICollectionViewFlowLayout，这也是UICollectionView的精髓所在，正是通过它，我们才实现了UICollectionView各式各样的布局，这我们在后面会一一讲述，有兴趣的同学也可以看一下苹果官方文档。

系统为我们提供了两个UICollectionView的布局类：UICollectionViewLayout和UICollectionViewFlowLayout，UICollectionViewLayout类是一个抽象类，我们在自定义布局的时候可以继承此类，并在此基础上设置布局信息，UICollectionViewFlowLayout继承于UICollectionViewLayout，是系统为我们写好的布局类，该类为我们提供了一个简单的布局样式，假如我们只需要一个特别简单的网格布局或者流水布局，可以直接使用它。

创建UICollectionView的基本代码如下：

初始化

//创建layout
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

//创建collectionView
UICollectionView* collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 64, kScreenWidth, kScreenHeight-64) collectionViewLayout:layout];
collectionView.delegate = self;
collectionView.dataSource = self;
collectionView.backgroundColor = [UIColor cyanColor];

//注册item和区头视图、区尾视图
[collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"MyCollectionViewCell"];

[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"MyCollectionViewHeaderView"];

[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"MyCollectionViewFooterView"];

[self.view addSubview:collectionView];

实现协议方法

#pragma mark - UICollectionViewDelegate,UICollectionViewDataSource

//分区个数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}

// 每个分区item的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return _imagesArray.count;
}

// 创建cell
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *cellIdentifier = @"MyCollectionViewCell";
    MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    cell.backgroundColor = [UIColor cyanColor];
    cell.imageStr = _imagesArray[indexPath.item];
    return cell;
}

//创建区头视图和区尾视图
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    if (kind == UICollectionElementKindSectionHeader){
        UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"MyCollectionViewHeaderView" forIndexPath:indexPath];
        headerView.backgroundColor = [UIColor yellowColor];
        UILabel *titleLabel = [[UILabel alloc]initWithFrame:headerView.bounds];
        titleLabel.text = [NSString stringWithFormat:@"第%ld个分区的区头",indexPath.section];
        [headerView addSubview:titleLabel];
        return headerView;
    }else if(kind == UICollectionElementKindSectionFooter){
        UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"MyCollectionViewFooterView" forIndexPath:indexPath];
        footerView.backgroundColor = [UIColor blueColor];
        UILabel *titleLabel = [[UILabel alloc]initWithFrame:footerView.bounds];
        titleLabel.text = [NSString stringWithFormat:@"第%ld个分区的区尾",indexPath.section];
        [footerView addSubview:titleLabel];
        return footerView;
    }
    return nil;
}

//点击某个cell
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"点击了第%ld分item",(long)indexPath.item);
}

//cell的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    CGFloat itemW = (kScreenWidth-(kLineNum+1)*kLineSpacing)/kLineNum-0.001;
    return CGSizeMake(itemW, itemW);
}

//每个分区的内边距（上左下右）
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(kLineSpacing, kLineSpacing, kLineSpacing, kLineSpacing);
}

//分区内cell之间的最小行间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    return kLineSpacing;
}

//分区内cell之间的最小列间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    return kLineSpacing;
}

//区头大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    return CGSizeMake(kScreenWidth, 65);
}

//区尾大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
    return CGSizeMake(kScreenWidth, 65);
}

最终的效果图如下：

上面我们提到了，UICollectionViewFlowLayout是系统为我们提供的一个简单的流水布局，那么我们在直接使用它做简单的布局时，可以直接设置它的一个属性，来达到我们布局的目的，这样就可以省略掉一些UICollectionView协议方法的实现。
我们来看一下UICollectionViewFlowLayout都有哪些属性可以设置：

UICollectionViewFlowLayout属性

和上面我们实现的UICollectionView中的一些协议方法的名字非常相似，根据名字应该可以一一对应。
那么，使用UICollectionViewFlowLayout的属性设置布局的效果如果呢，我们来看：

代码实现

/**
     创建layout
     */
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    /**
     设置item的行间距和列间距
     */
    layout.minimumInteritemSpacing = kLineSpacing;
    layout.minimumLineSpacing = kLineSpacing;
    /**
     设置item的大小
     */
    CGFloat itemW = (kScreenWidth-(kLineNum+1)*kLineSpacing)/kLineNum-0.001;
    layout.itemSize = CGSizeMake(itemW, itemW);
    /*
     设置每个分区的上左下右的内边距
     */
    layout.sectionInset = UIEdgeInsetsMake(kLineSpacing, kLineSpacing,kLineSpacing, kLineSpacing);
    /**
     设置区头和区尾的大小
     */
    layout.headerReferenceSize = CGSizeMake(kScreenWidth, 65);
    layout.footerReferenceSize = CGSizeMake(kScreenWidth, 65);
    /**
     设置分区的头视图和尾视图是否始终固定在屏幕上边和下边
     */
    layout.sectionFootersPinToVisibleBounds = YES;
    /**
     创建collectionView
     */
    UICollectionView* collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 64, kScreenWidth, kScreenHeight-64) collectionViewLayout:layout];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    collectionView.backgroundColor = [UIColor cyanColor];
    [collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"MyCollectionViewCell"];
    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"MyCollectionViewHeaderView"];
    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"MyCollectionViewFooterView"];
    [self.view addSubview:collectionView];

#pragma mark - UICollectionViewDelegate,UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return _imagesArray.count;
}
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *cellIdentifier = @"MyCollectionViewCell";
    MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    cell.backgroundColor = [UIColor cyanColor];
    cell.imageStr = _imagesArray[indexPath.item];
    return cell;
}
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    if (kind == UICollectionElementKindSectionHeader){
        UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"MyCollectionViewHeaderView" forIndexPath:indexPath];
        headerView.backgroundColor = [UIColor yellowColor];
        UILabel *titleLabel = [[UILabel alloc]initWithFrame:headerView.bounds];
        titleLabel.text = [NSString stringWithFormat:@"第%ld个分区的区头",indexPath.section];
        [headerView addSubview:titleLabel];
        return headerView;
    }else if(kind == UICollectionElementKindSectionFooter){
        UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"MyCollectionViewFooterView" forIndexPath:indexPath];
        footerView.backgroundColor = [UIColor blueColor];
        UILabel *titleLabel = [[UILabel alloc]initWithFrame:footerView.bounds];
        titleLabel.text = [NSString stringWithFormat:@"第%ld个分区的区尾",indexPath.section];
        [footerView addSubview:titleLabel];
        return footerView;
    }
    return nil;
    
    
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"点击了第%ld分item",(long)indexPath.item);
}

效果图：

1914621-b593f0215244d328

事实证明，两种方法在实现的效果上并没有任何区别。

总结

关于UICollectionView的基本使用大概就是这些内容，但是这些只适用于一些简单的网格或流水布局，如果遇到比较复杂的布局，比如瀑布流等，就需要自定义UICollectionViewLayout来布局了。在下一篇文章中，我们会详细介绍如何使用自定义UICollectionViewLayout来编写复杂布局。

欢迎来到我的个人博客

UICollectionView详解（一）：基本使用

基本使用方法

初始化

实现协议方法

代码实现

总结

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

欢迎来到我的个人博客

基本使用方法

初始化

实现协议方法

代码实现

总结

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可