瀑布.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
最后，還是希望能夠幫助到有需要的朋友們，愿我們能夠一起學習進步，在開發的道路上越走越順利！！！
