自定义UICollectinviewFlowLayout，即实现瀑布流

Posted 2020-06-13

如图所示，通过实现不规则的网格分布，来显示出不同的效果。因为集合视图必须要指定布局还可以显示，所以自定义布局就可以实现瀑布流的效果。

//创建布局对象
    WaterFlowLayout *flowLayout = [[WaterFlowLayout alloc] init];
    
    flowLayout.delegate = self;
    flowLayout.numberOfColumn = 3;
    
    //创建集合视图
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];

因为系统自带的布局有四个方法，分别实现了item大小，分区间隔，最小行间距，item之间的间隙大小

@protocol UICollectionViewDelegateFlowLayout <UICollectionViewDelegate>
@optional
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;

所以，自定义FlowLayout,并定义协议，以便定义这些方法。

@protocol WaterFlowLayoutDelegate <NSObject>

//关键方法，此方法的作用是返回每一个item的size大小
//数据中原始图片大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(WaterFlowLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
//分区间隔
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(WaterFlowLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
//得到 item之间的间隙大小
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(WaterFlowLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
//最小行间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(WaterFlowLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;

@end

@interface WaterFlowLayout : UICollectionViewLayout

//瀑布流一共多少列
@property (nonatomic, assign) NSUInteger numberOfColumn;

@property (nonatomic, assign) id<WaterFlowLayoutDelegate>delegate;

看图可知，最小高的的item，将作为下一列item的起点。

@interface WaterFlowLayout ()

//存放每一列的高度
@property (nonatomic, retain) NSMutableArray *columnHeightsArray;

//存放 每一个item的 属性 包含 frame以及下标
@property (nonatomic, retain) NSMutableArray *attributesArray;

@end

@implementation WaterFlowLayout

//获取最小高度的方法
- (CGFloat)minHeight
{
    CGFloat min = 100000;
    for (NSNumber *height in _columnHeightsArray) {
        CGFloat h = [height floatValue];
        if (min > h) {
            min = h;
        }
    }
    return min;
}

//获取最大值
- (CGFloat)maxHeight
{
    CGFloat max = 0;
    for (NSNumber *height in _columnHeightsArray) {
        CGFloat h = [height floatValue];
        if (max < h) {
            max = h;
        }
    }
    return max;
}

//找到最小高的下标
- (NSUInteger)indexOfMinHeight
{
    NSUInteger index = 0;
    for (int i = 0; i < [_columnHeightsArray count]; i ++) {
        CGFloat height = [_columnHeightsArray[i] floatValue];
        if (height == [self minHeight]) {
            index = i;
            return index;
        }
    }
    return index;
}

//重写父类的布局方法
- (void)prepareLayout
{
    [super prepareLayout];
    
    _attributesArray = [[NSMutableArray alloc] init];
    
    _columnHeightsArray = [[NSMutableArray alloc] initWithCapacity:self.numberOfColumn];
    
    //给列高数组里面的对象赋初值
    for (int i = 0; i < self.numberOfColumn; i ++) {
        [_columnHeightsArray addObject:@0.0];
    }
    
    CGFloat totalWidth = self.collectionView.frame.size.width;
    
    //创建 每个item frame中的x、y
    CGFloat x = 0;
    CGFloat y = 0;
    
    NSUInteger itemCount = [self.collectionView numberOfItemsInSection:0];
    
    for (int i = 0; i < itemCount; i ++) {
        //得到集合视图中 列间隙的个数
        NSUInteger numberOfSpace = self.numberOfColumn - 1;
        
        //代理对象执行代理方法，得到 item之间的间隙大小
        CGFloat spaceWidth = [_delegate collectionView:self.collectionView layout:self minimumInteritemSpacingForSectionAtIndex:0];
        
        //求每列的宽度，也就是每个item的width
        CGFloat width = (totalWidth - spaceWidth * numberOfSpace) / self.numberOfColumn;
        
        
        //获取每一个itemSize的大小
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        
        //数据中原始图片大小
        CGSize imageSize = [_delegate collectionView:self.collectionView layout:self sizeForItemAtIndexPath:indexPath];
    
        //通过 约分公式得到固定宽之后的高度是多少
        CGFloat height = width * imageSize.height / imageSize.width;
        
        
        UICollectionViewLayoutAttributes *attribute = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
        
        //记录每一个item的大小和位置
        attribute.frame = CGRectMake(x, y, width, height);
        
        //数组保存每个item的位置信息
        [_attributesArray addObject:attribute];
        
        NSLog(@"item = %d",i);
        NSLog(@"x = %.2f y = %.2f width = %.2f height = %.2f",x,y,width,height);
        
        //求列高最小的那一列的下标
        NSUInteger minHeightIndex = [self indexOfMinHeight];
        
        //求出最小列的高度
        CGFloat minHeight = [_columnHeightsArray[minHeightIndex] floatValue];
        
        //求出行高
        CGFloat lineHeight = [_delegate collectionView:self.collectionView layout:self minimumLineSpacingForSectionAtIndex:0];
        
        //上一次总的列高 加上 行高 加上新加上的item的height，才是现在这一列的总高度
        //minHeight为最小列现在的高度
        //lineHeight为行间距
        //height为新加的item的高
        _columnHeightsArray[minHeightIndex] = [NSNumber numberWithFloat:minHeight + lineHeight + height];
        
        //重新算最小列高的下标
        minHeightIndex = [self indexOfMinHeight];
        
        //算下一次新加的item的x和y值
        x = (spaceWidth + width) * minHeightIndex;
        
        y = [self minHeight];
    }
}

//重写这个方法，可以返回集合视图的总高度
- (CGSize)collectionViewContentSize
{
    return CGSizeMake(self.collectionView.frame.size.width, [self maxHeight]);
}


- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    return _attributesArray;
}

注意，最后一个方法的实现，即- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect，如果这个方法不写，集合视图是显示不出来的，这个方法是次保存的每个item的信息重新告诉集合视图，进行显示。