UICollectionView 實(shí)現(xiàn)流式布局思考路徑

在我有限的印象中，我一直記得，UICollectionView 的布局是那種橫屏豎直，一個(gè)一個(gè)方塊(cell)都規(guī)矩的按照從左到右，從上到下排列的。
但我突然聯(lián)想到，UITableView 的 cell，可以動(dòng)態(tài)的返回行高。那么 UICollectionView 肯定也有一個(gè)動(dòng)態(tài)的返回每一個(gè) itemSize 的代理方法。
于是，第一次思維過(guò)程就是：

UICollectionView 實(shí)現(xiàn)瀑布流的核心思路：（一開(kāi)始的初想法）
1. 無(wú)非就是每一個(gè) Cell 的高度不一樣。
2. 高度根據(jù)具體的內(nèi)容來(lái)計(jì)算。
3. 在 UICollectionView 的返回 itemSize 的代碼方法里，返回每一個(gè) cell 的高度，實(shí)現(xiàn)瀑布流.
4. 這個(gè)返回 CGSize 的方法，并不是 collectionviewDelegate 的，而是 UICollectionViewFlowLayoutDelegate 的協(xié)議方法。

于是，就按照上面那個(gè)思路，開(kāi)始代碼的書寫。

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    CGFloat randomHeight = arc4random_uniform(300);
    return CGSizeMake(_cellWidth, randomHeight);
}

但是執(zhí)行的界面 UI 顯示則是：

錯(cuò)誤的流式布局UI

發(fā)現(xiàn)結(jié)果是：

使用這種方式布局，每個(gè) cell 的大小的確是變了，但是占據(jù)的空間大小都是一樣的，看起來(lái)比較死板。壓根就不是正確的流式布局。

UICollectionView 的布局，是由布局對(duì)象確定的。

默認(rèn)的布局對(duì)象，只能從左到右，從上到下的布局。

而流式布局對(duì)象的基本原理是：

總是從最短的那一列追加 cell。

流式布局的核心思想

1 -> 2 - > 3 -> 4 -> 5 的順序

所以要想實(shí)現(xiàn)流式布局，就必須得自定義自己的布局對(duì)象。
為了完成正確的布局(cell 占據(jù)的位置合適),就必須手動(dòng)的計(jì)算每一個(gè) cell 的 frame。

于是開(kāi)始自定義一個(gè)流式布局的自定義對(duì)象。

但如何計(jì)算每一個(gè) cell 的 frame 呢？

通過(guò)在網(wǎng)上查找資料，要自定義布局 cell 的每一個(gè) frame，需要下面這些做法。

使用 UICollectionView 布局的根本核心就是在于自定義一個(gè)你希望布局成什么樣子的 UICollectionViewFlowLayout 的布局類型。
其核心之二是在自定義的 Layout 類型里重寫 prepareLayout 方法。
其核心之三的，在這個(gè)方法里，你需要需要怎么布局 cell，就自己手動(dòng)的去計(jì)算每一個(gè) cell 的 frame。
對(duì)應(yīng)到代碼的級(jí)別就是，你需要計(jì)算每一個(gè) cell 的 IndexPath 對(duì)應(yīng)的下 UICollectionFlowLayoutAttributes.

WaterFlowLayout

@implementation WaterFlowLayout {
    /** 自定義布局的配置數(shù)據(jù)，存儲(chǔ)每一個(gè) cell 的位置 frame */
    NSMutableArray<UICollectionViewLayoutAttributes *> *_attributeAttay;
}

