瀑布流.png

瀑布流布局是現(xiàn)在很常用的布局方式，用collectionView實現(xiàn)。要設計它關鍵就是知道cell的位置，具體在那一列上，而且是最短的那列，然后在其下面增加。

它的寬度，用collectionView減兩邊的間隙和中間的間隙，然后除以列數(shù)
高度 一般由外界確定
x值 先找到最短的那一列，左間距加上當前列數(shù)乘以寬度加間隙
y值 最短列的高度加行間距

布局我們是基于UICollectionViewLayout類
要注意這四個方法

/** 初始化 */
- (void)prepareLayout {
}

/** 決定cell的排布, 這個方法會頻繁調(diào)用  */
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
    return self.attrsArray;
}

/** 返回indexPath位置cell對應的布局 */
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
}

 /** 滾動范圍 */
- (CGSize)collectionViewContentSize {
}

先定義些有用的變量

/** 默認的列數(shù) */
static const NSInteger LXYDefaultColumnCount = 3;

/** 每一列之間的間距 */
static const CGFloat LXYDefaultColumnMargin = 10;

/** 每一行之間的間距 */
static const CGFloat LXYDefaultRowMargin = 10;

/** 邊緣間距, 這是一個知識點，之間賦值給UIEdgeInsets的值 */
static const UIEdgeInsets LXYDefaultEdgeInsets = {10, 10, 10, 10};

@interface LXYWaterFlowLayout ()

/** 存放所有cell的布局屬性 */
@property (nonatomic, strong) NSMutableArray *attrsArray;

/** 存放所有列的當前高度 */
@property (nonatomic, strong) NSMutableArray *columnHeights;

其他代碼

/** 初始化 */
- (void)prepareLayout {
    [super prepareLayout];
    
    // 先清除之前計算的所有高度
    [self.columnHeights removeAllObjects];
    for (NSInteger i = 0; i < LXYDefaultColumnCount; i++) {
        // 默認為頂部高度
        [self.columnHeights addObject:@(LXYDefaultEdgeInsets.top)];
    }
    
    // 清除之前所有的布局屬性, 因為刷新一次會調(diào)用這個方法
    [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位置對應的布局屬性
        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
        
        [self.attrsArray addObject:attrs];
        
    }
        
}

/** 決定cell的排布, 這個方法會頻繁調(diào)用  */
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
    return self.attrsArray;
}

/** 返回indexPath位置cell對應的布局 */
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    // 創(chuàng)建布局屬性
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    
    // collectionView的寬度
    CGFloat collectionViewW = self.collectionView.frame.size.width;
    
    // 設置布局屬性的frame
   
    CGFloat w = (collectionViewW - LXYDefaultEdgeInsets.left - LXYDefaultEdgeInsets.right - (LXYDefaultColumnCount - 1) * LXYDefaultColumnMargin) / LXYDefaultColumnCount;
    
    CGFloat h = 130 + arc4random_uniform(150);
    
    // 找出高度最短的那一列
    NSInteger destColumn = 0;
    CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];
    for (NSInteger i = 1; i < LXYDefaultColumnCount; i++) {
        // 獲取第i列的高度
        CGFloat columnHeight = [self.columnHeights[i] doubleValue];
        if (minColumnHeight > columnHeight) {
            minColumnHeight = columnHeight;
            destColumn = i;
        }
    }
    
    CGFloat x = LXYDefaultEdgeInsets.left + destColumn * (w + LXYDefaultColumnMargin);
    
    CGFloat y = minColumnHeight + LXYDefaultRowMargin;
    
    attrs.frame = CGRectMake(x, y, w, h);
    
    // 更新最短那列的高度
    self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame));
    
    return attrs;
}

/** 滾動范圍 */
- (CGSize)collectionViewContentSize {
    // 找出高度最長的那一列
    CGFloat maxColumnHeight = [self.columnHeights[0] doubleValue];
    for (NSInteger i = 1; i < LXYDefaultColumnCount; i++) {
        // 獲取第i列的高度
        CGFloat columnHeight = [self.columnHeights[i] doubleValue];
        if (maxColumnHeight < columnHeight) {
            maxColumnHeight = columnHeight;
        }
    }

使用瀑布流

// 創(chuàng)建布局
    LXYWaterFlowLayout *layout = [[LXYWaterFlowLayout alloc] init];
    
    // 創(chuàng)建collectionView
    CGFloat collectionW = self.view.frame.size.width;
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
    
    collectionView.dataSource = self;
    collectionView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:collectionView];
    
    // 注冊
    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:LXYShopId];

實現(xiàn)數(shù)據(jù)源方法

#pragma mark - UICollectionViewDataSource

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    
    return 50;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:LXYShopId forIndexPath:indexPath];
    
    cell.backgroundColor = [UIColor orangeColor];
    
    NSInteger tag = 10;
    UILabel *label = (UILabel *)[cell.contentView viewWithTag:tag];
    if (label == nil) {
        label = [[UILabel alloc] init];
        label.tag = tag;
        [cell.contentView addSubview:label];
    }
    
    label.text = [NSString stringWithFormat:@"%zd", indexPath.item];
    [label sizeToFit];
    
    return cell;
}

效果請看https://github.com/liangxingyan/layout-.git