UIcollectionView实现不规则排列的算法
UIcollectionView实现不规则排列的算法,简单的来说就是实现cell尺寸的规律变化，让其在几种尺寸中变种，并实现其排序的一种算法。说的不如看的，下面这张图将告诉你什么UIcollectionView实现不规则排列的算法。
效果如下：
效果一：
两列效果
效果二：
三列效果
效果三：
四列效果
效果四：
内边距效果
效果五：
section与section之间无间距
本例已经上传github，如果需要看详细代码，请前往下载。
在看本例之前，确保你对UICollectionViewLayout有一定的基础。好了，下面开始正式的讲解
UICollectionView不规则算法的实现
我们知道UICollectionView和UITableView比较相似，但是UICollectionView的功能更加的强大，基本能实现任何的cell的布局。UICollectionView由四个核心的部分组成：UICollectionView、UICollectionDelegate、UICollectionViewDataSources、UICollectionViewLayout。给部分协同工作，以实现用户任意的布局样式。各部分的功能如下:
UICollectionView: 协调UICollectionViewDataSources与UICollectionViewLayout的工作，从UICollectionViewDataSources获取数据，向UICollectionViewLayout索取布局信息，将数据、布局信息交个UICollectionViewCell进行显示。
UICollectionViewDataSources： 向UICollectionView提供数据信息。
UICollectionViewLayout： 向UICollectionView提供布局信息。
UICollectionViewDelegate：告知用户感兴趣的时刻，例如cell被点击。
根据上面的描述，UICollectionView不规则排列算法的实现主要是通过UICollectionViewLayout类完成，因此我们的讲解主要是UICollectionViewLayout。
==另外，在间接之间，一个必须明白的前提是：cell的大小不是预先确定的，即不是有UICollectionView提供的，也不是从网络获取的，而是UICollectionViewLayout在布局的时候根据概率自动生成的。==
++算法详解++
1 > 我们将UICollectionView的视图分为固定的列数：三列，那么每列的宽度得以确定为width，在这之后，可以确定我们cell要显示的大小种类：width X width、2width X width、2width X 2width，每种尺寸大小的cell是通过概率随机生成的。
2 > 使用一个数组记录每列对应的最大的高度。
- (NSMutableArray *)eachLineHight {
if (_eachLineHight == nil) {
_eachLineHight = [NSMutableArray array];
for (int i = 0; i < self.numOfItemInLine; i++) {
[_eachLineHight addObject:@(0)];
}
}
return _eachLineHight;
}
在这个懒加载中，首先初始化了每列的最高高度为0；
3 > 当布局一个cell的时候：
第一步，通过上面的数组检测最短的一列。
// 判断最短的一类
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;
}
}
第二步，通过随机数生成高度，确定x，y值
X = index * width + self.sectionInset.left;
Y = shortest;
// 根据概率生成cell的高度
NSInteger num = arc4random_uniform(10);
if (self.twoMulTwoChange * 10 > num) {
H = width * 2;
} else {
H = width * 1;
}
这里需要说明的是，上面代码中sectionInset是代理（即UICollectionView）提供的内边距
第三步，通过第一步获得的最短一列，检测这一列的下一列和本列高度是否相等；如果相等，那个么通过概率确定当前布局的cell的宽度是为width 还是 2 X width，如果不相等，那么cell的宽度为直接为width。到此cell的宽度确定了。在确定了宽度后更新记录每列最大高度的数组。这步代码如下
// 是否可以显示宽高比为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;
// 更新列数组高度
self.eachLineHight[index] = @(shortest + H);
self.eachLineHight[index + 1] = @(shortest + H);
} else { // 不可以
W = width;
// 排除高度是宽度的两倍的cell，将其改为宽高相等的cell
if (H == 2 * width) {
H = width;
}
// 更新列数组高度
self.eachLineHight[index] = @(shortest + H);
}
需要解释的一下，上面if判断句中的条件：
(index + 1) < self.numOfItemInLine是确保当前列是否为最后一列，因为当当前列为最后一列的时候，就没有必要判断了，cell的宽度直接就等于width。
[self.eachLineHight[(index + 1)] integerValue] == [self.eachLineHight[index] integerValue]是判断当前列和下一列是否相等。在这里的一个重要点是，这里的integerValue是必须的，因为如果使用floatValue的话，概率实在是太低了，两个浮点数要相等是十分难的，你会看见显示的cell中没有一个是 2width X width 或 2width X 2width的。因此，此处必须使用整型。
flag < 10 * self.oneMulTwoChange是概率判断。
还有一点需要注意的是，由于我们不需要cell的size为 width X 2width 的cell，所以在上面的代码中一会看一这么一段代码：
// 排除高度是宽度的两倍的cell，将其改为宽高相等的cell
if (H == 2 * width) {
H = width;
}
另外，在上面的两个参数oneMulTwoChange、 twoMulTwoChange 是两个概率因子，一个决定显示width X 2width cell的概率，一个决定显示 2width X 2width的概率，这两个是通过代理有UICollectionView提供的。
这里UICollectionView不规则排列的算法就实现了。接下来说一说本demo中的一些相关功能的实现。
Demo中相关功能的实现
本例中相关的功能：
1 > 可以决定本section是否紧接着上个section开始布局。
2 > 可以分别给每个section添加内边距
这两个功能都是通过协议由代理决定的。且两个功能存在同一段代码中，这里就一起讲解两个功能的实现,先看代码
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];
// 计算当前section的每个cell的frame
NSInteger row = [self.collectionView numberOfItemsInSection:i];
for (NSInteger j = 0; j < row; j++) {
NSIndexPath * indexPath = [NSIndexPath indexPathForItem:j inSection:i];
// 获取对应section中对应的row的layoutAttribute，并存储
UICollectionViewLayoutAttributes * attribute = [self layoutAttributesForItemAtIndexPath:indexPath];
[self.attributes addObject:attribute];
}
// 给section添加底部边距
[self addSectionBottomInsetWithSection:i];
}
由于我们布局cell的时候是通过遍历section，在遍历section中的row进行布局的。所以在一个section开始的时候，给这个section添加一个内边距的top距离，这一步对应[self addSectionTopInsetWithSection:i]方法；在一个section布局结束的时候，给这个section添加上内边距的bottom距离，这一步对应方法[self addSectionBottomInsetWithSection:i];
接下来我们看一看上面说的两个方法具体的实现：
/**
* 给section添加顶部边距
*/
- (void)addSectionTopInsetWithSection:(NSInteger)section {
// 判断每个section的开始是否紧跟上一个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);
}
}
}
这里首先要通过代理方法isContinueLayoutForNextSection判断是否当前section要紧接着上一个section，如果要紧接着上一个section显示，那么内边距的top就没有用，如果不紧接着上一个section开始显示，那么就更新记录每列最大高度的数组中的每一个项为：当前最大高度 + top距离。
第二个方法的实现：
/**
* 给section添加底部边距
*/
- (void)addSectionBottomInsetWithSection:(NSInteger)section {
// 判断每个section的开始是否紧跟上一个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);
}
}
}
这里的原理和上面的原理是一样的，这里就不在解释了。
另外一点，为了保证最后一个section的bottom边距有效。在collectionViewContentSize方法中返回的高度应该加上内边距的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);
}
好了，本博客的就到此结束，如果你发现有什么错误的地方，请联系QQ：352770454，感谢你的阅读。
