瀑布流Demo

瀑布流截圖.gif

使用UICollectionView實現瀑布流

自定義UICollectionViewLayout中的主要代碼：

YJWaterFlowLayout.h中代碼:

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

@protocol YJWaterFlowLayoutDelegate <NSObject>
@required
-(CGFloat)waterFlowLayout:(YJWaterFlowLayout *)waterFlowLayout heightForItemAtIndexPath:(NSUInteger)index itemWidth:(CGFloat)itemWidth;

@optional
/** 列數*/
-(CGFloat)columnCountInWaterFlowLayout:(YJWaterFlowLayout *)waterFlowLayout;
/** 列間距*/
-(CGFloat)columnMarginInWaterFlowLayout:(YJWaterFlowLayout *)waterFlowLayout;
/** 行間距*/
-(CGFloat)rowMarginInWaterFlowLayout:(YJWaterFlowLayout *)waterFlowLayout;
/** 邊緣之間的間距*/
-(UIEdgeInsets)edgeInsetInWaterFlowLayout:(YJWaterFlowLayout *)waterFlowLayout;

@end

@interface YJWaterFlowLayout : UICollectionViewLayout

/** delegate*/
@property (nonatomic, weak) id<YJWaterFlowLayoutDelegate> delegate;

@end

YJWaterFlowLayout.m文件代碼：

#import "YJWaterFlowLayout.h"
/** 默認的列數*/
static const NSInteger YJDefaultColumeCount = 3;
/** 每一列之間的間距*/
static const NSInteger YJDefaultColumeMargin = 10;
/** 每一行之間的間距*/
static const CGFloat YJDefaultRowMargin = 10;
/** 邊緣之間的間距*/
static const UIEdgeInsets YJDefaultEdgeInset = {10, 10, 10, 10};

@interface YJWaterFlowLayout ()
/** 存放所有cell的布局屬性*/
@property (strong, nonatomic) NSMutableArray *attrsArray;
/** 存放每一列的最大y值*/
@property (nonatomic, strong) NSMutableArray *columnHeights;
/** 每一行之間的間距*/
-(CGFloat)rowMargin;
/** 每一列之間的間距*/
-(CGFloat)columnMargin;
/** 列數*/
-(NSInteger)columnCount;
/** 邊緣之間的間距*/
-(UIEdgeInsets)edgeInsets;

/** 內容的高度*/
@property (nonatomic, assign) CGFloat maxColumnHeight;

@end

@implementation YJWaterFlowLayout

#pragma mark 代理方法處理
-(CGFloat)rowMargin {
    if ([self.delegate respondsToSelector:@selector(rowMarginInWaterFlowLayout:)]) {
       return [self.delegate rowMarginInWaterFlowLayout:self];
    } else {
        return YJDefaultRowMargin;
    }
}

-(CGFloat)columnMargin {
    if ([self.delegate respondsToSelector:@selector(columnMarginInWaterFlowLayout:)]) {
        return [self.delegate columnMarginInWaterFlowLayout:self];
    } else {
        return YJDefaultColumeMargin;
    }
}

-(NSInteger)columnCount {
    if ([self.delegate respondsToSelector:@selector(columnCountInWaterFlowLayout:)]) {
        return [self.delegate columnCountInWaterFlowLayout:self];
    } else {
        return YJDefaultColumeCount;
    }
}

-(UIEdgeInsets)edgeInsets {
    if ([self.delegate respondsToSelector:@selector(edgeInsetInWaterFlowLayout:)]) {
        return [self.delegate edgeInsetInWaterFlowLayout:self];
    } else {
        return YJDefaultEdgeInset;
    }
}

#pragma mark - 懶加載
- (NSMutableArray *)columnHeights {
    if (!_columnHeights) {
        _columnHeights = [NSMutableArray array];
    }
    return _columnHeights;
}

-(NSMutableArray *)attrsArray {
    if (_attrsArray == nil) {
        _attrsArray = [NSMutableArray array];
    }
    return _attrsArray;
}

/** 初始化*/
-(void)prepareLayout {
    [super prepareLayout];
    
    //清除以前計算的所有高度
    self.maxColumnHeight = 0;
    [self.columnHeights removeAllObjects];
    for (NSInteger i = 0; i < self.columnCount; i++) {
        [self.columnHeights addObject:@(self.edgeInsets.top)];
    }
    
    //清除之前數組
    [self.attrsArray removeAllObjects];
    
    //開始創(chuàng)建每一個cell
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (NSInteger i = 0; i < count; i++) {
        //創(chuàng)建位置
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        //獲取indexPath位置cell對應的成員屬性
        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];
    //collectionView的寬度
    CGFloat collectionW = self.collectionView.frame.size.width;
    //設置布局屬性的frame
    CGFloat w = (collectionW - self.edgeInsets.left - self.edgeInsets.right - (self.columnCount - 1) * self.columnMargin) / self.columnCount;
    CGFloat h = [self.delegate waterFlowLayout:self heightForItemAtIndexPath:indexPath.item itemWidth:w];
    
    //找出高度最短的那一列
    NSInteger destColumn = 0;
    CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];
    for (NSInteger i = 1; i < self.columnCount; i++) {
        //取出第i列
        CGFloat columnHeight = [self.columnHeights[i] doubleValue];
        if (minColumnHeight > columnHeight) {
            minColumnHeight = columnHeight;
            destColumn = i;
        }
    }
    
    CGFloat x = self.edgeInsets.left + destColumn * (w + self.rowMargin);
    CGFloat y = minColumnHeight;
    if (y != self.edgeInsets.top) {
        if ([self.delegate respondsToSelector:@selector(rowMarginInWaterFlowLayout:)]) {
            y += [self.delegate rowMarginInWaterFlowLayout:self];
        } else {
            y += self.rowMargin;
        }
    }
    
    attrs.frame = CGRectMake(x, y, w, h);
    //更新最短那列的高度
    self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame));
    //記錄內容的高度
    CGFloat columnHeight = [self.columnHeights[destColumn] doubleValue];
    if (self.maxColumnHeight < columnHeight) {
        self.maxColumnHeight = columnHeight;
    }
    
    return attrs;
}


-(CGSize)collectionViewContentSize {
    return CGSizeMake(0, self.maxColumnHeight + self.edgeInsets.bottom);
}

@end

瀑布流Demo地址