IOS簡(jiǎn)單實(shí)現(xiàn)瀑布流UICollectionView
UICollectionView 比tableView 靈活,功能也強(qiáng)大很多。系統(tǒng)實(shí)現(xiàn)了流式布局,但用處還有很多限制。
要想實(shí)現(xiàn)更靈活的布局,就咬重寫(xiě)UICollectionViewLayout。
先看下實(shí)現(xiàn)效果:
廢話不多說(shuō),直接上代碼:
先看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
該類要重寫(xiě)以下方法:
//完成布局前的初始工作 -(void)prepareLayout; //collectionView的內(nèi)容尺寸 -(CGSize)collectionViewContentSize; //為每個(gè)item設(shè)置屬性 -(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath; //獲取制定范圍的所有item的屬性 -(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect; -(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;
每次調(diào)用會(huì)清空colsHeight數(shù)組里的信息:
//完成布局前的初始工作 -(void)prepareLayout{ [super prepareLayout]; self.colWidth =( self.collectionView.frame.size.width - (colCount+1)*colMargin )/colCount; //讓它重新加載 self.colsHeight = nil; } 通過(guò)遍歷colHeight數(shù)組里的所有列來(lái)獲得最長(zhǎng)的那一列,返回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); }
每個(gè)cell要出來(lái)時(shí)這個(gè)方法會(huì)被調(diào)用,在此方法中設(shè)置該cell的frame。
注意heightBlock是外部控制器傳進(jìn)來(lái)的block用以計(jì)算每個(gè)cell的高度,現(xiàn)在我只是設(shè)置了隨機(jī)數(shù)。如果沒(méi)有傳block進(jìn)來(lái)我這里直接讓他崩潰了。
//為每個(gè)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, @"未實(shí)現(xiàn)計(jì)算高度的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; }
實(shí)現(xiàn)下列方法會(huì)在出現(xiàn)新的cell時(shí)重新布局并調(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; }
再來(lái)看看控制器里就是這么簡(jiǎn)單
#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){ //隨機(jī)生成高度 NSMutableArray *arr = [NSMutableArray array]; for (int i = 0; i<100; i++) { [arr addObject:@(arc4random()%50+80)]; } _heightArr = [arr copy]; } return _heightArr; }
關(guān)于瀑布流的文章特別多,本文就是為大家分享了IOS簡(jiǎn)單實(shí)現(xiàn)瀑布流的方法,希望對(duì)大家的學(xué)習(xí)有所幫助。
- IOS Xib控件拖拽與頁(yè)面跳轉(zhuǎn)實(shí)例
- iOS實(shí)現(xiàn)百度地圖拖拽后更新位置以及反編碼
- 淺談iOS11新特性:新增拖拽交互體驗(yàn)
- Android ReboundScrollView仿IOS拖拽回彈效果
- IOS使用UICollectionView實(shí)現(xiàn)無(wú)限輪播效果
- iOS 解決UICollectionView 計(jì)算 Cell 大小的問(wèn)題
- IOS 自定義UICollectionView的頭視圖或者尾視圖UICollectionReusableView
- iOS應(yīng)用中UICollectionViewCell定制Button
- iOS中關(guān)于Swift UICollectionView橫向分頁(yè)的問(wèn)題
- iOS開(kāi)發(fā)UICollectionView實(shí)現(xiàn)拖拽效果
相關(guān)文章
iOS之單獨(dú)使用UISearchBar創(chuàng)建搜索框的示例
本篇文章主要介紹了iOS之單獨(dú)使用UISearchBar創(chuàng)建搜索框的示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10IOS與網(wǎng)頁(yè)JS交互詳解及實(shí)例
這篇文章主要介紹了 IOS與網(wǎng)頁(yè)JS交互詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-12-12IOS UI學(xué)習(xí)教程之區(qū)分NSBundle和NSURL(讀取文件、寫(xiě)入文件)
這篇文章主要為大家詳細(xì)介紹了IOS UI學(xué)習(xí)教程之區(qū)分NSBundle和NSURL,如何讀取、寫(xiě)入文件,感興趣的小伙伴們可以參考一下2016-03-03iPhoneX無(wú)導(dǎo)航欄頁(yè)面適配問(wèn)題解決方案
這篇文章主要介紹了iPhoneX無(wú)導(dǎo)航欄頁(yè)面適配問(wèn)題解決方案,原全屏適配在iPhoneX會(huì)由于安全區(qū)域的變化導(dǎo)致顯示不全,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2017-11-11iOS實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的3種方法示例
這篇文章主要給大家介紹了關(guān)于iOS實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的3種方法,文中通過(guò)示例代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03iOS中的UITableView的重用機(jī)制與加載優(yōu)化詳解
本篇文章主要介紹了iOS中的UITableView的重用機(jī)制與加載優(yōu)化詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02iOS藍(lán)牙設(shè)備名稱緩存問(wèn)題的解決方法
這篇文章主要給大家介紹了關(guān)于iOS藍(lán)牙設(shè)備名稱緩存問(wèn)題的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09iOS界面跳轉(zhuǎn)時(shí)導(dǎo)航欄和tabBar的隱藏與顯示功能
這篇文章主要介紹了iOS界面跳轉(zhuǎn)時(shí)導(dǎo)航欄和tabBar的隱藏與顯示功能,需要的朋友可以參考下2017-02-02