前言
相對于UITableView而言，UICollectionView具有更高的定制性和靈活性。它將其子視圖的位置，大小和外觀的控制權(quán)委托給一個(gè)單獨(dú)的布局對象。通過提供這樣一個(gè)自定義的布局對象，你幾乎可以實(shí)現(xiàn)任何你能想想到的布局。布局繼承自UICollectionViewLayout這幾個(gè)抽象基類。IOS6中以UICollectionViewFlowLayout類的形式提出了一個(gè)具體的布局實(shí)現(xiàn)。
自定義布局
一般有兩種類型的collection view布局：
1.獨(dú)立于內(nèi)容的布局計(jì)算。
每個(gè)cell的位置和外觀不是基于其顯示的內(nèi)容，但是所有的cell的顯示順序是基于內(nèi)容的順序。可以把默認(rèn)的flowlayout作為例子。每個(gè)cell都基于前一個(gè)cell放置（或者如果沒有足夠的空間，則從下一行開始）。布局對象不必訪問實(shí)際數(shù)據(jù)來計(jì)算布局。
2.基于內(nèi)容的布局計(jì)算。
布局對象不僅需要取出當(dāng)前可見cell的數(shù)據(jù)，還需要從所有記錄中取出一些決定當(dāng)前哪些cell可見的數(shù)據(jù)。
如果有一個(gè)依賴內(nèi)容的布局，那就是暗示你需要寫自定義的布局類了，同時(shí)需要自定義一個(gè)類繼承自UICollectionViewFlowLayout。重寫子類的方法來重新布局。
步驟分解
我們今天要完成的例子的效果如下。是不是還比較炫酷。（哈哈，跟著本文敲到最后，你也可以的，相信我！）
其實(shí)UICollectionView布局非常簡單。通過對程序打上斷點(diǎn)，你會發(fā)現(xiàn)只需重寫以下幾個(gè)UICollectionViewLayout方法就能實(shí)現(xiàn)。
-(void)prepareLayout
首先做布局的準(zhǔn)備工作，我們主要做兩件事：1.用一個(gè)數(shù)組保存每列cell的origin.x。2.隨機(jī)生成所有cell的高度，并用數(shù)組保存
-(CGSize)collectionViewContentSize
提供collectionView的滾動區(qū)域大小。第一次進(jìn)來的時(shí)候是0。
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
為每一個(gè)cell加一個(gè)layout屬性
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
通過給每個(gè)cell的frame重新賦值來改變cell的坐標(biāo)
-(CGSize)collectionViewContentSize
最終根據(jù)cell的布局排列來確定collectionView的滾動區(qū)域大小
干完以上的活后，運(yùn)行你的程序，當(dāng)當(dāng)當(dāng)當(dāng)。。。成功了。。。簡單吧！下面我們來具體分解以下以上的幾個(gè)方法。
詳細(xì)分析
-(void)prepareLayout:
首先我們通過以下的方法獲取collctionView有多少組,每組有多少列的數(shù)據(jù)
//初始化數(shù)據(jù)
_numberOfSections = [self.collectionView numberOfSections];//多少組
_numberOfCellsInSections = [self.collectionView numberOfItemsInSection:0];//每組多少個(gè)cell
再計(jì)算出每列cell的origin.x，并用數(shù)組保存起來
//計(jì)算出每個(gè)cell的寬度
_cellWidth = (SCREEN_WIDTH - (_columnCount - 1)*_padding)/_columnCount;
//為每個(gè)cell計(jì)算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)來的時(shí)候會走一次，為每個(gè)可見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
為每一個(gè)cell加一個(gè)layout屬性,返回一個(gè)數(shù)組。
initCellYArray方法是創(chuàng)建一個(gè)數(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
通過給每個(gè)cell的frame重新賦值來改變cell的坐標(biāo)。你需要布局多少個(gè)cell，那么這個(gè)方法就會走多少次。每次都為每個(gè)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最短，就在哪列加一個(gè)cell
//修改列里面的Y坐標(biāo)
_cellYArray[minYIndex] = @(tempY + cellHeight + _padding);
attribute.frame = frame;
return attribute;
}
