瀑布.png
前言：转眼2018大半年已过，而我的简书也已大半年未更新，今天抽空来给大家带来一个简单的瀑布流的实现。相信大家对瀑布流应该都不会陌生，在项目中会经常用到。对于瀑布流的实现原理，可能还有些朋友不太熟悉，这里给大家简单讲解一下，并教给大家进行封装，这样在使用的时候会更加的方便快捷。
原理：通过记录每一列的高度在添加item的时候进行判断，将item添加于高度最低的那一列的下方即可。需要重写UICollectionViewLayout的四个方法：
// 1
- (void)prepareLayout;
// 2
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
// 3
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
// 4
- (CGSize)collectionViewContentSize;
好了，我们开始正式封装。
首先创建一个类RHWaterFallLayout(名字自己起就行)继承于UICollectionViewLayout。由于需要记录每一列的高度，所以我们需要一个数组或者字典，这里用了数组，故添加一个属性：
// 保存每一列最大y值的数组
@property (nonatomic, strong) NSMutableArray *columnHeightArray;
上边可以看到要重写的第三个方法是要返回一个数组，故也需添加一个数组属性：
// 保存每一个item的attributes的数组
@property (nonatomic, strong) NSMutableArray *attributesArray;
这两个属性是不需要外漏的，所以可以添加在RHWaterFallLayout.m文件中。
重写第一个方法如下：
// 在这个方法中做一些数组的相关设置
// 布局前的准备会调用这个方法
- (void)prepareLayout {
[super prepareLayout];
[self.columnHeightArray removeAllObjects];
for (int i = 0; i < self.columnCount; i++) {
[self.columnHeightArray addObject:@(self.sectionInset.top)];
}
// 根据collectionView获取总共有多少个item
NSInteger itemCount = [self.collectionView numberOfItemsInSection:0];
// 为每一个item创建一个attributes并存入数组
[self.attributesArray removeAllObjects];
for (int i = 0; i < itemCount; i++) {
UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
[self.attributesArray addObject:attributes];
}
}
这里的两个数组属性我用了懒加载，如果没有用懒加载的话，需要在这里初始化。
重写第二个方法如下：
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
NSInteger destColumn = 0;
CGFloat minColumnHeight = [[self.columnHeightArray objectAtIndex:0] doubleValue];
for (int i = 1; i < self.columnCount; i++) {
CGFloat columnHeight = [self.columnHeightArray[i] doubleValue];
if (minColumnHeight > columnHeight) {
minColumnHeight = columnHeight;
destColumn = I;
}
}
CGFloat w = (self.collectionView.frame.size.width - self.sectionInset.left - self.sectionInset.right - (self.columnCount - 1) * self.columnSpacing) / self.columnCount;
CGFloat h = [self.delegate waterFallLayout:self heightForItemAtIndex:indexPath.item itemWidth:w];
CGFloat x = self.sectionInset.left + destColumn * (w + self.columnSpacing);
CGFloat y = minColumnHeight;
if (y != self.sectionInset.top) {
y += self.lineSpacing;
}
attributes.frame = CGRectMake(x, y, w, h);
self.columnHeightArray[destColumn] = @(y + h);
return attributes;
}
这里是返回了item的一些信息，同时计算并记录相应列的高度。
重写第三个方法如下：
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
return self.attributesArray;
}
这里只需要返回我们保存item信息的那个数组即可。
重写第四个方法如下：
- (CGSize)collectionViewContentSize {
CGFloat maxHeight = [[self.columnHeightArray objectAtIndex:0] doubleValue];
for (int i = 1; i < self.columnCount; i++) {
float height = [self.columnHeightArray[i] doubleValue];
if (height > maxHeight) {
maxHeight = height;
}
}
return CGSizeMake(0, maxHeight + self.sectionInset.bottom);
}
这个主要是返回collectionView的contentSize，在这里需要对比找出最高列的高度返回即可。
至此已经实现瀑布流的效果了。
大家可能会注意到上边用到了几个属性和代理，下面来说说这几个属性和代理。
我这里创建了RHWaterFallLayout的代理如下：
@protocol RHWaterFallLayoutDelegate <NSObject>
// item 高度
- (CGFloat)waterFallLayout:(RHWaterFallLayout *)waterFallLayout heightForItemAtIndex:(NSInteger)index itemWidth:(CGFloat)itemWidth;
@optional
// 多少列
- (NSUInteger)numberColumnsInWaterFallLayout:(RHWaterFallLayout *)waterFallLayout;
// 列间距
- (CGFloat)columnSpacingInWaterFallLayout:(RHWaterFallLayout *)waterFallLayout;
// 行间距
- (CGFloat)lineSpacingInWaterFallLayout:(RHWaterFallLayout *)waterFallLayout;
// 边距
- (UIEdgeInsets)sectionInsetInWaterFallLayout:(RHWaterFallLayout *)waterFallLayout;
@end
同时添加了代理属性和其他属性如下：
@property (nonatomic, weak) id<RHWaterFallLayoutDelegate> delegate;
// 总列数
@property (nonatomic, assign) NSInteger columnCount;
// 列间距
@property (nonatomic, assign) NSInteger columnSpacing;
// 行间距
@property (nonatomic, assign) NSInteger lineSpacing;
// 边距
@property (nonatomic, assign) UIEdgeInsets sectionInset;
看了这里相信大家就一目了然了。这些属性是为了来设置瀑布流的列数、列间距、行间距、边距以及每个item的高度的。
而且每个属性在上边使用的时候都用了get方法来拿取数据如下：
- (NSInteger)columnCount {
if (self.delegate && [self.delegate respondsToSelector:@selector(numberColumnsInWaterFallLayout:)]) {
return [self.delegate numberColumnsInWaterFallLayout:self];
}
if (_columnCount > 0) {
return _columnCount;
}
return 2;
}
- (NSInteger)columnSpacing {
if (self.delegate && [self.delegate respondsToSelector:@selector(columnSpacingInWaterFallLayout:)]) {
return [self.delegate columnSpacingInWaterFallLayout:self];
}
if (_columnSpacing > 0) {
return _columnSpacing;
}
return 10.0;
}
- (NSInteger)lineSpacing {
if (self.delegate && [self.delegate respondsToSelector:@selector(lineSpacingInWaterFallLayout:)]) {
return [self.delegate lineSpacingInWaterFallLayout:self];
}
if (_lineSpacing > 0) {
return _lineSpacing;
}
return 10.0;
}
- (UIEdgeInsets)sectionInset {
if (self.delegate && [self.delegate respondsToSelector:@selector(sectionInsetInWaterFallLayout:)]) {
return [self.delegate sectionInsetInWaterFallLayout:self];
}
if (_sectionInset.top != 0 || _sectionInset.left != 0 || _sectionInset.bottom != 0 || _sectionInset.right != 0) {
return _sectionInset;
}
return UIEdgeInsetsMake(0, 0, 0, 0);
}
由上可知，这几个属性是优先使用代理返回数据，所以在使用的时候即便设置了值，只要也实现了代理方法，那么会优先使用代理返回的数据。
接下来说一下大家可能比较关心的如何使用的问题。其实使用起来很简单只需要创建collectionView的时候Layout使用定制的RHWaterFallLayout即可。如下：
RHWaterFallLayout * layout = [[RHWaterFallLayout alloc] init]; layout.sectionInset = UIEdgeInsetsMake(SS(15), SS(15), SS(15), SS(15)); layout.columnCount = 2;
layout.columnSpacing = SS(10);
layout.lineSpacing = SS(10);
layout.delegate = self;
必须要要实现的代理方法如下：
- (CGFloat)waterFallLayout:(RHWaterFallLayout *)waterFallLayout heightForItemAtIndex:(NSInteger)index itemWidth:(CGFloat)itemWidth {
return arc4random() % 100 + 100;
}
这里返回item的高度即可。
至此关于瀑布流的所有实现及封装使用均已完成，效果如下：
WaterFall.gif
最后，还是希望能够帮助到有需要的朋友们，愿我们能够一起学习进步，在开发的道路上越走越顺利！！！
网友评论