[iOS] Storyboard (4) -- 实践：UICollectionView

Storyboard 系列文章
[iOS] Storyboard (1) -- 入门：API 篇
 [iOS] Storyboard (2) --入门：约束篇
 [iOS] Storyboard (3) -- 使用：常用Tips
[iOS] Storyboard (4) -- 实践：问题总结
 [iOS] Storyboard (4) -- 实践：UIScrollView
[iOS] Storyboard (4) -- 实践：UICollectionView

在 Storyboard 中使用 UICollectionView, 与使用 UITableView 有一些区别, 在设置 UICollectionView 的 cell / header / footer 等都可以在 Storyboard 中完成, 不需要单独创建 Xib 文件进行布局; 而且, 创建的 cell / header / footer 等在使用时, 不需注册, 只需要在 Storyboard 关联相应的类文件, 设置好重用标识符即可; 这篇文章主要介绍如何在 Storyboard 中使用UICollectionView;

1. 添加 UICollectionView

在 Storyboard 添加一个 UICollectionView, 添加全屏显示的约束后, 如下图所示:

这里默认有一个 cell, 即左上角的小灰色框, 选中后可以拉大;

在右侧的属性栏内, 我们可以设置显示的 cell 数量, 滚动方向, 布局等, 默认会拥有一个 layout, 不需要新建;

将 Storyboard 中的控制器关联相应的文件, 然后设置 UICollectionView 的代理为控制器, 在控制器中实现相应的代理方法, 这样一个基本的 UICollectionView 就会显示在屏幕上;

2. 关联 layout

新添加的 UICollectionView 会默认拥有一个 flowlayout, 如果我们需要自定义, 可以将属性栏的 Layout 项选择 Custom, 然后关联自定义的 layout 类即可:

3. 定制cell

UICollectionViewCell 的布局, 不需要新建 Xib, 直接在 UICollectionView 中进行即可, 默认显示的 cell 比较小, 不方便布局, 我们可以将他拉大一些, 然后, 添加一个 UIImageView 和一个 UILabel 并添加相应的约束:

然后, 设置复用标识符, 在属性面板的 Identifier 选项添加标识符 :

设置重用标识符

最后再关联相应的 UICollectionViewCell 子类文件即可:

这样, 我们在使用时, 只需要在代理方法中添加如下代码:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"LQHouseViewCellReusID" forIndexPath:indexPath];
    
    return cell;
}

这里为了显示的好看一些, 动态设置了 cell 的大小;
运行效果:

这里没有使用子类的类, 直接使用了 UICollectionViewCell , 实际应用时, 直接引入头文件, 使用相关联的子类即可.

4. 多种cell

假如我们需要的 cell 布局不一样, 需要多个不同的 cell, 又应该怎么设置呢? 也很简单, 和设置单个 cell 一样, 我们现在属性设置栏中将 Items 选项修改为 2 :

这时 UICollectionView 中会默认显示两个 cell , 我们只需要将另一个cell , 根据自己需要添加不同布局, 设置不同的重用标识符, 关联不同的文件即可, 为了区别两种 cell, 设置了不同的背景色:

两种不同的 cell

然后, 再实现相应的方法即可, 这里我让偶数行显示红色, 奇数行显示蓝色, 添加代码如下:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    if (indexPath.row % 2 == 0) {

        UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"LQTwoCollectionViewCellReusID" forIndexPath:indexPath];

        return cell;
    }
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"LQHouseViewCellReusID" forIndexPath:indexPath];
    
    return cell;
}

运行效果:

4. 定制区头/区尾

区头/区尾的设置, 只需要在 UICollectionView 的属性栏中勾选 Section Header 或者 Section Footer 即可, 在中间 UICollectionView 中会出现相应的区头/区尾:

这时会发现, 在 cell 上下方多个灰色的线框, 该区域就是对应区的区头/区尾, 我们可以直接把控件拖拽到该区域, 添加约束;

设置区头的复用标识符

选中区头, 添加复用标识符 :

关联自定义类
如果需要关联自定义的区头类, 在标识符栏进行关联即可, 自定义需要是 UICollectionReusableView 的子类:

这样, 一个区头就设置完成了;

区尾的设置和区头一样, 选中区尾后, 添加复用标识符, 关联类即可;

这里在区头/区尾分别添加一个 label, 并设置不同的背景色:

在代理方法中添加如下代码:

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        UICollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"LQColltionHeaderViewResuID" forIndexPath:indexPath];
        
        return header;
    }
    
    UICollectionReusableView *footer = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"LQColltionFooterViewResuId" forIndexPath:indexPath];
    
    return footer;
}

运行效果:

以上, 就是在 Storyboard 中使用 UICollectionView 所涉及的知识点.