前言
接上一篇文章：
iOS UICollectionView 自定义布局（上）- 瀑布流
最近有时间继续实践了一下UICollectionView的自定义布局，本文记录了基于瀑布流的布局下实现的UICollectionView Header悬浮功能。注意此布局是基于单section设计的，所以Header也只有一个，多section的思路类似，不过计算过程的代码量会多点。
思路
在UITableView中，Header悬浮功能只需设置TableView的style即可实现，但在UICollectionView中由于布局分离出来了，需要在布局中自己计算实现。使用UICollectionView的supplementaryView来作为HeaderView，在上一篇文章中讲到过的关于自定义布局的基础上，在方法
//计算rect内的元素的UICollectionViewLayoutAttributes
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
中添加上计算SupplementaryView的UICollectionViewLayoutAttributes的逻辑，即可实现此功能。
修改自定义的布局
在自定义的布局类中需要处理的方法有3个：
//1
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
//2
- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;
//3
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;
1、在上面的第一个方法中，除了计算item的UICollectionViewLayoutAttributes外，加上计算SupplementaryView的UICollectionViewLayoutAttributes的逻辑。
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
NSMutableArray *attributesArray = self.attributesArray;
NSArray<NSIndexPath *> *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<NSIndexPath *> *)indexPathForSupplementaryViewsOfKind:(NSString *)kind InRect:(CGRect)rect
{
NSMutableArray<NSIndexPath *> *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的顶部露出固定高度。
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
