缘由：最近项目中瀑布流遇到的机率相当高，想想以前就是直接用CHTCollectionViewWaterfallLayout，并没有详细去看里面的实现，回来后自己就跟着写一遍，特此记录。
一、了解原生UICollectionViewLayout的几个方法
#pragma mark - 准备布局
- (void)prepareLayout;
#pragma mark - 当尺寸有所变化时，重新刷新
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;
#pragma mark - 处理所有的Item的layoutAttributes
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
#pragma mark - 处理单个的Item的layoutAttributes
- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
#pragma mark - CollectionView的滚动范围
- (CGSize)collectionViewContentSize;
以上几个方法，都是需要重写父类的方法，实现瀑布流布局。
二、实现上述几个方法的实际情况
此处下面代码转载UICollectionView详解：瀑布流, 写的很清楚，然后我们在使用 UICollectionView 的时候只要将
- (instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout 中的 layout 换成自己的自定义的就 OK，同时不忘记使用其代理的实现就让瀑布流出来啦。
#import <UIKit/UIKit.h>
@protocol PQWaterFlowLayoutDelegate;
@interface PQWaterFlowLayout : UICollectionViewLayout
// cell的列间距
@property (nonatomic, assign) CGFloat columnMargin;
// cell的行间距
@property (nonatomic, assign) CGFloat rowMargin;
// cell的top,right,bottom,left间距
@property (nonatomic, assign) UIEdgeInsets insets;
// 显示多少列
@property (nonatomic, assign) NSInteger count;
// delegate
@property (nonatomic, weak) id <PQWaterFlowLayoutDelegate> delegate;
@end
@protocol PQWaterFlowLayoutDelegate <NSObject>
/*通过代理获得每个cell的高度(之所以用代理取得高度的值，就是为了解耦，这里定义的LFWaterFlowLayout不依赖与任务模型数据)*/
- (CGFloat)waterFlowLayout:(PQWaterFlowLayout *)waterFlowLayout heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath *)indexPath;
@end
#import "PQWaterFlowLayout.h"
@interface PQWaterFlowLayout ()
/* Key: 第几列; Value: 保存每列的cell的底部y值 */
@property (nonatomic,strong) NSMutableDictionary *cellInfo;
@end
@implementation PQWaterFlowLayout
#pragma mark - 初始化属性
- (instancetype)init {
self = [super init];
if (self) {
self.columnMargin = 10;
self.rowMargin = 10;
self.insets = UIEdgeInsetsMake(10, 10, 10, 10);
self.count = 2;
}
return self;
}
- (NSMutableDictionary *)cellInfo {
if (!_cellInfo) {
_cellInfo = [NSMutableDictionary dictionary];
}
return _cellInfo;
}
#pragma mark - 当尺寸有所变化时，重新刷新
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
return YES;
}
#pragma mark - 准备布局
- (void)prepareLayout {
[super prepareLayout];
for (int i=0; i<self.count; i++) {
NSString *index = [NSString stringWithFormat:@"%d",i];
self.cellInfo[index] = @(self.insets.top);
}
}
#pragma mark - 处理所有的Item的layoutAttributes
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
// 每次重新布局之前，先清除掉以前的数据(因为屏幕滚动的时候也会调用)
__weak typeof (self) wSelf = self;
[self.cellInfo enumerateKeysAndObjectsUsingBlock:^(NSString *columnIndex, NSNumber *minY, BOOL *stop) {
wSelf.cellInfo[columnIndex] = @(wSelf.insets.top);
}];
NSMutableArray *array = [NSMutableArray array];
NSInteger count = [self.collectionView numberOfItemsInSection:0];
for (int i=0; i<count; i++) {
UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
[array addObject:attrs];
}
return array;
}
#pragma mark - 处理单个的Item的layoutAttributes
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
// 获取cell底部Y值最小的列
__block NSString *minYForColumn = @"0";
__weak typeof (self) wSelf = self;
[self.cellInfo enumerateKeysAndObjectsUsingBlock:^(NSString *columnIndex, NSNumber *minY, BOOL *stop) {
if ([minY floatValue] < [wSelf.cellInfo[minYForColumn] floatValue]) {
minYForColumn = columnIndex;
}
}];
CGFloat width = (self.collectionView.frame.size.width - self.insets.left - self.insets.right - self.columnMargin * (self.count - 1)) / self.count;
CGFloat height = [self.delegate waterFlowLayout:self heightForWidth:width atIndexPath:indexPath];
CGFloat x = self.insets.left + (width + self.columnMargin) * [minYForColumn integerValue];
CGFloat y = self.rowMargin + [self.cellInfo[minYForColumn] floatValue];
self.cellInfo[minYForColumn] = @(y + height);
// 创建属性
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attrs.frame = CGRectMake(x, y, width, height);
return attrs;
}
#pragma mark - CollectionView的滚动范围
- (CGSize)collectionViewContentSize {
CGFloat width = self.collectionView.frame.size.width;
__block CGFloat maxY = 0;
[self.cellInfo enumerateKeysAndObjectsUsingBlock:^(NSString *columnIndex, NSNumber *itemMaxY, BOOL *stop) {
if ([itemMaxY floatValue] > maxY) {
maxY = [itemMaxY floatValue];
}
}];
return CGSizeMake(width, maxY + self.insets.bottom);
}
@end
三、具体思路的实现
3-1、确定滚动方向、默认列数、行间距、列间距
self.columnMargin = 10;
self.rowMargin = 10;
self.insets = UIEdgeInsetsMake(10, 10, 10, 10);
self.count = 2;
3-2、可以提供一个数组(记录当前每一列的最大Y值)，假如count，我们就提供一个count个元素的数组，记录所有布局属性。
for (int i=0; i<self.count; i++) {
NSString *index = [NSString stringWithFormat:@"%d",i];
self.cellInfo[index] = @(self.insets.top);
}
3-3、在layoutAttributesForElementsInRect:方法（返回所有元素的布局属性数组 ），并保存。
__weak typeof (self) wSelf = self;
[self.cellInfo enumerateKeysAndObjectsUsingBlock:^(NSString *columnIndex, NSNumber *minY, BOOL *stop) {
wSelf.cellInfo[columnIndex] = @(wSelf.insets.top);
}];
NSMutableArray *array = [NSMutableArray array];
NSInteger count = [self.collectionView numberOfItemsInSection:0];
for (int i=0; i<count; i++) {
UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
[array addObject:attrs];
}
return array;
3-4、我们可以在layoutAttributesForItemAtIndexPath: 方法： 来调整 Cell的布局属性 ， 指定Cell的 frame， 这个就是最核心的确定了frame。
CGFloat width = (self.collectionView.frame.size.width - self.insets.left - self.insets.right - self.columnMargin * (self.count - 1)) / self.count;
CGFloat height = [self.delegate waterFlowLayout:self heightForWidth:width atIndexPath:indexPath];
CGFloat x = self.insets.left + (width + self.columnMargin) * [minYForColumn integerValue];
CGFloat y = self.rowMargin + [self.cellInfo[minYForColumn] floatValue];
self.cellInfo[minYForColumn] = @(y + height);
// 创建属性
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attrs.frame = CGRectMake(x, y, width, height);
3-5、设置collectionView的contentSize，让其正常滚动。
CGFloat width = self.collectionView.frame.size.width;
__block CGFloat maxY = 0;
[self.cellInfo enumerateKeysAndObjectsUsingBlock:^(NSString *columnIndex, NSNumber *itemMaxY, BOOL *stop) {
if ([itemMaxY floatValue] > maxY) {
maxY = [itemMaxY floatValue];
}
}];
return CGSizeMake(width, maxY + self.insets.bottom);
当然，我们平常用的时候，只要用CHTCollectionViewWaterfallLayout这个就 OK 了，比较完善，而且项目一直在更新中，强烈推荐。
网友评论