關(guān)于瀑布流布局網(wǎng)上很多人都寫了, 但是自己封裝一個, 可控性更高, 故自己寫一個, 以后的項目可以直接拖進去使用.
效果圖如下:
實現(xiàn)思路如下(具體代碼可到文章結(jié)尾處鏈接里下載demo):
1.繼承系統(tǒng)的flowLayout自定義一個flowLayout, 重寫三個方法.
// 在這個方法里面設(shè)置好所有cell的布局
. - (void)prepareLayout;
// 在這個方法里面告訴系統(tǒng)已設(shè)置好的布局
. - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
// 在這個方法里面設(shè)置滾動區(qū)域
. - (CGSize)collectionViewContentSize;
2.重點是在prepareLayout里面, 寫布局代碼:
記錄每一列的最大高度(從上到下), 我用數(shù)組來記錄. 然后選出高度最小的那一列, 把下一個cell添加到該列下面.再記錄每一列的最大高度, 把下一個cell添加到高度最小的那一列下面, 依次類推, 實現(xiàn)瀑布流.
使用方法:
把demo里面的JWWaterFallLayout文件夾直接拖到你的項目即可.
導(dǎo)入JWWaterFallLayout.h后用JWWaterFallLayout來創(chuàng)建collection view,
該layout額外提供了col屬性來設(shè)置列數(shù)(根據(jù)列數(shù)自動計算cell寬),
該layout額外提供了數(shù)據(jù)源<JWWaterFallLayoutDataSource>方法來設(shè)置每個cell的高度(可根據(jù)index來設(shè)置對應(yīng)第幾個的cell高度)
示例代碼:
JWWaterFallLayout *layout = [[JWWaterFallLayout alloc] init];
layout.minimumLineSpacing = 10;
layout.minimumInteritemSpacing = 10;
layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
layout.col = 4; // 設(shè)置列數(shù)
layout.dataSource = self; // 設(shè)置數(shù)據(jù)源
_collectionV = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
#pragma mark - JWWaterfallLayout DataSource
// 設(shè)置每個cell的高度
- (CGFloat)waterfallLayoutWithLayout:(JWWaterFallLayout *)layout itemIndex:(NSInteger)index{
return arc4random_uniform(100) + 150;
}
Demo下載地址(希望路過順手star一個嘻嘻):
https://github.com/imbawales/JWWaterfallLayout
