前言
相對于UITableView而言信夫，UICollectionView具有更高的定制性和靈活性所袁。它將其子視圖的位置监婶，大小和外觀的控制權(quán)委托給一個單獨(dú)的布局對象屉佳。通過提供這樣一個自定義的布局對象，你幾乎可以實現(xiàn)任何你能想想到的布局斜姥。布局繼承自UICollectionViewLayout這幾個抽象基類鸿竖。IOS6中以UICollectionViewFlowLayout類的形式提出了一個具體的布局實現(xiàn)。
自定義布局
一般有兩種類型的collection view布局：
1.獨(dú)立于內(nèi)容的布局計算铸敏。
每個cell的位置和外觀不是基于其顯示的內(nèi)容缚忧，但是所有的cell的顯示順序是基于內(nèi)容的順序¤颈剩可以把默認(rèn)的flowlayout作為例子搔谴。每個cell都基于前一個cell放置（或者如果沒有足夠的空間，則從下一行開始）桩撮。布局對象不必訪問實際數(shù)據(jù)來計算布局敦第。
2.基于內(nèi)容的布局計算。
布局對象不僅需要取出當(dāng)前可見cell的數(shù)據(jù)店量，還需要從所有記錄中取出一些決定當(dāng)前哪些cell可見的數(shù)據(jù)芜果。
如果有一個依賴內(nèi)容的布局，那就是暗示你需要寫自定義的布局類了融师，同時需要自定義一個類繼承自UICollectionViewFlowLayout右钾。重寫子類的方法來重新布局。
步驟分解
我們今天要完成的例子的效果如下旱爆。是不是還比較炫酷舀射。（哈哈，跟著本文敲到最后怀伦，你也可以的脆烟，相信我！）
其實UICollectionView布局非常簡單房待。通過對程序打上斷點(diǎn)邢羔，你會發(fā)現(xiàn)只需重寫以下幾個UICollectionViewLayout方法就能實現(xiàn)。
-(void)prepareLayout
首先做布局的準(zhǔn)備工作桑孩，我們主要做兩件事：1.用一個數(shù)組保存每列cell的origin.x拜鹤。2.隨機(jī)生成所有cell的高度，并用數(shù)組保存
-(CGSize)collectionViewContentSize
提供collectionView的滾動區(qū)域大小流椒。第一次進(jìn)來的時候是0敏簿。
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
為每一個cell加一個layout屬性
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
通過給每個cell的frame重新賦值來改變cell的坐標(biāo)
-(CGSize)collectionViewContentSize
最終根據(jù)cell的布局排列來確定collectionView的滾動區(qū)域大小
干完以上的活后，運(yùn)行你的程序，當(dāng)當(dāng)當(dāng)當(dāng)惯裕。温数。。成功了轻猖。帆吻。域那。簡單吧咙边！下面我們來具體分解以下以上的幾個方法。
詳細(xì)分析
-(void)prepareLayout:
首先我們通過以下的方法獲取collctionView有多少組,每組有多少列的數(shù)據(jù)
//初始化數(shù)據(jù)
_numberOfSections = [self.collectionView numberOfSections];//多少組
_numberOfCellsInSections = [self.collectionView numberOfItemsInSection:0];//每組多少個cell
再計算出每列cell的origin.x次员，并用數(shù)組保存起來
//計算出每個cell的寬度
_cellWidth = (SCREEN_WIDTH - (_columnCount - 1)*_padding)/_columnCount;
//為每個cell計算x坐標(biāo)
_cellXArray = [NSMutableArray arrayWithCapacity:_columnCount];
for (int i = 0; i<_columnCount; i++) {
CGFloat tempX = i * (_cellWidth + _padding);
[_cellXArray addObject:@(tempX)];
}
最后隨機(jī)生成所有cell的高度败许，保存到數(shù)組中
//隨機(jī)生成cell的高度
_cellHeightArray = [NSMutableArray arrayWithCapacity:_numberOfCellsInSections];
for (int i = 0; i<_numberOfCellsInSections; i++) {
CGFloat cellHeight = arc4random() % (_cellMaxHeight - _cellMinHeight) + _cellMinHeight;
[_cellHeightArray addObject:@(cellHeight)];
}
-(CGSize)collectionViewContentSize
在剛進(jìn)來的時候會走一次，為每個可見cell重新賦值frame之后又會走一次淑蔚。maxCellYArrayWithArray:方法是用來求最大的cell的y坐標(biāo)市殷。以此來確定collection view 的滾動區(qū)域
-(CGSize)collectionViewContentSize{
CGFloat height = [self maxCellYArrayWithArray:_cellYArray];
return CGSizeMake(SCREEN_WIDTH, height);
}
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
為每一個cell加一個layout屬性,返回一個數(shù)組。
initCellYArray方法是創(chuàng)建一個數(shù)組用來保存每列即將要排列的cell的origin.y
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
[self initCellYArray];
NSMutableArray *array = [NSMutableArray array];
for (int i = 0; i<_numberOfCellsInSections; i++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
UICollectionViewLayoutAttributes *attribute = [self layoutAttributesForItemAtIndexPath:indexPath];
[array addObject:attribute];
}
return array;
}
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
通過給每個cell的frame重新賦值來改變cell的坐標(biāo)刹衫。你需要布局多少個cell醋寝，那么這個方法就會走多少次。每次都為每個cell重新賦上屬性带迟。本文里面只包含了它的frame音羞。你還可以添加其他的屬性，建議點(diǎn)開UICollectionViewLayoutAttributes的源文件查看仓犬。
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewLayoutAttributes *attribute = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
CGRect frame = CGRectZero;
CGFloat cellHeight = [_cellHeightArray[indexPath.row] floatValue];//cell的高度
NSInteger minYIndex = [self minCellYArrayWithArray:_cellYArray];//cellY最小值的索引
CGFloat tempX = [_cellXArray[minYIndex] floatValue];//x坐標(biāo)
CGFloat tempY = [_cellYArray[minYIndex] floatValue];//y坐標(biāo)
frame = CGRectMake(tempX, tempY, _cellWidth, cellHeight);//通過哪列最新的Y最大坐標(biāo)嗅绰，判斷哪列的cell最短，就在哪列加一個cell
//修改列里面的Y坐標(biāo)
_cellYArray[minYIndex] = @(tempY + cellHeight + _padding);
attribute.frame = frame;
return attribute;
}