- (void)prepareLayout {
    
    /**
     使用 UICollectionView 布局的根本核心就是在于自定義一個(gè)你希望布局成什么樣子的 UICollectionViewFlowLayout 的布局類型。
     其核心之二是在自定義的 Layout 類型里重寫 prepareLayout 方法。
     其核心之三的，在這個(gè)方法里，你需要需要怎么布局 cell，就自己手動(dòng)的去計(jì)算每一個(gè) cell 的 frame。
     對(duì)應(yīng)到代碼的級(jí)別就是，你需要計(jì)算每一個(gè) cell 的 IndexPath 對(duì)應(yīng)的下 UICollectionFlowLayoutAttributes.
     */
    
    [super prepareLayout];
    
    _attributeAttay = [NSMutableArray arrayWithCapacity:self.count];
    
    // 這個(gè)方法，就是 collectionView 在 "布局 cell 之前"會(huì)執(zhí)行的方法。
    // 請(qǐng)注意，這兒就一個(gè)在【布局 cell】之前，說(shuō)明步驟已經(jīng)到達(dá)了 cell 的布局了。
    // 也側(cè)向的說(shuō)明，collectionView 的 frame 已經(jīng)設(shè)定好了。
    // 在 OC 的布局步驟中，只有當(dāng)父視圖的 frame 計(jì)算好了，在能輪上子視圖的布局。
    // 也就是說(shuō)，我們?cè)谶@個(gè)方法里可以拿到 collectionView 已經(jīng)布局好的 frame。
    
    // NSLog(@"%@",NSStringFromCGRect(self.collectionView.frame)); // {{0, 0}, {375, 667}}
    
    /** 設(shè)置 collectionView 的基本布局屬性 */
    self.collectionView.showsHorizontalScrollIndicator = NO;
    self.collectionView.bounces = NO;
    self.scrollDirection = UICollectionViewScrollDirectionVertical;
    // collectionView 的普通布局，本質(zhì)上是根據(jù)滾動(dòng)方向，先行后列的布局。
    // 但這種布局方式，并不滿足流式布局的需求。所以，我們需要自定義每一個(gè) cell 的 frame。
    // self.itemSize = CGSizeMake(100, 100);
    
    // 計(jì)算每一列的 cell 寬度
    CGFloat cellWidth = ([UIScreen mainScreen].bounds.size.width - kMargin * 3) * 0.5;
    
    /** 由于我們是計(jì)算每一個(gè) cell 的 frame，而不是按照原來(lái)的默認(rèn)布局方式，從左到右，從上到下。所以，我們需要使用一個(gè)數(shù)組，保存每一列的高度。每次都是把 cell 往比較矮的那一列追加的方式來(lái)計(jì)算它的 frame。所以，我們需要定義一個(gè)數(shù)組，來(lái)保存每一列的高度。 */
    /** 這里的數(shù)組為什么是2？因?yàn)樵?iPhone 應(yīng)用中，流式布局基本都是2列，屏幕寬度就那么大。 */
    CGFloat colHeight[2] = {self.sectionInset.top,self.sectionInset.top};
    /** 記錄左右 cell 的個(gè)數(shù) */
    NSUInteger cellSideCount[2] = {0,0};
    
    // 根據(jù) model 的個(gè)數(shù)，來(lái)遍歷的計(jì)算每一個(gè) cell 的 frame。
    for (NSInteger i = 0; i < self.count; i++) {
        // 雖然 cell 是復(fù)用的，但是 indexPath 卻是固定死的，每一個(gè) indexPath 不會(huì)強(qiáng)綁定一個(gè) cell，但是一定會(huì)強(qiáng)綁定整好和它對(duì)應(yīng)上的 cell 的 frame。
        NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
        // 計(jì)算 cell 的 frame，并不是直接 cell.frame 這么做的，況且這里也拿不到 cell，這里只是布局。
        // 所以，我們需要使用 UICollectionViewFlowLayoutAttribute 配合 indexPath 來(lái)間接的綁定每一個(gè)位置 cell 的 frame。
        UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
        
        // 隨機(jī)一個(gè) cell 的高度。100 - 399 之前
        NSUInteger randHeight = arc4random() % 300 + 100;
        
        /** cell 的 frame，計(jì)算核心是，往短的那一列追加 frame */
        // 因?yàn)?cell 是根據(jù) colHeight 左右擺布局的，所以，我們需要知道每一個(gè) cell 的 x 的偏移量。
        // 是0個(gè)，還是第一個(gè)？
        NSUInteger xOffset = 0;
        if (colHeight[0] < colHeight[1]) {
            xOffset = 0;
            colHeight[0] = colHeight[0] + self.sectionInset.top + randHeight + self.minimumLineSpacing;
            cellSideCount[0]++;
            
        } else {
            xOffset = 1;
            colHeight[1] = colHeight[1] + self.sectionInset.top + randHeight + self.minimumLineSpacing;
            cellSideCount[1]++;
        }
        
        // 然后根據(jù) xoffset & randHeight 來(lái)計(jì)算 cell 的 frame
        CGFloat x,y;
        x = self.sectionInset.left + (cellWidth + self.minimumInteritemSpacing) * xOffset;
        y = colHeight[xOffset] - randHeight - self.minimumLineSpacing;
        attributes.frame = CGRectMake(x, y, cellWidth, randHeight);
        
        [_attributeAttay addObject:attributes];
    }

    
    // 我們?cè)谠O(shè)置布局的時(shí)候，會(huì)設(shè)置 itemSize,
    // itemSize 這個(gè)屬性除了指定每一個(gè) cell 的大小之外，還有一個(gè)非常重要的作用。
    // 那就是 collectionView 會(huì)里用 cell 的 itemSize 和 數(shù)據(jù)源的個(gè)數(shù)來(lái)計(jì)算它自身的 contentSize.
    // 具體做法是，我們需要找到高度長(zhǎng)的那一列，計(jì)算 cell 的平均 itemSize 來(lái)達(dá)到計(jì)算 collectionView 的 contentSize 的目的。
    
    // 左邊的列比較長(zhǎng)
    if (colHeight[0] > colHeight[1]) {
        self.itemSize = CGSizeMake(cellWidth, (colHeight[0] - self.sectionInset.top - ((cellSideCount[0] - 1) * self.minimumInteritemSpacing)) / cellSideCount[0]);
    } else { // 右邊列比較長(zhǎng)，或者一樣長(zhǎng)
         self.itemSize = CGSizeMake(cellWidth, (colHeight[1] - self.sectionInset.top - ((cellSideCount[1] - 1) * self.minimumInteritemSpacing)) / cellSideCount[1]);
    }
    
    NSLog(@"left count %zd right count %zd",cellSideCount[0],cellSideCount[1]);
    
}

/** 在布局的這個(gè)方法里面，返回每一個(gè) cell 通過(guò)自己計(jì)算的出來(lái)的 frame。 */
/** UICollectionViewLayoutAttributes 和 indexPath 綁定來(lái)綁定每一個(gè) cell 的 frame。 */
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
    return _attributeAttay;
}

在替換成我們自定義之后的布局對(duì)象后，UICollectionView 就完成了流式布局了。

流式布局.gif

最后總結(jié)：
通過(guò)這個(gè) demo 的學(xué)習(xí)讓我更加理解了 UICollectionView 的布局是由布局對(duì)象決定的。
我也相信，UICollectionView 能夠?qū)崿F(xiàn)更多更炫酷的布局方式。前提是，能把布局每一個(gè) cell 的 frame 的計(jì)算方式以及細(xì)節(jié)想清楚。

DEMO 地址