夏树正茂

花有重开日，人无再少年.

布局万花筒：UIColletionview

| Comments

UICollectionView是iOS6的时候引入的，它同UITableView共享一套API设计，都是基于datasource和delegate，都继承自UIScrollView。但它又与UITableView有很大不同，它进行了进一步的抽象，将它的所有子视图的位置、大小、transform委托给了一个单独的布局对象：UICollectionViewLayout。这是一个抽象类，我们可以继承它来实现任何想要的布局，系统也为我们提供了一个开箱即食的实现UICollectionViewFlowLayout。在我看来，没有任何排列布局是UICollectionViewLayout不能实现的，如果有那就自定义一个。

UITableView只能提供竖直滑动的布局，而且默认情况下cell的宽度和tableView的宽度一致，而且cell的排列顺序也是挨次排列。UICollectionView则为我们提供了另一种可能：它能提供竖直滑动的布局也能提供水平滑动的布局，而且cell的位置、大小等完全由你自己决定。所以我们在遇到水平滑动的布局时，不要忙着用UIScrollView去实现，可以先考虑UICollectionView能不能满足要求，还有一个好处是你不要自己考虑滑动视图(cell)重用的问题。

这篇文章会讲解如何自定义UICollectionViewLayout来实现任意布局，默认你已经会使用系统提供的UICollectionViewFlowLayout来进行标准的Grid View布局了。

1、UICollectionViewFlowLayout

系统为我们提供了一个自定义的布局实现：UICollectionViewFlowLayout，通过它我们可以实现Grid View类型的布局，也就是像一个一个格了挨次排列的布局，对于大多数的情况，使用它就能满足我们的要求了。系统为我们提供了布局所需的参数，我们在使用的时候只需要去确定这些参数就行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  NS_CLASS_AVAILABLE_IOS(6_0) @interface UICollectionViewFlowLayout : UICollectionViewLayout

@property (nonatomic) CGFloat minimumLineSpacing;
@property (nonatomic) CGFloat minimumInteritemSpacing;
@property (nonatomic) CGSize itemSize;
@property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0); // defaults to CGSizeZero - setting a non-zero size enables cells that self-size via -preferredLayoutAttributesFittingAttributes:
@property (nonatomic) UICollectionViewScrollDirection scrollDirection; // default is UICollectionViewScrollDirectionVertical
@property (nonatomic) CGSize headerReferenceSize;
@property (nonatomic) CGSize footerReferenceSize;
@property (nonatomic) UIEdgeInsets sectionInset;

// Set these properties to YES to get headers that pin to the top of the screen and footers that pin to the bottom while scrolling (similar to UITableView).
@property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
@property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);

@end

Grid View样式的UICollectionView如下所示：

image

如果上面所说的Grid View类型的布局不能满足我们的需求，这时就需要自定义一个Layout。

2、UICollectionViewLayout VS UICollectionViewFlowLayout

UICollectionViewFlowLayout继承自UICollectionViewLayout，我们可以直接使用它，我们只需要提供cell的大小，以及行间距、列间距，它就会自己计算出每个cell的位置以及UICollectionView的滑动范围contentSize。但它只能提供一个方向的滑动，也就是说我们自定义的类如果继承自UICollectionViewFlowLayout，则只能是在一个方向上滑动的布局，要么水平方向要么竖直方向。 反之，则需要继承自UICollectionViewLayout，UICollectionViewLayout是一个抽象类，不能直接使用。

3、自定义布局需要实现的方法

UICollectionViewLayout文档为我们列出了需要实现的方法：

image

以上列出的这六个方法不是都需要我们自己实现的，而是根据需要，选择其中的某些方法实现。

collectionViewContentSize

UICollection继承自UIScrollView，我们都知道UIScrollView的一个重要参数：contentSize,如果这个参数不对，那么你布局的内容就不能完全展示，而collectionViewContentSize就是为了得到这个参数，UICollection就像一个画板，而collectionViewContentSize则规定了画板的大小，如果是继承自UICollectionViewFlowLayout，而且每个section里面的cell大小是通过UICollectionViewFlowLayout的参数设定的，大小和位置也不在自定义的过程中随意更改，那么collectionViewContentSize是可以不自己重写的，系统会自己计算contentSize，如果是继承自UICollectionViewLayout，那就需要根据你自己的展示布局去提供合适的CGSize给collectionViewContentSize。

