iOS UICollectionView 自定义布局（2）- 悬浮Header

前言

接上一篇文章：
iOS UICollectionView 自定义布局（上）- 瀑布流
最近有时间继续实践了一下UICollectionView的自定义布局，本文记录了基于瀑布流的布局下实现的UICollectionView Header悬浮功能。注意此布局是基于单section设计的，所以Header也只有一个，多section的思路类似，不过计算过程的代码量会多点。

UICollectionView Header悬浮

思路

在UITableView中，Header悬浮功能只需设置TableView的style即可实现，但在UICollectionView中由于布局分离出来了，需要在布局中自己计算实现。使用UICollectionView的supplementaryView来作为HeaderView，在上一篇文章中讲到过的关于自定义布局的基础上，在方法

//计算rect内的元素的UICollectionViewLayoutAttributes
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;

中添加上计算SupplementaryView的UICollectionViewLayoutAttributes的逻辑，即可实现此功能。

修改自定义的布局

在自定义的布局类中需要处理的方法有3个：

//1
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;
//2
- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;
//3
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;

1、在上面的第一个方法中，除了计算item的UICollectionViewLayoutAttributes外，加上计算SupplementaryView的UICollectionViewLayoutAttributes的逻辑。

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSMutableArray *attributesArray = self.attributesArray;
    NSArray *indexPaths;
    
    //1、计算rect中出现的items
    indexPaths = [self indexPathForItemsInRect:rect];
    for(NSIndexPath *indexPath in indexPaths){
        //计算对应的LayoutAttributes
        UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];
        [attributesArray addObject:attributes];
    }
    
    //2、*计算rect中出现的SupplementaryViews
    //这里只计算了kSupplementaryViewKindHeader
    indexPaths = [self indexPathForSupplementaryViewsOfKind:kSupplementaryViewKindHeader InRect:rect];
    for(NSIndexPath *indexPath in indexPaths){
        //计算对应的LayoutAttributes
        UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForSupplementaryViewOfKind:kSupplementaryViewKindHeader atIndexPath:indexPath];
        [attributesArray addObject:attributes];
    }
    
    return attributesArray;
}

/**
 *  计算目标rect中含有的某类SupplementaryView
 */
- (NSMutableArray *)indexPathForSupplementaryViewsOfKind:(NSString *)kind InRect:(CGRect)rect
{
    NSMutableArray *indexPaths = [NSMutableArray array];
    if([kind isEqualToString:kSupplementaryViewKindHeader]){
        //在这个瀑布流自定义布局中，只有一个位于列表顶部的SupplementaryView
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:0];
        
        //如果当前区域可以看到SupplementaryView，则返回
        //CGFloat height = [self.delegate collectionViewLayout:self heightForSupplementaryViewAtIndexPath:indexPath];
        //if(CGRectGetMinY(rect) <= height + _insets.top){
            //Header默认总是需要显示
            [indexPaths addObject:indexPath];
        //}
    }
    return indexPaths;
}

用kSupplementaryViewKindHeader来分辨不同的SupplementaryView。indexPathForSupplementaryViewsOfKind: InRect:方法用于计算在rect内需要展示那些指定kind的SupplementaryView。

2、重写父类的
-layoutAttributesForSupplementaryViewOfKind:atIndexPath:方法，计算指定kind和indexPath上的SupplementaryView的LayoutAttributes。

/**
 *  根据kind、indexPath，计算对应的LayoutAttributes
 */
- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:elementKind withIndexPath:indexPath];
    
    //计算LayoutAttributes
    if([elementKind isEqualToString:kSupplementaryViewKindHeader]){
        CGFloat width = self.collectionView.bounds.size.width;
        CGFloat height = [self.delegate collectionViewLayout:self heightForSupplementaryViewAtIndexPath:indexPath];
        CGFloat x = 0;
        //根据offset计算kSupplementaryViewKindHeader的y
        //y = offset.y-(header高度-固定高度)
        CGFloat offsetY = self.collectionView.contentOffset.y;
        CGFloat y = MAX(0,
                        offsetY-(height-kSupplementaryViewKindHeaderPinnedHeight));
        attributes.frame = CGRectMake(x, y, width, height);
        attributes.zIndex = 1024;
    }
    return attributes;
}

为了显示HeaderView并让其悬浮在列表顶部，需要知道它的高度，所以添加代理方法collectionViewLayout:heightForSupplementaryViewAtIndexPath:来获取高度，同时设置zIndex让其保持在所有视图的最前方。在这个方法中，主要计算HeaderView在CollectionView中的y坐标，保证在CollectionView的滚动过程中，HeaderView始终在CollectionView的顶部露出固定高度。

计算headerView的y值

3、InvalidateLayout
最后需要覆盖父类的shouldInvalidateLayoutForBoundsChange方法，让其返回YES，使UICollectionView在滑动时不断刷新Layout。

/**
 *  每当offset改变时，是否需要重新布局，newBounds为offset改变后的rect
 *  瀑布流中不需要刷新，因为滑动时，cell的布局不会随offset而改变
 *  如果需要实现悬浮Header，需要改为YES
 */
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    //return [super shouldInvalidateLayoutForBoundsChange:newBounds];
    return YES;
}

最后

最后创建我们的自定义headerView，在collectionView初始化的时候注册，并在UICollectionViewDataSource的代理方法中创建相应的HeaderView就大功告成啦。

自定义布局类中的方法

完整的Demo：
https://github.com/Tidusww/WWCollectionWaterfallLayout
commit:f7ed79626201b1b9c69eccc0ed8cdb0c2ff09f64

参考资料

http://stackoverflow.com/questions/13511733/how-to-make-supplementary-view-float-in-uicollectionview-as-section-headers-do-i