UIcollectionView实现不规则排列的算法

UIcollectionView实现不规则排列的算法,简单的来说就是实现cell尺寸的规律变化，让其在几种尺寸中变种，并实现其排序的一种算法。说的不如看的，下面这张图将告诉你什么UIcollectionView实现不规则排列的算法。
效果如下：

效果一：
两列效果

Simulator Screen Shot 2016年5月19日 20.02.20.png

效果二：
三列效果

Simulator Screen Shot 2016年5月19日 14.56.21.png

效果三：
四列效果

Simulator Screen Shot 2016年5月19日 19.53.07.png

效果四：
内边距效果

效果五：
section与section之间无间距

Simulator Screen Shot 2016年5月19日 19.59.22.png

本例已经上传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，感谢你的阅读。