最终效果

不定列数瀑布流

介绍

瀑布流的自定义的一般流程请参考另外一篇文章，比较详细，我也不继续解释。ios - 用UICollectionView实现瀑布流详解

网上能搜索到的瀑布流一般都是相同列数的文章，而因项目需求，需要在同一个collectionView 能实现不同列数的瀑布流。譬如：一个collectionView可以同时存在 1、2、3.……列的瀑布流。

分析

为了方便控制，不同列数的cell用section来区分，而同一个section的cell的布局就可以跟固定列数的瀑布流一样。

然后下面来了解一下，哪些内容是在计算cell的位置必须要知道的，方便作为属性或者是delegate的方式公开出去。(备注：自定义flowlayout发现了一件奇怪的事情：如果设置了collectionView.contentInset, viewController竟然会不调用dataSource的cellForItemAtIndexPath方法，导致collectionView一片空白，至今没有找到原因。)

必要项

• numberOfSections: section的个数
• numberOfColumnInSection: 每个section的列数
• size: 每个cell的大小size，如果全部cell宽度相等的话，可以考虑只是获取高度。

可选项

• contentInset: 为了解决上面说的情况，自己添加了一个属性来替代collectionView.contentInset。（可以在创建对象时直接设置）
• lineSpacing: 每一行的间距
• itemSpace: 每一列的间距
• sectionInset: 代替collectionView 的sectionInset。

除了contentInset之外，其他属性对于不同section不一定相同，所以使用协议的方式比较好。

实现

.h 文件

根据上面的分析，可以定义layout相关的协议，只有实现该协议的，才能得到瀑布流布局。

#import <UIKit/UIKit.h>

@protocol WatchFlowLayoutDelegate <NSObject>

@optional

// 行间距
- (CGFloat)minimumLineSpacingForSectionAtIndex:(NSInteger)section;  
// 列间距
- (CGFloat)minimumInteritemSpacingForSectionAtIndex:(NSInteger)section; 
// sectionInset
- (UIEdgeInsets)contentInsetOfSectionAtIndex:(NSInteger)section;        

@required

// section的数量
- (NSInteger)numberOfSection;  
// cell的大小
- (CGSize)sizeForItemAtIndexPath:(NSIndexPath *)indexPath;  
 // section的列数
- (NSInteger)numberOfColumnInSectionAtIndex:(NSInteger)section;

@end

@interface WatchFlowLayout : UICollectionViewLayout

@property (nonatomic, weak) id<WatchFlowLayoutDelegate> flowDelegate;

// 代替collectionView.contentInset
@property (nonatomic, assign) UIEdgeInsets contentInset;    

@end

.m 文件

为了保存信息，设置了下面的几个属性。

• maxYOfColumns: 保存section每一列的最大的Y值，然后获取到最短的一列，将下一个cell放在该列中。
• layoutAttributes: 保存所有cell的frame等信息，决定cell的布局。
• contentHeight：保存collectionView的bouns的高度，决定collectionView竖向滑动的长度。

#import "WatchFlowLayout.h"

@interface WatchFlowLayout()

// 保存section每一列的最大的Y值，然后获取到最短的一列，将下一个cell放在该列中。
@property (nonatomic, strong) NSMutableArray *maxYOfColumns;    
// 保存所有cell的位置信息
@property (nonatomic, strong) NSMutableArray *layoutAttributes; 
// 保存collectionView的bouns的高度。
@property (nonatomic, assign) CGFloat contentHeight;            

@end

prepareLayout方法中计算出所有cell的位置。

@implementation WatchFlowLayout

- (void)prepareLayout {
[super prepareLayout];

// 没有代理，没法布局。
if (_flowDelegate == nil) {
    NSLog(@"需要代理");
    
    return;
}

// 重新赋值，清除上一次计算的数据。
_contentHeight = self.contentInset.top;
_layoutAttributes = [NSMutableArray new];

// 使用delegate获取section的数量
NSInteger numberOfSection = [_flowDelegate numberOfSection];

for (int section = 0; section < numberOfSection; section++) {
    NSMutableArray *sectionLayoutAttributes = [self computeLayoutAttributesInSection:section];
    [_layoutAttributes addObjectsFromArray:sectionLayoutAttributes];
}
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
// 返回每个cell的位置信息等
NSInteger section = indexPath.section;
NSArray *sectionLayoutAttributes = _layoutAttributes[section];

return sectionLayoutAttributes[indexPath.row];
}

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
return _layoutAttributes;
}

- (CGSize)collectionViewContentSize {
// 返回collectionView滑动的大小，因为横向没有滑动，X值不重要，也可以返回0
return CGSizeMake(0.0, _contentHeight + self.contentInset.bottom);
}

自定义的方法来计算每个section所有cell的frame

/**
 计算每个section的位置信息

 @param section section
 @return 与位置相关的信息。
 */
