UICollectionView: 只有一个分区的瀑布流效果

效果图如下

效果图.gif

具体代码

• 继承自UICollectionViewLayout
• LTWaterflowLayout.h文件

#import <UIKit/UIKit.h>
@class LTWaterflowLayout;

@protocol LTWaterflowLayoutDelegate <NSObject>
@required
// 指定位置item的高度
- (CGFloat)waterflowLayout:(LTWaterflowLayout *)waterflowLayout heightForItemAtIndexPath:(NSIndexPath *)indexPath width:(CGFloat)width;
@optional
// 内边距
- (UIEdgeInsets)insetInWaterflowLayout:(LTWaterflowLayout *)waterflowLayout;
// 行间距
- (CGFloat)lineSpacingInWaterflowLayout:(LTWaterflowLayout *)waterflowLayout;
// 纵间距
- (CGFloat)interitemSpacingInWaterflowLayout:(LTWaterflowLayout *)waterflowLayout;
// 列数
- (NSInteger)columnCountInWaterflowLayout:(LTWaterflowLayout *)waterflowLayout;
@end

@interface LTWaterflowLayout : UICollectionViewLayout
// 代理
@property (nonatomic, weak) id<LTWaterflowLayoutDelegate> delegate;
@end

• LTWaterflowLayout.m文件

#import "LTWaterflowLayout.h"

@interface LTWaterflowLayout ()

// 列数
@property (nonatomic, assign) NSInteger columnCount;
// 内边距
@property (nonatomic) UIEdgeInsets sectionInset;
// 行间距
@property (nonatomic) CGFloat lineSpacing;
// 纵间距
@property (nonatomic) CGFloat interitemSpacing;
// 属性数组
@property (nonatomic, strong) NSMutableArray *attrsArray;
// 存放每一列高度的数组
@property (nonatomic, strong) NSMutableArray <NSNumber *> *minHeights;
// 内容最大高度
@property (nonatomic, assign) CGFloat contentHeight;

@end

@implementation LTWaterflowLayout

#pragma mark - <代理返回的基本数据>

// 列数
- (NSInteger)columnCount
{
    if ([self.delegate respondsToSelector:@selector(columnCountInWaterflowLayout:)]) {
        return [self.delegate columnCountInWaterflowLayout:self];
    }
    return _columnCount;
}

// 内边距
- (UIEdgeInsets)sectionInset
{
    if ([self.delegate respondsToSelector:@selector(insetInWaterflowLayout:)]) {
        return [self.delegate insetInWaterflowLayout:self];
    }
    return _sectionInset;
}

// 行间距
- (CGFloat)lineSpacing
{
    if ([self.delegate respondsToSelector:@selector(lineSpacingInWaterflowLayout:)]) {
        return [self.delegate lineSpacingInWaterflowLayout:self];
    }
    return _lineSpacing;
}

// 列间距
- (CGFloat)interitemSpacing
{
    if ([self.delegate respondsToSelector:@selector(interitemSpacingInWaterflowLayout:)]) {
        return [self.delegate interitemSpacingInWaterflowLayout:self];
    }
    return _interitemSpacing;
}

#pragma mark - <基础设置>

// 初始化方法中设置基础数据
- (instancetype)init
{
    self = [super init];
    if (self) {
        self.columnCount = 2;
        self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
        self.lineSpacing = 10;
        self.interitemSpacing = 10;
    }
    return self;
}

// 记录属性的数组
- (NSMutableArray *)attrsArray
{
    if (!_attrsArray) {
        self.attrsArray = [[NSMutableArray alloc] init];
    }
    return _attrsArray;
}

// 记录每列高度的数组
- (NSMutableArray <NSNumber *> *)minHeights
{
    if (!_minHeights) {
        self.minHeights = [[NSMutableArray alloc] init];
        for (int i = 0; i < self.columnCount; i++) {
            self.minHeights[i] = @(self.sectionInset.top);
        }
    }
    return _minHeights;
}

// 初始化
- (void)prepareLayout
{
    [super prepareLayout];
    //每次刷新都会走这里, 清空数据
    self.contentHeight = 0;
    self.minHeights = nil;
    [self.attrsArray removeAllObjects];
    
    NSInteger rows = [self.collectionView numberOfItemsInSection:0];
    for (int i = 0; i < rows; i++) {
        NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
        [self.attrsArray addObject:attrs];
    }
}

// 决定cell的排布
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    return self.attrsArray;
}

// 返回indexPath位置cell对应的布局属性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    // 计算每一个cell对应的宽度
    CGFloat width = (self.collectionView.frame.size.width - self.sectionInset.left - self.sectionInset.right - (self.columnCount - 1) * self.interitemSpacing) / self.columnCount;
    // 获取每一个cell对应的高度
    CGFloat height = [self.delegate waterflowLayout:self heightForItemAtIndexPath:indexPath width:width];
    // 默认第一列的高度最小
    CGFloat minH = self.minHeights[0].doubleValue;
    NSInteger minIndex = 0;
    // 找到最小高度, 以及对应的列数
    for (int i = 1; i < self.minHeights.count; i++) {
        if (minH > self.minHeights[i].doubleValue) {
            minH = self.minHeights[i].doubleValue;
            minIndex = i;
        }
    }
    // 计算出cell对应的frame
    CGFloat x = self.sectionInset.left + (self.interitemSpacing + width) * minIndex;
    CGFloat y = 0;
    if (indexPath.row < self.columnCount) {
        y = minH;
    }else {
        y = minH + self.lineSpacing;
    }
    attrs.frame = CGRectMake(x, y, width, height);
    // 记录该列更新后的高度
    self.minHeights[minIndex] = @(CGRectGetMaxY(attrs.frame));
    // 记录当前最高列的高度
    if (CGRectGetMaxY(attrs.frame) > self.contentHeight) {
        self.contentHeight = CGRectGetMaxY(attrs.frame);
    }
    return attrs;
}

// collectionView的内容大小
- (CGSize)collectionViewContentSize
{
    return CGSizeMake(0, self.contentHeight + self.sectionInset.bottom);
}

@end