原文地址：http://m.itdecent.cn/p/040c824736cd
UICollectionView實(shí)現(xiàn)瀑布流
在iOS中可以實(shí)現(xiàn)瀑布流的目前已知的有2種方案：
使用UIScrollView自己封裝一套，這種方案是應(yīng)用于iOS6之前的，因?yàn)閕OS6才出來UICollectionView,不過現(xiàn)在這種方案已經(jīng)不怎么用了，還得自己封裝。而且自己封裝的性能不一定有系統(tǒng)的要好。
使用系統(tǒng)自帶的UICollectionView，然后自定義layout，自己實(shí)現(xiàn)瀑布流效果
本文中我們介紹第二種實(shí)現(xiàn)方案
首先我們需要自定義一個繼承于UICollectionViewLayout的layout，然后需要重寫四個方法:
(void)prepareLayout
(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
(UICollectionViewLayoutAttributes)layoutAttributesForItemAtIndexPath:(NSIndexPath)indexPath
(CGSize)collectionViewContentSize
第一個方法是做一些初始化的操作，這個方法必須先調(diào)用一下父類的實(shí)現(xiàn)
第二個方法返回的是一個裝著UICollectionViewLayoutAttributes的數(shù)組
第三個方法返回indexPath位置的UICollectionViewLayoutAttributes
第四個方法是返回UICollectionView的可滾動范圍
如何實(shí)現(xiàn)瀑布流
首先我們需要明白一點(diǎn)瀑布流的排列，瀑布流是大小不規(guī)則的一些控件分布在手機(jī)屏幕上面，然后肯定有長度高的也有矮的(就像人的身高一樣，哈哈哈)，當(dāng)排滿第一排的時候就會往下繼續(xù)排，那么這個應(yīng)該往哪里放呢，==答案就是把它放到第一排最短的那個下面==，以此類推，按照這個規(guī)律排列下去。
明白了這一點(diǎn)我們接下來就該寫代碼了
首先我們創(chuàng)建兩個數(shù)組一個裝著cell的布局屬性，另一個裝著當(dāng)前cell的總高度
//c存放所有cell的布局屬性@property(nonatomic,strong)NSMutableArray*attrsArray;//存放所有列的當(dāng)前高度@property(nonatomic,strong)NSMutableArray*columnHeights;/** 內(nèi)容的高度 */@property(nonatomic,assign)CGFloatcontentHeight;
- (void)prepareLayout{? ? [superprepareLayout];self.contentHeight =0;//清除之前計算的所有高度，因?yàn)樗⑿碌臅r候回調(diào)用這個方法[self.columnHeights removeAllObjects];for(NSIntegeri =0; i < DefaultColumnCpunt; i++) {? ? ? ? [self.columnHeights addObject:@(self.edgeInsets.top)];? ? }//把初始化的操作都放到這里[self.attrsArray removeAllObjects];//開始創(chuàng)建每一個cell對應(yīng)的布局屬性NSIntegercount = [self.collectionView numberOfItemsInSection:0];for(NSIntegeri =0; i < count; i++) {// 創(chuàng)建位置NSIndexPath*indexPath = [NSIndexPathindexPathForItem:i inSection:0];// 獲取indexPath位置cell對應(yīng)的布局屬性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;? ? }
首先弄了一個標(biāo)示destColumn來做記錄是那一列的，然后定義一個minColumnHeight為最小的列的高度，取出來self.columnHeights[0]的高度，這里默認(rèn)為它就是最小的，然后進(jìn)行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上面
