WaterfallFlowLayout瀑布流用重写UICollectionViewFlowLayout类实现

最近调研瀑布流,在gitHub上下了个Demo发现它的所有视图都是用Main.storyboard拖的, 自己研究半天没研究明白;

然后就又找了一个Demo, 它的视图全是手打的, 但是实现的方法不太好,就将这俩Demo结合了一下:

用了gitHub的实现原理 和 另一个Demo的视图.

实现瀑布流最重要的一步就是重写UICollectionViewFlowLayout类, 下面就简单介绍一下实现原理

本方法实现的仅是高度不一样, 宽度是根据屏宽平均分的;

当创建UICollectionView的UICollectionViewFlowLayout属性时,给它传进去了两个属性: 列数, 和需要显示的Model数组 (这里是商品model(图片,价钱))

WaterfallFlowLayout.h

//  WaterfallFlowLayout.h
@interface WaterfallFlowLayout : UICollectionViewFlowLayout

// 总列数
@property (nonatomic, assign) NSInteger columnCount;

// 商品数据数组
@property (nonatomic, strong) NSArray *goodsArray;

@end

在.m文件里就根据这两个属性计算每个frame的大小, 用一个数组记录每列的高度, 每次计算frame时就将它放到最短列下面:

仅为计算item属性数组  和 itemSize, 然后在layoutAttributesForElementsInRect返回了该数组,就算是改变了每个item的frame了

<span style="font-family: Arial, Helvetica, sans-serif;">//  WaterfallFlowLayout.m</span>

#import "WaterfallFlowLayout.h"
#import "Good.h"

@interface WaterfallFlowLayout ()
// 所有item的属性的数组
@property (nonatomic, strong) NSArray *layoutAttributesArray;
@end

@implementation WaterfallFlowLayout

/**
 *  布局准备方法 当collectionView的布局发生变化时 会被调用
 *  通常是做布局的准备工作 itemSize.....
 *  UICollectionView 的 contentSize 是根据 itemSize 动态计算出来的
 */
- (void)prepareLayout {
    // 根据列数 计算item的宽度 宽度是一样的
    CGFloat contentWidth = self.collectionView.bounds.size.width - self.sectionInset.left - self.sectionInset.right; //减去分区的边框
    CGFloat marginX = self.minimumInteritemSpacing;  //最小左右间距
    CGFloat itemWidth = (contentWidth - marginX * (self.columnCount - 1)) / self.columnCount;
    
    // 计算布局属性
    [self computeAttributesWithItemWidth:itemWidth];
}

#pragma mark 根据itemWidth计算布局属性
- (void)computeAttributesWithItemWidth:(CGFloat)itemWidth {
    
    // 定义一个列高数组 记录每一列的总高度
    CGFloat columnHeight[self.columnCount];
    // 初始化
    for (int i = 0; i < self.columnCount; i++) {
        columnHeight[i] = self.sectionInset.top;
    }
    
    // 遍历 goodsList 数组计算相关的属性
    NSMutableArray *attributesArray = [NSMutableArray arrayWithCapacity:self.goodsArray.count];
    
    //因为item数是跟当前的商品数一样的 每次改变都动态计算一遍
    for (NSInteger i = 0; i < self.goodsArray.count; i++) {
        Good *good = self.goodsArray[i];
        // 建立布局属性
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        // 获得当前item的布局属性
        UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
        // 找出最短列号
        NSInteger column = [self shortestColumn:columnHeight];
        // X值
        CGFloat itemX = (itemWidth + self.minimumInteritemSpacing) * column + self.sectionInset.left;
        // Y值 = 当前列的总高度
        CGFloat itemY = columnHeight[column];
        // 等比例缩放 计算item的高度
        CGFloat itemH = good.h * itemWidth / good.w;
        // 设置frame
        attributes.frame = CGRectMake(itemX, itemY, itemWidth, itemH);
        [attributesArray addObject:attributes];
        
        //!!!!!!!!
        self.itemSize = CGSizeMake(itemWidth, itemH);

        // 累加当前列高
        columnHeight[column] += itemH + self.minimumLineSpacing;
        
    }
    // 给属性数组设置数值
    self.layoutAttributesArray = attributesArray.copy;
}

#pragma mark 找出columnHeight数组中最短列号 追加数据的时候追加在最短列中
- (NSInteger)shortestColumn:(CGFloat *)columnHeight {
    
    CGFloat min = CGFLOAT_MAX;
    NSInteger column = 0;
    // 循环列高数组
    for (int i = 0; i < self.columnCount; i++) {
        if (columnHeight[i] < min) {
            min = columnHeight[i];
            column = i;
        }
    }
    return column;
}

/**
 *  跟踪效果：当到达要显示的区域时 会计算所有显示item的属性
 *           一旦计算完成 所有的属性会被缓存 不会再次计算
 *  @return 返回布局属性(UICollectionViewLayoutAttributes)数组
 */
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    // 直接返回计算好的布局属性数组
    return self.layoutAttributesArray;
}

一下是Demo下载地址:

http://download.csdn.net/detail/margaret_mo/9417425