CollectionView瀑布流

简单的瀑布流实现。github地址

image

各种不规则的布局都可以利用UICollectionVIewLayout来实现，因此我们要自定义一个layout来继承系统的UICollectionViewLayout，所有工作都在这个类中进行。

思路：
1、从上往下，哪一列最短，就把下一个item放在哪一列，因此我们需要定义一个字典来记录每一列的最大y值

2、每一个item都有一个attributes，因此定义一个数组来保存每一个item的attributes

image

下面是具体步骤：
1.初始化需要用的总列数、列间距、行间距、距离collectionView的上下左右距离

//总列数
@property(nonatomic, assign) NSInteger columnCount;
//列间距
@property(nonatomic, assign) NSInteger columnSpacing;
//行间距
@property(nonatomic, assign) NSInteger rowSpacing;
//section到collectionView的边距
@property (nonatomic, assign) UIEdgeInsets sectionInset;
//保存每一列最大y值的数组
@property(nonatomic, strong) NSMutableDictionary * maxYDic;
//保存每一个item的attributes的数组
@property(nonatomic, strong) NSMutableArray * attributesArray;

需要重写的4个方法：

• (void)prepareLayout；
  系统准备在item进行布局前会调用这个方法，我们重写这个方法可以在方法里面预先设置好需要用到的变量属性等。

• (CGSize)collectionViewContentSize；
  由于collectionView将item的布局任务委托给了layout对象，那么滚动区域的大小对于它而言是不可知的。自定义布局必须在这个方法里面计算出显示内容的大小，包括supplementaryView和decorationView在内

• (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath；
  我们可以在这个方法中创建并且返回特别定制的布局属性

• (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect；
  核心方法。collectionView调用这个方法并将自身坐标中的矩形传过来，这个巨型代表着当前collectionView的可视范围，我们需要在这个方法中返回一个包括UICollectionViewLayoutAttributes对象的数组，这个布局属性对象决定了当前显示的item的大小、层次、可视属性在内的布局属性

- (void)prepareLayout 
{    
  [super prepareLayout];

    //初始化字典。有几列就有几个键值对 value为列的y值

    for (int i = 0; i < self.columnCount; i ++) {

        self.maxYDic[@(i)] = @(self.sectionInset.top);

    }
    //根据collectionView获取总共有多少个item
    NSInteger itemCount = [self.collectionView numberOfItemsInSection:0];

    [self.attributesArray removeAllObjects];
    //为每一个item创建一个attributes并存入数组
    for (int i = 0; i < itemCount; i ++) {
        UICollectionViewLayoutAttributes * attributes = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
        
        [self.attributesArray addObject:attributes];
    }
    
}

//遍历字典，找出最长的那一列
    [self.maxYDic enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop) {
        if ([self.maxYDic[maxIndex] floatValue] < [obj floatValue]) {
            maxIndex = key;
        }
    }];

//用来设置每个item的attributes
CGFloat itemWidth = (collectionViewWidth - self.sectionInset.left - self.sectionInset.right - (self.columnCount - 1) * self.columnSpacing) / self.columnCount;
    
    CGFloat itemHeight = 0;
//通过代理或者block将图片的宽度传出去，然后根据比例获得图片的高度
    if (self.itemHeightBlock){
        itemHeight = self.itemHeightBlock(itemWidth,indexPath);
    }else{
        if ([self.delegate respondsToSelector:@selector(waterfallLayout:itemHeightForWidth:atIndexPath:)]) {
            itemHeight = [self.delegate waterfallLayout:self itemHeightForWidth:itemWidth atIndexPath:indexPath];
        }
    }

CGFloat itemX = self.sectionInset.left + (self.columnSpacing + itemWidth) * minIndex.integerValue;
    
    //item的y值 = 最短列的最大y值+ 行间距
    CGFloat itemY = [self.maxYDic[minIndex] floatValue] + self.rowSpacing;

BUG：在重写UICollectionViewCell的时候，如果通过代码创建，然后在initWithFrame里面添加一个imageView，那么我怎么设置frame都有问题，但是通过xib创建则是没有问题的，如果有朋友知道希望告知。

具体实现方法还可以参考这篇文章