- (NSMutableArray *)computeLayoutAttributesInSection:(NSInteger)section {
// 获取section的列数和cell的个数
NSInteger column = [_flowDelegate numberOfColumnInSectionAtIndex:section];
NSInteger itemCount = [self.collectionView numberOfItemsInSection:section];

NSMutableArray *attributesArr = [NSMutableArray new];
CGFloat itemSpace = 0.0;
CGFloat lineSpace = 0.0;
UIEdgeInsets sectionInset;

// 获取间距等信息，下面计算位置时需要用到
// 因为是可选的实现方法，在直接使用时需要判断是否已经实现了。
if ([_flowDelegate respondsToSelector:@selector(contentInsetOfSectionAtIndex:)]) {
    sectionInset = [_flowDelegate contentInsetOfSectionAtIndex:section];
}

if ([_flowDelegate respondsToSelector:@selector(minimumLineSpacingForSectionAtIndex:)]) {
    itemSpace = [_flowDelegate minimumInteritemSpacingForSectionAtIndex:section];
}

if ([_flowDelegate respondsToSelector:@selector(minimumLineSpacingForSectionAtIndex:)]) {
    lineSpace = [_flowDelegate minimumLineSpacingForSectionAtIndex:section];
}

// 留出每个section的顶部与上一个section的距离
_contentHeight += sectionInset.top;

if (column == 1) {
    // 一列，cell会占满屏幕
    for (int index = 0; index < itemCount; index++) {
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:index inSection:section];
        UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath: indexPath];
        
        // 获取cell的大小
        CGSize size = [_flowDelegate sizeForItemAtIndexPath:indexPath];
        
        // 为了让collectionView.contentInset和sectionInset有效果，需要将width减去这个两个inset的左右的数值
        attributes.frame = CGRectMake(self.contentInset.left + sectionInset.left, _contentHeight, size.width - self.contentInset.left - self.contentInset.right - sectionInset.left - sectionInset.right, size.height);
        
        [attributesArr addObject:attributes];
        
        // 保存下一个cell的Y轴的数值
        _contentHeight += attributes.size.height + lineSpace;
    }
    
    // 减去最后一行底部添加的lineSpace
    _contentHeight += (sectionInset.bottom - lineSpace);
    
    return attributesArr;
}

// 不止一列时
// 保存每一个最后一个Cell的底部Y轴的数值
_maxYOfColumns = [NSMutableArray new];

for (int i = 0; i < column; i++) {
    self.maxYOfColumns[i] = @(0);
}

CGSize size;
CGFloat x = 0.0;
CGFloat y = 0.0;
NSInteger currentColumn = 0;
CGFloat width = 0.0;

for (int index = 0; index < itemCount; index++) {
    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:index inSection:section];
    size = [_flowDelegate sizeForItemAtIndexPath:indexPath];
    
    if (index < column) {
        // 第一行直接添加到当前的列
        currentColumn = index;
        
    } else {// 其他行添加到最短的那一列
        // 这里使用!会得到期望的值
        NSNumber *minMaxY = [_maxYOfColumns valueForKeyPath:@"@min.self"];
        currentColumn = [_maxYOfColumns indexOfObject:minMaxY];
    }
    
    // 根据列数计算出每个cell的宽度
    width = (self.collectionView.bounds.size.width - itemSpace * (column - 1) - self.contentInset.left - self.contentInset.right - sectionInset.left - sectionInset.right) / column;
    
    // 根据将cell放在那一列，来计算出x坐标
    x = self.contentInset.left + sectionInset.left + currentColumn * (width + itemSpace);
    // 每个cell的y坐标
    y = lineSpace + [_maxYOfColumns[currentColumn] floatValue];
    
    // 记录每一列的最后一个cell的最大Y
    _maxYOfColumns[currentColumn] = @(y + size.height);

    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath: indexPath];
    
    // 设置用于瀑布流效果的attributes的frame
    attributes.frame = CGRectMake(x, y + _contentHeight, width, size.height);
    
    [attributesArr addObject:attributes];
}

// 将所有列最大的Y值作为整个collectionView.cententSize的高度
CGFloat maxY = [[_maxYOfColumns valueForKeyPath:@"@max.self"] floatValue];
_contentHeight += maxY + sectionInset.bottom;

return attributesArr;
}

@end

使用方法 （示例在ViewController）

@interface ViewController () <UICollectionViewDelegate, UICollectionViewDataSource, WatchFlowLayoutDelegate>
@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];

// 创建layout对象，并设置delegate和 collectionView.contentInset
WatchFlowLayout *layout = [WatchFlowLayout new];
layout.flowDelegate = self;
layout.contentInset = UIEdgeInsetsMake(20, 10, 40, 10);

_collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 100, self.view.bounds.size.width, self.view.bounds.size.height - 100)
                                     collectionViewLayout:layout];
}

实现layout的协议——WatchFlowLayoutDelegate

#pragma mark - WatchFlowLayoutDelegate

- (NSInteger)numberOfSection {
return [self numberOfSectionsInCollectionView:_collectionView];
}

- (NSInteger)numberOfColumnInSectionAtIndex:(NSInteger)section {
if (section == 1) {
    return 2;
}
else if (section == 3) {
    return 3;
}

return 1;
}

- (CGSize)sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
if (indexPath.section == 1 || indexPath.section == 3) {
    // [40,160)随机数
    CGFloat height = 40 + arc4random() % (160 - 40 + 1);
    
    return CGSizeMake(0, height);
}

return CGSizeMake(_collectionView.bounds.size.width, 100);
}

- (CGFloat)minimumLineSpacingForSectionAtIndex:(NSInteger)section {
if (section == 1 || section == 3) {
    return 10;
}

return 4.0;
}

- (CGFloat)minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
if (section == 1 || section == 3) {
    return 10;
}

return 0.0;
}

- (UIEdgeInsets)contentInsetOfSectionAtIndex:(NSInteger)section {
if (section == 1 || section == 3) {
    return UIEdgeInsetsMake(0, 0, 10, 0);
}

return UIEdgeInsetsZero;
}

疑问

重点标注一下我发现的一个问题，如果简友们知道是什么原因，请评论一下或者私信我，谢谢！
问题：自定义flowlayout发现了一件奇怪的事情：如果设置了collectionView.contentInset, viewController竟然会不调用dataSource的cellForItemAtIndexPath方法，导致collectionView一片空白，至今没有找到原因。

扩展

简友可以试一下，如果多行多列没什么规律，就是每一行和每一列的宽或者高都不一致的时候，如何自定义瀑布流。
毕竟，这篇文章中每个section的宽度还是相等的。

demo 地址

demo百度云链接