layoutAttributesForElementsInRect

这个方法的参数是UICollectionView当前的bounds，也就是视图当前的可见区域，返回值是一个包含对象为UICollectionViewLayoutAttributes的数组，UICollectionView的可见区域内包含cell、supplementary view、decoration view(这里统称cell，因为它们都是collectionView的一个子视图)，它们的位置、大小等信息都由对应的UICollectionViewLayoutAttributes控制。默认情况下这个LayoutAttributes包含indexPath、frame、center、size、transform3D、alpha以及hidden属性。如果你还需要控制其他的属性，你可以自己自定义一个UICollectionViewLayoutAttributes的子类，加上任意你想要的属性。

布局属性对象(UICollectionViewLayoutAttributes)通过indexPath和cell关联起来，当collectionView展示cell时，会通过这些布局属性对象拿到布局信息。

返回原话题，layoutAttributesForElementsInRect方法的返回值是一个数组，这个数组里面是传递进来的可见区域内的cell所对应的UICollectionViewLayoutAttributes。

要拿到可见区域内的布局属性，通常的做法如下：
1、如果你是继承自UICollectionViewFlowLayout，并且设置好了itemSize、行间距、列间距等信息，那么你通过[super layoutAttributesForElementsInRect:rect]就能拿到可见区域内的布局属性，反之，则进入步奏2。
2、创建一个空数组，用于存放可见区域内的布局属性。
3、从UICollectionView的数据源中取出你需要展示的数据，然后根据你想要的布局计算出哪些indexPath在当前可见区域内，通过CGRectIntersectsRect函数可以判断两个CGRect是否有交集来确定。然后循环调用layoutAttributesForItemAtIndexPath:来确定每一个布局属性的frame等数据。同样，如果当前区域内有supplementary view或者decoration view，你也需要调用：layoutAttributesForSupplementaryViewOfKind:atIndexPath或者layoutAttributesForDecorationViewOfKind:atIndexPath，最后将这些布局属性添加到数组中返回。这里需要多说一点的是，有些布局属性在UICollectionViewLayout的prepareLayout就根据数据源全部计算了出来，比如瀑布流样式的布局，这个时候你就只需要返回布局属性的frame和当前可见区域有交集的对象就行。

layoutAttributesFor…IndexPath

这里用三个点，是因为有三个类似的方法:

  • layoutAttributesForItemAtIndexPath:
  • layoutAttributesForSupplementaryViewOfKind:atIndexPath:
  • layoutAttributesForDecorationViewOfKind:atIndexPath:

它们分别为cell、supplementaryView、decorationView返回布局属性，它们的实现不是必须的，它们只是为对应的IndexPath返回布局属性，如果你能通过其他方法拿到对应indexPath处的布局属性，那就没必要非要实现这几个方法。

以layoutAttributesForItemAtIndexPath:为例，你可以通过+[UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:]方法拿到一个布局属性对象，然后你可能需要访问你的数据源去算出该indexPath处的布局属性的frame等信息，然后赋值给它。

shouldInvalidateLayoutForBoundsChange

这个是用来告诉collectionView是否需要根据bounds的改变而重新计算布局属性，比如横竖屏的旋转。通常的写法如下：

1
2
3
4
5
6
7
8
9

  - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    CGRect oldBounds = self.collectionView.bounds;
    if (CGRectGetWidth(newBounds) != CGRectGetWidth(oldBounds)) {
        return YES;
    }
        return NO;
}

需要注意的是，当在滑动的过程中，需要对某些cell的布局进行更改，那么就需要在这个方法里面返回YES，告诉UICollectionView重新计算布局。因为一个cell的改变会引起整个UICollectionView布局的改变。

4、示例一：瀑布流实现

