原文地址：http://www.reibang.com/p/040c824736cd
UICollectionView實現(xiàn)瀑布流
在iOS中可以實現(xiàn)瀑布流的目前已知的有2種方案：
使用UIScrollView自己封裝一套佳魔，這種方案是應用于iOS6之前的曙聂，因為iOS6才出來UICollectionView,不過現(xiàn)在這種方案已經(jīng)不怎么用了，還得自己封裝鞠鲜。而且自己封裝的性能不一定有系統(tǒng)的要好宁脊。
使用系統(tǒng)自帶的UICollectionView，然后自定義layout贤姆，自己實現(xiàn)瀑布流效果
本文中我們介紹第二種實現(xiàn)方案
首先我們需要自定義一個繼承于UICollectionViewLayout的layout榆苞，然后需要重寫四個方法:
(void)prepareLayout
(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
(UICollectionViewLayoutAttributes)layoutAttributesForItemAtIndexPath:(NSIndexPath)indexPath
(CGSize)collectionViewContentSize
第一個方法是做一些初始化的操作，這個方法必須先調(diào)用一下父類的實現(xiàn)
第二個方法返回的是一個裝著UICollectionViewLayoutAttributes的數(shù)組
第三個方法返回indexPath位置的UICollectionViewLayoutAttributes
第四個方法是返回UICollectionView的可滾動范圍
如何實現(xiàn)瀑布流
首先我們需要明白一點瀑布流的排列霞捡，瀑布流是大小不規(guī)則的一些控件分布在手機屏幕上面坐漏，然后肯定有長度高的也有矮的(就像人的身高一樣，哈哈哈)碧信，當排滿第一排的時候就會往下繼續(xù)排赊琳，那么這個應該往哪里放呢，==答案就是把它放到第一排最短的那個下面==砰碴，以此類推躏筏，按照這個規(guī)律排列下去。
明白了這一點我們接下來就該寫代碼了
首先我們創(chuàng)建兩個數(shù)組一個裝著cell的布局屬性呈枉，另一個裝著當前cell的總高度
//c存放所有cell的布局屬性@property(nonatomic,strong)NSMutableArray*attrsArray;//存放所有列的當前高度@property(nonatomic,strong)NSMutableArray*columnHeights;/** 內(nèi)容的高度 */@property(nonatomic,assign)CGFloatcontentHeight;
- (void)prepareLayout{? ? [superprepareLayout];self.contentHeight =0;//清除之前計算的所有高度趁尼，因為刷新的時候回調(diào)用這個方法[self.columnHeights removeAllObjects];for(NSIntegeri =0; i < DefaultColumnCpunt; i++) {? ? ? ? [self.columnHeights addObject:@(self.edgeInsets.top)];? ? }//把初始化的操作都放到這里[self.attrsArray removeAllObjects];//開始創(chuàng)建每一個cell對應的布局屬性NSIntegercount = [self.collectionView numberOfItemsInSection:0];for(NSIntegeri =0; i < count; i++) {// 創(chuàng)建位置NSIndexPath*indexPath = [NSIndexPathindexPathForItem:i inSection:0];// 獲取indexPath位置cell對應的布局屬性UICollectionViewLayoutAttributes*attrs = [selflayoutAttributesForItemAtIndexPath:indexPath];? ? ? ? [self.attrsArray addObject:attrs];? ? }}
首先把cell的高度設(shè)置為self.edgeInsets.top不然這里會崩潰。然后取出來item的個數(shù)猖辫，然后循環(huán)取出每個item的UICollectionViewLayoutAttributes弱卡，然后把它加入到attsArray，然后在- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect這個方法中直接返回attrsArray即可住册。
- (UICollectionViewLayoutAttributes*)layoutAttributesForItemAtIndexPath:(NSIndexPath*)indexPath{UICollectionViewLayoutAttributes*attrs = [UICollectionViewLayoutAttributeslayoutAttributesForCellWithIndexPath:indexPath];CGFloatcollectionViewW =self.collectionView.frame.size.width;CGFloatw = (collectionViewW -self.edgeInsets.left -self.edgeInsets.right -(self.columnCount -1) *self.columnMargin) /self.columnCount;CGFloath = [self.delegate WaterFlowLayout:selfheightForRowAtIndexPath:indexPath.item itemWidth:w];NSIntegerdestColumn =0;CGFloatminColumnHeight = [self.columnHeights[0] doubleValue];for(NSIntegeri =0; i columnHeight) {? ? ? ? ? ? minColumnHeight = columnHeight;? ? ? ? ? ? destColumn = i;? ? ? ? }? ? }CGFloatx =self.edgeInsets.left + destColumn * (w +self.columnMargin);CGFloaty = minColumnHeight;if(y !=self.edgeInsets.top) {? ? ? ? y +=self.rowMargin;? ? }? ? attrs.frame =CGRectMake(x, y, w, h);self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame));CGFloatcolumnHeight = [self.columnHeights[destColumn] doubleValue];if(self.contentHeight < columnHeight) {self.contentHeight = columnHeight;? ? }returnattrs;}
上面這個方法是計算item的位置的代碼，首先取出來indexPath的UICollectionViewLayoutAttributes對象瓮具，然后取出來w荧飞，h，核心代碼如下：
NSIntegerdestColumn =0;CGFloatminColumnHeight = [self.columnHeights[0] doubleValue];for(NSIntegeri =0; i columnHeight) {? ? ? ? ? ? minColumnHeight = columnHeight;? ? ? ? ? ? destColumn = i;? ? ? ? }? ? }CGFloatx =self.edgeInsets.left + destColumn * (w +self.columnMargin);CGFloaty = minColumnHeight;if(y !=self.edgeInsets.top) {? ? ? ? y +=self.rowMargin;? ? }
首先弄了一個標示destColumn來做記錄是那一列的名党，然后定義一個minColumnHeight為最小的列的高度叹阔，取出來self.columnHeights[0]的高度，這里默認為它就是最小的传睹，然后進行for循環(huán)遍歷耳幢，取出來i位置上面的高度，如果這個值小于之前的minColumnHeight，那么取出來的這個高度就是最小的高度了睛藻，然后把i的值賦值給destColumn启上，然后x的值就是上面代碼中的相加的結(jié)果，y的值就是繼續(xù)加上間距
- (CGSize)collectionViewContentSize{//? ? CGFloat maxColumnHeight = [self.columnHeights[0] doubleValue];////? ? for (NSInteger i = 1; i < DefaultColumnCpunt; i++) {//? ? ? ? // 取得第i列的高度//? ? ? ? CGFloat columnHeight = [self.columnHeights[i] doubleValue];////? ? ? ? if (maxColumnHeight < columnHeight) {//? ? ? ? ? ? maxColumnHeight = columnHeight;//? ? ? ? }//? ? }returnCGSizeMake(0,self.contentHeight +self.edgeInsets.bottom);}
代碼在github上面
