UICollectionView實(shí)現(xiàn)瀑布流

在iOS中可以實(shí)現(xiàn)瀑布流的目前已知的有2種方案：

1. 使用UIScrollView自己封裝一套，這種方案是應(yīng)用于iOS6之前的，因?yàn)閕OS6才出來(lái)UICollectionView,不過(guò)現(xiàn)在這種方案已經(jīng)不怎么用了，還得自己封裝。而且自己封裝的性能不一定有系統(tǒng)的要好。
2. 使用系統(tǒng)自帶的UICollectionView，然后自定義layout，自己實(shí)現(xiàn)瀑布流效果

本文中我們介紹第二種實(shí)現(xiàn)方案
首先我們需要自定義一個(gè)繼承于UICollectionViewLayout的layout，然后需要重寫(xiě)四個(gè)方法:

1. • (void)prepareLayout
2. • (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
3. • (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
4. • (CGSize)collectionViewContentSize

第一個(gè)方法是做一些初始化的操作，這個(gè)方法必須先調(diào)用一下父類的實(shí)現(xiàn)
第二個(gè)方法返回的是一個(gè)裝著UICollectionViewLayoutAttributes的數(shù)組
第三個(gè)方法返回indexPath位置的UICollectionViewLayoutAttributes
第四個(gè)方法是返回UICollectionView的可滾動(dòng)范圍

如何實(shí)現(xiàn)瀑布流

首先我們需要明白一點(diǎn)瀑布流的排列，瀑布流是大小不規(guī)則的一些控件分布在手機(jī)屏幕上面，然后肯定有長(zhǎng)度高的也有矮的(就像人的身高一樣，哈哈哈)，當(dāng)排滿第一排的時(shí)候就會(huì)往下繼續(xù)排，那么這個(gè)應(yīng)該往哪里放呢，==答案就是把它放到第一排最短的那個(gè)下面==，以此類推，按照這個(gè)規(guī)律排列下去。
明白了這一點(diǎn)我們接下來(lái)就該寫(xiě)代碼了
首先我們創(chuàng)建兩個(gè)數(shù)組一個(gè)裝著cell的布局屬性，另一個(gè)裝著當(dāng)前cell的總高度

//c存放所有cell的布局屬性
@property (nonatomic, strong) NSMutableArray *attrsArray;
//存放所有列的當(dāng)前高度
@property (nonatomic, strong) NSMutableArray *columnHeights;
/** 內(nèi)容的高度 */
@property (nonatomic, assign) CGFloat contentHeight;

- (void)prepareLayout
{
    [super prepareLayout];
    
    self.contentHeight = 0;
    
    //清除之前計(jì)算的所有高度，因?yàn)樗⑿碌臅r(shí)候回調(diào)用這個(gè)方法
    [self.columnHeights removeAllObjects];
    for (NSInteger i = 0; i < DefaultColumnCpunt; i++) {
        [self.columnHeights addObject:@(self.edgeInsets.top)];
    }
    
    //把初始化的操作都放到這里
    [self.attrsArray removeAllObjects];
    
    //開(kāi)始創(chuàng)建每一個(gè)cell對(duì)應(yīng)的布局屬性
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (NSInteger i = 0; i < count; i++) {
        // 創(chuàng)建位置
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        // 獲取indexPath位置cell對(duì)應(yīng)的布局屬性
        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
        [self.attrsArray addObject:attrs];
    }
}

首先把cell的高度設(shè)置為self.edgeInsets.top不然這里會(huì)崩潰。然后取出來(lái)item的個(gè)數(shù)，然后循環(huán)取出每個(gè)item的UICollectionViewLayoutAttributes，然后把它加入到attsArray，然后在- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect這個(gè)方法中直接返回attrsArray即可。

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    
    CGFloat collectionViewW = self.collectionView.frame.size.width;
    
    CGFloat w = (collectionViewW - self.edgeInsets.left - self.edgeInsets.right -(self.columnCount - 1) * self.columnMargin) / self.columnCount;
    
    CGFloat h = [self.delegate WaterFlowLayout:self heightForRowAtIndexPath:indexPath.item itemWidth:w];
    
    NSInteger destColumn = 0;
    
    CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];
    for (NSInteger i = 0; i < self.columnCount; i++) {
        CGFloat columnHeight = [self.columnHeights[i] doubleValue];
        
        if (minColumnHeight > columnHeight) {
            minColumnHeight = columnHeight;
            destColumn = i;
        }
    }
    
    CGFloat x = self.edgeInsets.left + destColumn * (w + self.columnMargin);
    CGFloat y = minColumnHeight;
    if (y != self.edgeInsets.top) {
        y += self.rowMargin;
    }
    
    attrs.frame = CGRectMake(x, y, w, h);
    
    self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame));
    
    CGFloat columnHeight = [self.columnHeights[destColumn] doubleValue];
    if (self.contentHeight < columnHeight) {
        self.contentHeight = columnHeight;
    }
    return attrs;
    
}

上面這個(gè)方法是計(jì)算item的位置的代碼，首先取出來(lái)indexPath的UICollectionViewLayoutAttributes對(duì)象，然后取出來(lái)w，h，核心代碼如下：

 NSInteger destColumn = 0;
    
    CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];
    for (NSInteger i = 0; i < self.columnCount; i++) {
        CGFloat columnHeight = [self.columnHeights[i] doubleValue];
        
        if (minColumnHeight > columnHeight) {
            minColumnHeight = columnHeight;
            destColumn = i;
        }
    }
    
    CGFloat x = self.edgeInsets.left + destColumn * (w + self.columnMargin);
    CGFloat y = minColumnHeight;
    if (y != self.edgeInsets.top) {
        y += self.rowMargin;
    }

首先弄了一個(gè)標(biāo)示destColumn來(lái)做記錄是那一列的，然后定義一個(gè)minColumnHeight為最小的列的高度，取出來(lái)self.columnHeights[0]的高度，這里默認(rèn)為它就是最小的，然后進(jìn)行for循環(huán)遍歷，取出來(lái)i位置上面的高度，如果這個(gè)值小于之前的minColumnHeight，那么取出來(lái)的這個(gè)高度就是最小的高度了，然后把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;
//        }
//    }
    return CGSizeMake(0, self.contentHeight + self.edgeInsets.bottom);
}

代碼在github上面
github