瀑布流的排列一般用于图片或者商品的展示，它的布局特点是等宽变高，cell的排列是找到最短的那一列，然后把cell放到那个位置，效果如下：

image

下面我们来看看具体的实现，这里的布局行间距和列间距都定位10，列数固定为3列，如上图所示。

系统提供给我们的UICollectionViewFlowLayout显然不能实现瀑布流的布局，因为它的默认实现是一行一列整齐对齐的，所以我们需要新建一个继承自UICollectionViewFlowLayout的类，然后来讲解一下这个类的实现。

prepareLayout

在讲解如何布局瀑布流之前需要先说明一下UICollectionViewFlowLayout的prepareLayout方法，他会在UICollectionView布局之前调用，调用[self.collectionView reloadData]和[self.collectionView.collectionViewLayout invalidateLayout]的时候prepareLayout也会进行调用，如果shouldInvalidateLayoutForBoundsChange返回YES，prepareLayout方法同样也会调用。所以这个函数是提前进行数据布局计算的绝佳地方。

在进行瀑布流布局的时候我们可以在prepareLayout里面根据数据源，计算出所有的布局属性并缓存起来：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

  - (void)prepareLayout {
    [super prepareLayout];
    //记录布局需要的contentSize的高度
    self.contentHeight = 0;
    //columnHeights数组会记录各列的当前布局高度
    [self.columnHeights removeAllObjects];
    
    //默认高度是sectionEdge.top
    for (NSInteger i = 0; i < self.columnCount; i++) {
        [self.columnHeights addObject:@(self.edgeInsets.top)];
    }
    //清除之前所以的布局属性数据
    [self.attrsArray removeAllObjects];
    //通过数据源拿到需要展示的cell数量
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    //开始创建每一个cell对应的布局属性
    for (NSInteger index = 0; index < count; index++) {
        //创建indexPath
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:index inSection:0];
        //获取cell布局属性,在layoutAttributesForItemAtIndexPath里面计算具体的布局信息
        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
        [self.attrsArray addObject:attrs];
    }
}

在layoutAttributesForItemAtIndexPath方法里面去根据参数indexPath拿到数据源里面对应位置的展示数据，根据等宽的前提，等比例的获得布局属性的高度，然后根据记录每列当前布局到的高度的数组columnHeights来找到当前布局最短的那一列，从而获取到布局属性的origin信息，这样在等宽的前提下就获取到了当前indexPath处的布局属性的frame信息。然后更新columnHeights里面的数据，并且让记录布局所需高度的变量contentHeight等于当前列高度数组里面的最大值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

  -(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    //获取一个UICollectionViewLayoutAttributes对象
    UICollectionViewLayoutAttributes *attrs = [super layoutAttributesForItemAtIndexPath:indexPath];
    //列数是3，布局属性的宽度是固定的
    CGFloat collectionViewW = self.collectionView.frame.size.width;
    CGFloat width = (collectionViewW - self.edgeInsets.left - self.edgeInsets.right - (self.columnCount - 1) * self.columnMargin) / self.columnCount;
    CGFloat height = 通过数据源以及宽度信息，获取对应位置的布局属性高度;
    //找到数组内目前高度最小的那一列
    NSInteger destColumn = 0;
    CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];
    for (NSInteger index = 1; index < self.columnCount; index++) {
          CGFloat columnHeight = [self.columnHeights[index] doubleValue];
        if (minColumnHeight > columnHeight) {
            minColumnHeight = columnHeight;
            destColumn = index;
            break;
        }
    }
    //根据列信息，计算出origin的x
    CGFloat x = self.edgeInsets.left + destColumn * (width +self.columnMargin);
    CGFloat y = minColumnHeight;
    if (y != self.edgeInsets.top) {//不是第一行就加上行间距
        y += self.rowMargin;
    }
    //得到布局属性的frame信息
    attrs.frame = CGRectMake(x, y, width, height);
    //更新最短那列的高度
    self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame));
    //更新记录展示布局所需的高度
    CGFloat columnHeight = [self.columnHeights[destColumn] doubleValue];
    if (self.contentHeight < columnHeight) {
        self.contentHeight = columnHeight;
    }
    
    return attrs;
}

