UICollectionView 實現(xiàn)流式布局思考路徑
在我有限的印象中体斩，我一直記得梭稚，UICollectionView 的布局是那種橫屏豎直，一個一個方塊(cell)都規(guī)矩的按照從左到右絮吵，從上到下排列的弧烤。
但我突然聯(lián)想到，UITableView 的 cell蹬敲，可以動態(tài)的返回行高暇昂。那么 UICollectionView 肯定也有一個動態(tài)的返回每一個 itemSize 的代理方法。
于是伴嗡，第一次思維過程就是：
UICollectionView 實現(xiàn)瀑布流的核心思路：（一開始的初想法）
1. 無非就是每一個 Cell 的高度不一樣急波。
2. 高度根據(jù)具體的內(nèi)容來計算。
3. 在 UICollectionView 的返回 itemSize 的代碼方法里瘪校，返回每一個 cell 的高度澄暮，實現(xiàn)瀑布流.
4. 這個返回 CGSize 的方法，并不是 collectionviewDelegate 的阱扬，而是 UICollectionViewFlowLayoutDelegate 的協(xié)議方法泣懊。
于是，就按照上面那個思路价认，開始代碼的書寫嗅定。
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
CGFloat randomHeight = arc4random_uniform(300);
return CGSizeMake(_cellWidth, randomHeight);
}
但是執(zhí)行的界面 UI 顯示則是：
發(fā)現(xiàn)結(jié)果是：
使用這種方式布局，每個 cell 的大小的確是變了用踩，但是占據(jù)的空間大小都是一樣的，看起來比較死板忙迁。壓根就不是正確的流式布局脐彩。
UICollectionView 的布局，是由布局對象確定的姊扔。
默認的布局對象惠奸，只能從左到右，從上到下的布局恰梢。
而流式布局對象的基本原理是：
總是從最短的那一列追加 cell佛南。
1 -> 2 - > 3 -> 4 -> 5 的順序
所以要想實現(xiàn)流式布局梗掰，就必須得自定義自己的布局對象。
為了完成正確的布局(cell 占據(jù)的位置合適),就必須手動的計算每一個 cell 的 frame嗅回。
于是開始自定義一個流式布局的自定義對象及穗。
但如何計算每一個 cell 的 frame 呢？
通過在網(wǎng)上查找資料绵载，要自定義布局 cell 的每一個 frame埂陆，需要下面這些做法。
使用 UICollectionView 布局的根本核心就是在于自定義一個你希望布局成什么樣子的 UICollectionViewFlowLayout 的布局類型娃豹。
其核心之二是在自定義的 Layout 類型里重寫 prepareLayout 方法焚虱。
其核心之三的，在這個方法里懂版，你需要需要怎么布局 cell鹃栽，就自己手動的去計算每一個 cell 的 frame。
對應(yīng)到代碼的級別就是躯畴，你需要計算每一個 cell 的 IndexPath 對應(yīng)的下 UICollectionFlowLayoutAttributes.
WaterFlowLayout
@implementation WaterFlowLayout {
/** 自定義布局的配置數(shù)據(jù)民鼓，存儲每一個 cell 的位置 frame */
NSMutableArray<UICollectionViewLayoutAttributes *> *_attributeAttay;
}
- (void)prepareLayout {
/**
使用 UICollectionView 布局的根本核心就是在于自定義一個你希望布局成什么樣子的 UICollectionViewFlowLayout 的布局類型。
其核心之二是在自定義的 Layout 類型里重寫 prepareLayout 方法私股。
其核心之三的摹察，在這個方法里，你需要需要怎么布局 cell倡鲸，就自己手動的去計算每一個 cell 的 frame供嚎。
對應(yīng)到代碼的級別就是，你需要計算每一個 cell 的 IndexPath 對應(yīng)的下 UICollectionFlowLayoutAttributes.
*/
[super prepareLayout];
_attributeAttay = [NSMutableArray arrayWithCapacity:self.count];
// 這個方法峭状，就是 collectionView 在 "布局 cell 之前"會執(zhí)行的方法克滴。
// 請注意，這兒就一個在【布局 cell】之前优床，說明步驟已經(jīng)到達了 cell 的布局了劝赔。
// 也側(cè)向的說明，collectionView 的 frame 已經(jīng)設(shè)定好了胆敞。
// 在 OC 的布局步驟中着帽，只有當父視圖的 frame 計算好了，在能輪上子視圖的布局移层。
// 也就是說仍翰，我們在這個方法里可以拿到 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ù)滾動方向予借，先行后列的布局。
// 但這種布局方式，并不滿足流式布局的需求灵迫。所以秦叛，我們需要自定義每一個 cell 的 frame。
// self.itemSize = CGSizeMake(100, 100);
// 計算每一列的 cell 寬度
CGFloat cellWidth = ([UIScreen mainScreen].bounds.size.width - kMargin * 3) * 0.5;
/** 由于我們是計算每一個 cell 的 frame瀑粥，而不是按照原來的默認布局方式挣跋，從左到右，從上到下利凑。所以浆劲，我們需要使用一個數(shù)組，保存每一列的高度哀澈。每次都是把 cell 往比較矮的那一列追加的方式來計算它的 frame牌借。所以，我們需要定義一個數(shù)組割按，來保存每一列的高度膨报。 */
/** 這里的數(shù)組為什么是2？因為在 iPhone 應(yīng)用中适荣，流式布局基本都是2列现柠，屏幕寬度就那么大。 */
CGFloat colHeight[2] = {self.sectionInset.top,self.sectionInset.top};
/** 記錄左右 cell 的個數(shù) */
NSUInteger cellSideCount[2] = {0,0};
// 根據(jù) model 的個數(shù)弛矛，來遍歷的計算每一個 cell 的 frame够吩。
for (NSInteger i = 0; i < self.count; i++) {
// 雖然 cell 是復(fù)用的，但是 indexPath 卻是固定死的丈氓，每一個 indexPath 不會強綁定一個 cell周循，但是一定會強綁定整好和它對應(yīng)上的 cell 的 frame。
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
// 計算 cell 的 frame万俗，并不是直接 cell.frame 這么做的湾笛，況且這里也拿不到 cell，這里只是布局闰歪。
// 所以嚎研，我們需要使用 UICollectionViewFlowLayoutAttribute 配合 indexPath 來間接的綁定每一個位置 cell 的 frame。
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
// 隨機一個 cell 的高度库倘。100 - 399 之前
NSUInteger randHeight = arc4random() % 300 + 100;
/** cell 的 frame临扮，計算核心是，往短的那一列追加 frame */
// 因為 cell 是根據(jù) colHeight 左右擺布局的教翩，所以公条，我們需要知道每一個 cell 的 x 的偏移量。
// 是0個迂曲，還是第一個？
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 來計算 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];
}
// 我們在設(shè)置布局的時候寥袭，會設(shè)置 itemSize,
// itemSize 這個屬性除了指定每一個 cell 的大小之外路捧，還有一個非常重要的作用关霸。
// 那就是 collectionView 會里用 cell 的 itemSize 和 數(shù)據(jù)源的個數(shù)來計算它自身的 contentSize.
// 具體做法是，我們需要找到高度長的那一列杰扫，計算 cell 的平均 itemSize 來達到計算 collectionView 的 contentSize 的目的队寇。
// 左邊的列比較長
if (colHeight[0] > colHeight[1]) {
self.itemSize = CGSizeMake(cellWidth, (colHeight[0] - self.sectionInset.top - ((cellSideCount[0] - 1) * self.minimumInteritemSpacing)) / cellSideCount[0]);
} else { // 右邊列比較長，或者一樣長
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]);
}
/** 在布局的這個方法里面章姓，返回每一個 cell 通過自己計算的出來的 frame佳遣。 */
/** UICollectionViewLayoutAttributes 和 indexPath 綁定來綁定每一個 cell 的 frame。 */
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
return _attributeAttay;
}
在替換成我們自定義之后的布局對象后凡伊，UICollectionView 就完成了流式布局了零渐。
最后總結(jié)：
通過這個 demo 的學(xué)習(xí)讓我更加理解了 UICollectionView 的布局是由布局對象決定的。
我也相信系忙，UICollectionView 能夠?qū)崿F(xiàn)更多更炫酷的布局方式诵盼。前提是，能把布局每一個 cell 的 frame 的計算方式以及細節(jié)想清楚银还。
