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