滑动的过程在，cell会不断重用，系统会调用layoutAttributesForElementsInRect方法来获取当前可见区域内的布局属性，由于所有的布局属性都缓存了起来，则只需返回布局属性的frame和当前可见区域有交集的布局属性就行。

1
2
3
4
5
6
7
8
9
10
11

  -(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    NSMutableArray *rArray = [NSMutableArray array];
    for (UICollectionViewLayoutAttributes *cacheAttr in _attrsArray) {
        if (CGRectIntersectsRect(cacheAttr.frame, rect)) {
            [rArray addObject:cacheAttr];
        }
    }

    return rArray;
}

最后由于我们自定义了每个cell的高度及布局，所以系统是不知道UICollectionView当前的contentSize的大小，所以我们需要在collectionViewContentSize方法里返回正确的size以确保所以cell都能正常滑动到可见区域里来。

1
2
3
4

  -(CGSize)collectionViewContentSize {
    return CGSizeMake(CGRectGetWidth(self.collectionView.frame), self.contentHeight + self.edgeInsets.bottom);
}

至此，瀑布流的布局就完成了，实现起来非常简单，最关键的地方就是计算布局属性的frame信息。

5、示例二：卡片吸顶布局

卡片吸顶布局的效果如下：

image

可以看到滑到顶部的cell本应该移出当前可见区域，但我们实现的效果是移到顶部后就悬停，并且可以被后来的cell覆盖。

实现的原理非常简单，cell的布局使用UICollectionViewFlowLayout就能实现，我们新建一个继承自UICollectionViewFlowLayout的子类，利用这个子类创建布局，可以利用UICollectionViewFlowLayout提供的参数来构建一个不吸顶展示的collectionView：

image

只需要提供给UICollectionViewFlowLayoutitemSize和minimumLineSpacing就行，行间距minimumLineSpacing设置为一个负数就能建立起互相叠加的效果。

要建立吸顶的效果，只需要在原来的布局基础上，判断布局属性frame小于布局顶部的y值，就将布局属性的frame的y值设置为顶部的y值就行，这样滑动到顶部的cell都会在顶部悬停下来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

  @implementation CardCollectionViewFlowLayout

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    //拿到当前可见区域内的布局属性
    NSArray *oldItems = [super layoutAttributesForElementsInRect:rect];
    //处理当前可见区域内的布局属性吸顶
    [oldItems enumerateObjectsUsingBlock:^(UICollectionViewLayoutAttributes *attributes, NSUInteger idx, BOOL *stop) {
        [self recomputeCellAttributesFrame:attributes];
    }];
    
    return oldItems;
}

- (void)recomputeCellAttributesFrame:(UICollectionViewLayoutAttributes *)attributes
{
    //获取悬停处的y值
    CGFloat minY = CGRectGetMinY(self.collectionView.bounds) + self.collectionView.contentInset.top;
    //拿到布局属性应该出现的位置
    CGFloat finalY = MAX(minY, attributes.frame.origin.y);
    
    CGPoint origin = attributes.frame.origin;
    origin.y = finalY;
    attributes.frame = (CGRect){origin, attributes.frame.size};
    //根据IndexPath设置zIndex能确立顶部悬停的cell被后来的cell覆盖的层级关系
    attributes.zIndex = attributes.indexPath.row;
}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    //由于cell在滑动过程中会不断修改cell的位置，所以需要不断重新计算所有布局属性的信息
    return YES;
}

@end

在实现里面不需要-(CGSize)collectionViewContentSize方法的原因是，对于利用UICollectionViewFlowLayout来进行布局，而不是自定义的布局，系统会自动根据你设置的itemSize等信息计算出contentSize。

6、总结

通过上面的例子我们可以看到，UICollectionView相到于一个画板，而UICollectionViewLayout则可以帮我们组织画板的大小，以及画板内容的组织形态。在日常开发需求中，我们也需要重视UICollectionView，利用好它可以达到事半功倍的效果。

Comments