UIcollectionView實(shí)現(xiàn)不規(guī)則排列的算法
UIcollectionView實(shí)現(xiàn)不規(guī)則排列的算法,簡(jiǎn)單的來(lái)說(shuō)就是實(shí)現(xiàn)cell尺寸的規(guī)律變化悼凑，讓其在幾種尺寸中變種，并實(shí)現(xiàn)其排序的一種算法苦囱。說(shuō)的不如看的，下面這張圖將告訴你什么UIcollectionView實(shí)現(xiàn)不規(guī)則排列的算法脾猛。
效果如下：
效果一：
兩列效果
效果二：
三列效果
效果三：
四列效果
效果四：
內(nèi)邊距效果
效果五：
section與section之間無(wú)間距
本例已經(jīng)上傳github撕彤，如果需要看詳細(xì)代碼，請(qǐng)前往下載。
在看本例之前羹铅，確保你對(duì)UICollectionViewLayout有一定的基礎(chǔ)蚀狰。好了，下面開始正式的講解
UICollectionView不規(guī)則算法的實(shí)現(xiàn)
我們知道UICollectionView和UITableView比較相似职员，但是UICollectionView的功能更加的強(qiáng)大麻蹋，基本能實(shí)現(xiàn)任何的cell的布局。UICollectionView由四個(gè)核心的部分組成：UICollectionView焊切、UICollectionDelegate扮授、UICollectionViewDataSources、UICollectionViewLayout专肪。給部分協(xié)同工作刹勃，以實(shí)現(xiàn)用戶任意的布局樣式。各部分的功能如下:
UICollectionView: 協(xié)調(diào)UICollectionViewDataSources與UICollectionViewLayout的工作牵祟，從UICollectionViewDataSources獲取數(shù)據(jù)深夯，向UICollectionViewLayout索取布局信息，將數(shù)據(jù)诺苹、布局信息交個(gè)UICollectionViewCell進(jìn)行顯示咕晋。
UICollectionViewDataSources： 向UICollectionView提供數(shù)據(jù)信息。
UICollectionViewLayout： 向UICollectionView提供布局信息收奔。
UICollectionViewDelegate：告知用戶感興趣的時(shí)刻掌呜，例如cell被點(diǎn)擊坪哄。
根據(jù)上面的描述质蕉，UICollectionView不規(guī)則排列算法的實(shí)現(xiàn)主要是通過(guò)UICollectionViewLayout類完成，因此我們的講解主要是UICollectionViewLayout念祭。
==另外枚驻，在間接之間，一個(gè)必須明白的前提是：cell的大小不是預(yù)先確定的慷荔，即不是有UICollectionView提供的躏救，也不是從網(wǎng)絡(luò)獲取的少办，而是UICollectionViewLayout在布局的時(shí)候根據(jù)概率自動(dòng)生成的航闺。==
++算法詳解++
1 > 我們將UICollectionView的視圖分為固定的列數(shù)：三列，那么每列的寬度得以確定為width墨状，在這之后卫漫，可以確定我們cell要顯示的大小種類：width X width、2width X width肾砂、2width X 2width列赎，每種尺寸大小的cell是通過(guò)概率隨機(jī)生成的。
2 > 使用一個(gè)數(shù)組記錄每列對(duì)應(yīng)的最大的高度镐确。
- (NSMutableArray *)eachLineHight {
if (_eachLineHight == nil) {
_eachLineHight = [NSMutableArray array];
for (int i = 0; i < self.numOfItemInLine; i++) {
[_eachLineHight addObject:@(0)];
}
}
return _eachLineHight;
}
在這個(gè)懶加載中包吝，首先初始化了每列的最高高度為0；
3 > 當(dāng)布局一個(gè)cell的時(shí)候：
第一步源葫，通過(guò)上面的數(shù)組檢測(cè)最短的一列诗越。
// 判斷最短的一類
CGFloat shortest = CGFLOAT_MAX;
NSInteger index = 0;
for (NSInteger i = 0; i < self.numOfItemInLine ; i++) {
CGFloat temp = [self.eachLineHight[i] floatValue];
if (temp < shortest) {
shortest = temp;
index = i;
}
}
第二步，通過(guò)隨機(jī)數(shù)生成高度息堂，確定x嚷狞，y值
X = index * width + self.sectionInset.left;
Y = shortest;
// 根據(jù)概率生成cell的高度
NSInteger num = arc4random_uniform(10);
if (self.twoMulTwoChange * 10 > num) {
H = width * 2;
} else {
H = width * 1;
}
這里需要說(shuō)明的是，上面代碼中sectionInset是代理（即UICollectionView）提供的內(nèi)邊距
第三步荣堰，通過(guò)第一步獲得的最短一列床未，檢測(cè)這一列的下一列和本列高度是否相等；如果相等持隧，那個(gè)么通過(guò)概率確定當(dāng)前布局的cell的寬度是為width 還是 2 X width即硼，如果不相等，那么cell的寬度為直接為width屡拨。到此cell的寬度確定了只酥。在確定了寬度后更新記錄每列最大高度的數(shù)組。這步代碼如下
// 是否可以顯示寬高比為2：1的cell
NSInteger flag = arc4random_uniform(10);
if ((index + 1) < self.numOfItemInLine && [self.eachLineHight[(index + 1)] integerValue] == [self.eachLineHight[index] integerValue] && flag < 10 * self.oneMulTwoChange) { // 可以
W = 2 * width;
// 更新列數(shù)組高度
self.eachLineHight[index] = @(shortest + H);
self.eachLineHight[index + 1] = @(shortest + H);
} else { // 不可以
W = width;
// 排除高度是寬度的兩倍的cell呀狼，將其改為寬高相等的cell
if (H == 2 * width) {
H = width;
}
// 更新列數(shù)組高度
self.eachLineHight[index] = @(shortest + H);
}
需要解釋的一下裂允，上面if判斷句中的條件：
(index + 1) < self.numOfItemInLine是確保當(dāng)前列是否為最后一列，因?yàn)楫?dāng)當(dāng)前列為最后一列的時(shí)候哥艇，就沒有必要判斷了绝编，cell的寬度直接就等于width。
[self.eachLineHight[(index + 1)] integerValue] == [self.eachLineHight[index] integerValue]是判斷當(dāng)前列和下一列是否相等貌踏。在這里的一個(gè)重要點(diǎn)是十饥，這里的integerValue是必須的，因?yàn)槿绻褂胒loatValue的話祖乳，概率實(shí)在是太低了逗堵，兩個(gè)浮點(diǎn)數(shù)要相等是十分難的，你會(huì)看見顯示的cell中沒有一個(gè)是 2width X width 或 2width X 2width的眷昆。因此蜒秤，此處必須使用整型汁咏。
flag < 10 * self.oneMulTwoChange是概率判斷。
還有一點(diǎn)需要注意的是作媚，由于我們不需要cell的size為 width X 2width 的cell攘滩，所以在上面的代碼中一會(huì)看一這么一段代碼：
// 排除高度是寬度的兩倍的cell，將其改為寬高相等的cell
if (H == 2 * width) {
H = width;
}
另外纸泡，在上面的兩個(gè)參數(shù)oneMulTwoChange漂问、 twoMulTwoChange 是兩個(gè)概率因子，一個(gè)決定顯示width X 2width cell的概率弟灼，一個(gè)決定顯示 2width X 2width的概率级解，這兩個(gè)是通過(guò)代理有UICollectionView提供的。
這里UICollectionView不規(guī)則排列的算法就實(shí)現(xiàn)了田绑。接下來(lái)說(shuō)一說(shuō)本demo中的一些相關(guān)功能的實(shí)現(xiàn)勤哗。
Demo中相關(guān)功能的實(shí)現(xiàn)
本例中相關(guān)的功能：
1 > 可以決定本section是否緊接著上個(gè)section開始布局。
2 > 可以分別給每個(gè)section添加內(nèi)邊距
這兩個(gè)功能都是通過(guò)協(xié)議由代理決定的掩驱。且兩個(gè)功能存在同一段代碼中芒划，這里就一起講解兩個(gè)功能的實(shí)現(xiàn),先看代碼
NSInteger section = [self.collectionView numberOfSections];
for (NSInteger i = 0; i < section; i++) {
// 獲取sectionInset
if ([self.delegate respondsToSelector:@selector(sectionInsetForSection:)]) {
self.sectionInset = [self.delegate sectionInsetForSection:i];
}
// 給section添加頂部邊距
[self addSectionTopInsetWithSection:i];
// 計(jì)算當(dāng)前section的每個(gè)cell的frame
NSInteger row = [self.collectionView numberOfItemsInSection:i];
for (NSInteger j = 0; j < row; j++) {
NSIndexPath * indexPath = [NSIndexPath indexPathForItem:j inSection:i];
// 獲取對(duì)應(yīng)section中對(duì)應(yīng)的row的layoutAttribute，并存儲(chǔ)
UICollectionViewLayoutAttributes * attribute = [self layoutAttributesForItemAtIndexPath:indexPath];
[self.attributes addObject:attribute];
}
// 給section添加底部邊距
[self addSectionBottomInsetWithSection:i];
}
由于我們布局cell的時(shí)候是通過(guò)遍歷section欧穴，在遍歷section中的row進(jìn)行布局的民逼。所以在一個(gè)section開始的時(shí)候，給這個(gè)section添加一個(gè)內(nèi)邊距的top距離涮帘，這一步對(duì)應(yīng)[self addSectionTopInsetWithSection:i]方法拼苍；在一個(gè)section布局結(jié)束的時(shí)候，給這個(gè)section添加上內(nèi)邊距的bottom距離调缨，這一步對(duì)應(yīng)方法[self addSectionBottomInsetWithSection:i];
接下來(lái)我們看一看上面說(shuō)的兩個(gè)方法具體的實(shí)現(xiàn)：
/**
* 給section添加頂部邊距
*/
- (void)addSectionTopInsetWithSection:(NSInteger)section {
// 判斷每個(gè)section的開始是否緊跟上一個(gè)section
BOOL isContinueLayout;
if ([self.delegate respondsToSelector:@selector(isContinueLayoutForNextSection:)]) {
isContinueLayout = [self.delegate isContinueLayoutForNextSection:section];
}
if (!isContinueLayout) {
// 判斷最高的列
CGFloat longest = 0;
for (NSInteger i = 0; i < self.eachLineHight.count ; i++) {
CGFloat temp = [self.eachLineHight[i] floatValue];
if (temp > longest) {
longest = temp;
}
}
// 更改每列的高度為最高列的高度加上邊距疮鲫，以開始下一section
for (NSInteger i = 0; i < self.eachLineHight.count; i++) {
self.eachLineHight[i] = @(longest + self.sectionInset.top);
}
}
}
這里首先要通過(guò)代理方法isContinueLayoutForNextSection判斷是否當(dāng)前section要緊接著上一個(gè)section，如果要緊接著上一個(gè)section顯示弦叶，那么內(nèi)邊距的top就沒有用俊犯，如果不緊接著上一個(gè)section開始顯示，那么就更新記錄每列最大高度的數(shù)組中的每一個(gè)項(xiàng)為：當(dāng)前最大高度 + top距離伤哺。
第二個(gè)方法的實(shí)現(xiàn)：
/**
* 給section添加底部邊距
*/
- (void)addSectionBottomInsetWithSection:(NSInteger)section {
// 判斷每個(gè)section的開始是否緊跟上一個(gè)section
BOOL isContinueLayout;
if ([self.delegate respondsToSelector:@selector(isContinueLayoutForNextSection:)]) {
isContinueLayout = [self.delegate isContinueLayoutForNextSection:section];
}
if (!isContinueLayout) {
// 判斷最高的列
CGFloat longest = 0;
for (NSInteger i = 0; i < self.eachLineHight.count ; i++) {
CGFloat temp = [self.eachLineHight[i] floatValue];
if (temp > longest) {
longest = temp;
}
}
// 更改每列的高度為最高列的高度并加上下邊距燕侠，以開始下一section
for (NSInteger i = 0; i < self.numOfItemInLine; i++) {
self.eachLineHight[i] = @(longest + self.sectionInset.bottom);
}
}
}
這里的原理和上面的原理是一樣的，這里就不在解釋了立莉。
另外一點(diǎn)绢彤，為了保證最后一個(gè)section的bottom邊距有效。在collectionViewContentSize方法中返回的高度應(yīng)該加上內(nèi)邊距的bottom距離
/**
* 返回scrollView的contentSize
*/
- (CGSize)collectionViewContentSize {
// 判斷最高的一列
CGFloat longest = 0;
for (NSInteger i = 0; i < self.eachLineHight.count; i++) {
CGFloat temp = [self.eachLineHight[i] floatValue];
if (temp > longest) {
longest = temp;
}
}
return CGSizeMake(self.collectionView.frame.size.width, longest + self.sectionInset.bottom);
}
好了蜓耻，本博客的就到此結(jié)束茫舶，如果你發(fā)現(xiàn)有什么錯(cuò)誤的地方，請(qǐng)聯(lián)系QQ：352770454媒熊，感謝你的閱讀奇适。
