UICollectionView 實現流式布局思考路徑
在我有限的印象中，我一直記得，UICollectionView 的布局是那種橫屏豎直，一個一個方塊(cell)都規矩的按照從左到右，從上到下排列的。
但我突然聯想到，UITableView 的 cell，可以動態的返回行高。那么 UICollectionView 肯定也有一個動態的返回每一個 itemSize 的代理方法。
于是，第一次思維過程就是：
UICollectionView 實現瀑布流的核心思路：（一開始的初想法）
1. 無非就是每一個 Cell 的高度不一樣。
2. 高度根據具體的內容來計算。
3. 在 UICollectionView 的返回 itemSize 的代碼方法里，返回每一個 cell 的高度，實現瀑布流.
4. 這個返回 CGSize 的方法，并不是 collectionviewDelegate 的，而是 UICollectionViewFlowLayoutDelegate 的協議方法。
于是，就按照上面那個思路，開始代碼的書寫。
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
CGFloat randomHeight = arc4random_uniform(300);
return CGSizeMake(_cellWidth, randomHeight);
}
但是執行的界面 UI 顯示則是：
發現結果是：
使用這種方式布局，每個 cell 的大小的確是變了，但是占據的空間大小都是一樣的，看起來比較死板。壓根就不是正確的流式布局。
UICollectionView 的布局，是由布局對象確定的。
默認的布局對象，只能從左到右，從上到下的布局。
而流式布局對象的基本原理是：
總是從最短的那一列追加 cell。
1 -> 2 - > 3 -> 4 -> 5 的順序
所以要想實現流式布局，就必須得自定義自己的布局對象。
為了完成正確的布局(cell 占據的位置合適),就必須手動的計算每一個 cell 的 frame。
于是開始自定義一個流式布局的自定義對象。
但如何計算每一個 cell 的 frame 呢？
通過在網上查找資料，要自定義布局 cell 的每一個 frame，需要下面這些做法。
使用 UICollectionView 布局的根本核心就是在于自定義一個你希望布局成什么樣子的 UICollectionViewFlowLayout 的布局類型。
其核心之二是在自定義的 Layout 類型里重寫 prepareLayout 方法。
其核心之三的，在這個方法里，你需要需要怎么布局 cell，就自己手動的去計算每一個 cell 的 frame。
對應到代碼的級別就是，你需要計算每一個 cell 的 IndexPath 對應的下 UICollectionFlowLayoutAttributes.
WaterFlowLayout
@implementation WaterFlowLayout {
/** 自定義布局的配置數據，存儲每一個 cell 的位置 frame */
NSMutableArray<UICollectionViewLayoutAttributes *> *_attributeAttay;
}
- (void)prepareLayout {
/**
使用 UICollectionView 布局的根本核心就是在于自定義一個你希望布局成什么樣子的 UICollectionViewFlowLayout 的布局類型。
其核心之二是在自定義的 Layout 類型里重寫 prepareLayout 方法。
其核心之三的，在這個方法里，你需要需要怎么布局 cell，就自己手動的去計算每一個 cell 的 frame。
對應到代碼的級別就是，你需要計算每一個 cell 的 IndexPath 對應的下 UICollectionFlowLayoutAttributes.
*/
[super prepareLayout];
_attributeAttay = [NSMutableArray arrayWithCapacity:self.count];
// 這個方法，就是 collectionView 在 "布局 cell 之前"會執行的方法。
// 請注意，這兒就一個在【布局 cell】之前，說明步驟已經到達了 cell 的布局了。
// 也側向的說明，collectionView 的 frame 已經設定好了。
// 在 OC 的布局步驟中，只有當父視圖的 frame 計算好了，在能輪上子視圖的布局。
// 也就是說，我們在這個方法里可以拿到 collectionView 已經布局好的 frame。
// NSLog(@"%@",NSStringFromCGRect(self.collectionView.frame)); // {{0, 0}, {375, 667}}
/** 設置 collectionView 的基本布局屬性 */
self.collectionView.showsHorizontalScrollIndicator = NO;
self.collectionView.bounces = NO;
self.scrollDirection = UICollectionViewScrollDirectionVertical;
// collectionView 的普通布局，本質上是根據滾動方向，先行后列的布局。
// 但這種布局方式，并不滿足流式布局的需求。所以，我們需要自定義每一個 cell 的 frame。
// self.itemSize = CGSizeMake(100, 100);
// 計算每一列的 cell 寬度
CGFloat cellWidth = ([UIScreen mainScreen].bounds.size.width - kMargin * 3) * 0.5;
/** 由于我們是計算每一個 cell 的 frame，而不是按照原來的默認布局方式，從左到右，從上到下。所以，我們需要使用一個數組，保存每一列的高度。每次都是把 cell 往比較矮的那一列追加的方式來計算它的 frame。所以，我們需要定義一個數組，來保存每一列的高度。 */
/** 這里的數組為什么是2？因為在 iPhone 應用中，流式布局基本都是2列，屏幕寬度就那么大。 */
CGFloat colHeight[2] = {self.sectionInset.top,self.sectionInset.top};
/** 記錄左右 cell 的個數 */
NSUInteger cellSideCount[2] = {0,0};
// 根據 model 的個數，來遍歷的計算每一個 cell 的 frame。
for (NSInteger i = 0; i < self.count; i++) {
// 雖然 cell 是復用的，但是 indexPath 卻是固定死的，每一個 indexPath 不會強綁定一個 cell，但是一定會強綁定整好和它對應上的 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 是根據 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]++;
}
// 然后根據 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];
}
// 我們在設置布局的時候，會設置 itemSize,
// itemSize 這個屬性除了指定每一個 cell 的大小之外，還有一個非常重要的作用。
// 那就是 collectionView 會里用 cell 的 itemSize 和 數據源的個數來計算它自身的 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 就完成了流式布局了。
最后總結：
通過這個 demo 的學習讓我更加理解了 UICollectionView 的布局是由布局對象決定的。
我也相信，UICollectionView 能夠實現更多更炫酷的布局方式。前提是，能把布局每一個 cell 的 frame 的計算方式以及細節想清楚。
