前言：轉(zhuǎn)眼2018大半年已過，而我的簡(jiǎn)書也已大半年未更新辛掠，今天抽空來給大家?guī)硪粋€(gè)簡(jiǎn)單的瀑布流的實(shí)現(xiàn)谢谦。相信大家對(duì)瀑布流應(yīng)該都不會(huì)陌生，在項(xiàng)目中會(huì)經(jīng)常用到萝衩。對(duì)于瀑布流的實(shí)現(xiàn)原理回挽，可能還有些朋友不太熟悉，這里給大家簡(jiǎn)單講解一下猩谊，并教給大家進(jìn)行封裝千劈，這樣在使用的時(shí)候會(huì)更加的方便快捷。
原理：通過記錄每一列的高度在添加item的時(shí)候進(jìn)行判斷预柒，將item添加于高度最低的那一列的下方即可队塘。需要重寫UICollectionViewLayout的四個(gè)方法：
// 1
- (void)prepareLayout;
// 2
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
// 3
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
// 4
- (CGSize)collectionViewContentSize;
好了，我們開始正式封裝宜鸯。
首先創(chuàng)建一個(gè)類RHWaterFallLayout(名字自己起就行)繼承于UICollectionViewLayout憔古。由于需要記錄每一列的高度，所以我們需要一個(gè)數(shù)組或者字典淋袖，這里用了數(shù)組鸿市，故添加一個(gè)屬性：
// 保存每一列最大y值的數(shù)組
@property (nonatomic, strong) NSMutableArray *columnHeightArray;
上邊可以看到要重寫的第三個(gè)方法是要返回一個(gè)數(shù)組，故也需添加一個(gè)數(shù)組屬性：
// 保存每一個(gè)item的attributes的數(shù)組
@property (nonatomic, strong) NSMutableArray *attributesArray;
這兩個(gè)屬性是不需要外漏的即碗，所以可以添加在RHWaterFallLayout.m文件中焰情。
重寫第一個(gè)方法如下：
// 在這個(gè)方法中做一些數(shù)組的相關(guān)設(shè)置
// 布局前的準(zhǔn)備會(huì)調(diào)用這個(gè)方法
- (void)prepareLayout {
[super prepareLayout];
[self.columnHeightArray removeAllObjects];
for (int i = 0; i < self.columnCount; i++) {
[self.columnHeightArray addObject:@(self.sectionInset.top)];
}
// 根據(jù)collectionView獲取總共有多少個(gè)item
NSInteger itemCount = [self.collectionView numberOfItemsInSection:0];
// 為每一個(gè)item創(chuàng)建一個(gè)attributes并存入數(shù)組
[self.attributesArray removeAllObjects];
for (int i = 0; i < itemCount; i++) {
UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
[self.attributesArray addObject:attributes];
}
}
這里的兩個(gè)數(shù)組屬性我用了懶加載，如果沒有用懶加載的話剥懒，需要在這里初始化内舟。
重寫第二個(gè)方法如下：
- (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的一些信息，同時(shí)計(jì)算并記錄相應(yīng)列的高度初橘。
重寫第三個(gè)方法如下：
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
return self.attributesArray;
}
這里只需要返回我們保存item信息的那個(gè)數(shù)組即可验游。
重寫第四個(gè)方法如下：
- (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);
}
這個(gè)主要是返回collectionView的contentSize充岛，在這里需要對(duì)比找出最高列的高度返回即可。
至此已經(jīng)實(shí)現(xiàn)瀑布流的效果了耕蝉。
大家可能會(huì)注意到上邊用到了幾個(gè)屬性和代理崔梗，下面來說說這幾個(gè)屬性和代理。
我這里創(chuàng)建了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
同時(shí)添加了代理屬性和其他屬性如下：
@property (nonatomic, weak) id<RHWaterFallLayoutDelegate> delegate;
// 總列數(shù)
@property (nonatomic, assign) NSInteger columnCount;
// 列間距
@property (nonatomic, assign) NSInteger columnSpacing;
// 行間距
@property (nonatomic, assign) NSInteger lineSpacing;
// 邊距
@property (nonatomic, assign) UIEdgeInsets sectionInset;
看了這里相信大家就一目了然了垒在。這些屬性是為了來設(shè)置瀑布流的列數(shù)蒜魄、列間距、行間距场躯、邊距以及每個(gè)item的高度的谈为。
而且每個(gè)屬性在上邊使用的時(shí)候都用了get方法來拿取數(shù)據(jù)如下：
- (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);
}
由上可知，這幾個(gè)屬性是優(yōu)先使用代理返回?cái)?shù)據(jù)推盛，所以在使用的時(shí)候即便設(shè)置了值峦阁，只要也實(shí)現(xiàn)了代理方法，那么會(huì)優(yōu)先使用代理返回的數(shù)據(jù)耘成。
接下來說一下大家可能比較關(guān)心的如何使用的問題。其實(shí)使用起來很簡(jiǎn)單只需要?jiǎng)?chuàng)建collectionView的時(shí)候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;
必須要要實(shí)現(xiàn)的代理方法如下：
- (CGFloat)waterFallLayout:(RHWaterFallLayout *)waterFallLayout heightForItemAtIndex:(NSInteger)index itemWidth:(CGFloat)itemWidth {
return arc4random() % 100 + 100;
}
這里返回item的高度即可瘪菌。
至此關(guān)于瀑布流的所有實(shí)現(xiàn)及封裝使用均已完成，效果如下：
最后嘹朗，還是希望能夠幫助到有需要的朋友們师妙，愿我們能夠一起學(xué)習(xí)進(jìn)步，在開發(fā)的道路上越走越順利Ｒ倥唷Ｄā！
