IOS簡單實現(xiàn)瀑布流UICollectionView
UICollectionView 比tableView 靈活,功能也強大很多。系統(tǒng)實現(xiàn)了流式布局,但用處還有很多限制。
要想實現(xiàn)更靈活的布局,就咬重寫UICollectionViewLayout。
先看下實現(xiàn)效果:

廢話不多說,直接上代碼:
先看WaterfallCollectionLayout.m
#import "WaterfallCollectionLayout.h" #define colMargin 5 #define colCount 4 #define rolMargin 5 @interface WaterfallCollectionLayout () //數(shù)組存放每列的總高度 @property(nonatomic,strong)NSMutableArray* colsHeight; //單元格寬度 @property(nonatomic,assign)CGFloat colWidth; @end
該類要重寫以下方法:
//完成布局前的初始工作 -(void)prepareLayout; //collectionView的內(nèi)容尺寸 -(CGSize)collectionViewContentSize; //為每個item設(shè)置屬性 -(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath; //獲取制定范圍的所有item的屬性 -(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect; -(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;
每次調(diào)用會清空colsHeight數(shù)組里的信息:
//完成布局前的初始工作
-(void)prepareLayout{
[super prepareLayout];
self.colWidth =( self.collectionView.frame.size.width - (colCount+1)*colMargin )/colCount;
//讓它重新加載
self.colsHeight = nil;
}
通過遍歷colHeight數(shù)組里的所有列來獲得最長的那一列,返回contentsize
//collectionView的內(nèi)容尺寸
-(CGSize)collectionViewContentSize{
NSNumber * longest = self.colsHeight[0];
for (NSInteger i =0;i<self.colsHeight.count;i++) {
NSNumber* rolHeight = self.colsHeight[i];
if(longest.floatValue<rolHeight.floatValue){
longest = rolHeight;
}
}
return CGSizeMake(self.collectionView.frame.size.width, longest.floatValue);
}
每個cell要出來時這個方法會被調(diào)用,在此方法中設(shè)置該cell的frame。
注意heightBlock是外部控制器傳進來的block用以計算每個cell的高度,現(xiàn)在我只是設(shè)置了隨機數(shù)。如果沒有傳block進來我這里直接讓他崩潰了。
//為每個item設(shè)置屬性
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewLayoutAttributes* attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
NSNumber * shortest = self.colsHeight[0];
NSInteger shortCol = 0;
for (NSInteger i =0;i<self.colsHeight.count;i++) {
NSNumber* rolHeight = self.colsHeight[i];
if(shortest.floatValue>rolHeight.floatValue){
shortest = rolHeight;
shortCol=i;
}
}
CGFloat x = (shortCol+1)*colMargin+ shortCol * self.colWidth;
CGFloat y = shortest.floatValue+colMargin;
//獲取cell高度
CGFloat height=0;
NSAssert(self.heightBlock!=nil, @"未實現(xiàn)計算高度的block ");
if(self.heightBlock){
height = self.heightBlock(indexPath);
}
attr.frame= CGRectMake(x, y, self.colWidth, height);
self.colsHeight[shortCol]=@(shortest.floatValue+colMargin+height);
return attr;
}
//獲取所有item的屬性
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
NSMutableArray* array = [NSMutableArray array];
NSInteger items = [self.collectionView numberOfItemsInSection:0];
for (int i = 0; i<items;i++) {
UICollectionViewLayoutAttributes* attr = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
[array addObject:attr];
}
return array;
}
實現(xiàn)下列方法會在出現(xiàn)新的cell時重新布局并調(diào)用preparelayout方法
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{
return YES;
}
每列高度的存放,初始高度可以改,我這里是0
-(NSMutableArray *)colsHeight{
if(!_colsHeight){
NSMutableArray * array = [NSMutableArray array];
for(int i =0;i<colCount;i++){
//這里可以設(shè)置初始高度
[array addObject:@(0)];
}
_colsHeight = [array mutableCopy];
}
return _colsHeight;
}
再來看看控制器里就是這么簡單
#pragma mark getter-setter
-(UICollectionView *)collectionView{
if(!_collectionView){
_collectionView = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:self.layout];
_collectionView.backgroundColor = [UIColor whiteColor];
_collectionView.delegate=self;
_collectionView.dataSource=self;
[_collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:identifer];
}
return _collectionView;
}
-(UICollectionViewLayout *)layout{
if(!_layout){
_layout = [[WaterfallCollectionLayout alloc]initWithItemsHeightBlock:^CGFloat(NSIndexPath *index) {
return [self.heightArr[index.item] floatValue];
}];
}
return _layout;
}
-(NSArray *)heightArr{
if(!_heightArr){
//隨機生成高度
NSMutableArray *arr = [NSMutableArray array];
for (int i = 0; i<100; i++) {
[arr addObject:@(arc4random()%50+80)];
}
_heightArr = [arr copy];
}
return _heightArr;
}
關(guān)于瀑布流的文章特別多,本文就是為大家分享了IOS簡單實現(xiàn)瀑布流的方法,希望對大家的學習有所幫助。
- IOS Xib控件拖拽與頁面跳轉(zhuǎn)實例
- iOS實現(xiàn)百度地圖拖拽后更新位置以及反編碼
- 淺談iOS11新特性:新增拖拽交互體驗
- Android ReboundScrollView仿IOS拖拽回彈效果
- IOS使用UICollectionView實現(xiàn)無限輪播效果
- iOS 解決UICollectionView 計算 Cell 大小的問題
- IOS 自定義UICollectionView的頭視圖或者尾視圖UICollectionReusableView
- iOS應(yīng)用中UICollectionViewCell定制Button
- iOS中關(guān)于Swift UICollectionView橫向分頁的問題
- iOS開發(fā)UICollectionView實現(xiàn)拖拽效果
相關(guān)文章
iOS之單獨使用UISearchBar創(chuàng)建搜索框的示例
本篇文章主要介紹了iOS之單獨使用UISearchBar創(chuàng)建搜索框的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
IOS UI學習教程之區(qū)分NSBundle和NSURL(讀取文件、寫入文件)
這篇文章主要為大家詳細介紹了IOS UI學習教程之區(qū)分NSBundle和NSURL,如何讀取、寫入文件,感興趣的小伙伴們可以參考一下2016-03-03
iOS中的UITableView的重用機制與加載優(yōu)化詳解
本篇文章主要介紹了iOS中的UITableView的重用機制與加載優(yōu)化詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
iOS界面跳轉(zhuǎn)時導(dǎo)航欄和tabBar的隱藏與顯示功能
這篇文章主要介紹了iOS界面跳轉(zhuǎn)時導(dǎo)航欄和tabBar的隱藏與顯示功能,需要的朋友可以參考下2017-02-02

