从零开始UICollectionView(3)--瀑布流

前言

对于许多的项目来说，瀑布流是极其重要的一个UI效果。在这里不深究瀑布流的出现历史，只追求它的实现。我尽可能讲得详细。
其实如果深入的去探索UICollectionView就会发现，它只不过是一个基于UIScrollView的加入重用机制的高度细致的封装控件，所有关于UICollectionView布局的奥秘，都在UICollectionViewLayout的里面。
鉴于这是一个抽象类不能直接使用，通常我们会创建和使用它的子类。

原理：所有的瀑布流都应该基于已知的宽高比例，通过固定的宽（高）来计算另外一个高（宽）。

---

1.开撸之 UICollectionViewLayout。

1.1 我们首先要写一个继承自UICollectionViewLayout的子类，本Demo中为@interface BJWaterfullLayout : UICollectionViewLayout。

由于我们是纵向瀑布流，宽度是固定的，根据宽高比动态生成高度。

所以我们需要写一个代理方法来暴露我们在.m中算好的宽度，来向外界索取数据中的宽高比来生成动态的高度，由于这一步是不可省略的，我们将唯一的这个方法声明为@required：

@protocol BJWaterfullLayoutDelegate <NSObject>

@required;
-(CGFloat)BJWaterfullLayout:(BJWaterfullLayout *)layout index:(NSInteger)index weight:(CGFloat)weight;

@end

1.2 仔细想想，纵向瀑布流我们需要知道有多少列、列之间的间距、上下行之间的间距、整个section（也就是一个组的所有Cell共同撑起的内容）的内边距也就是UIEdgeInsets。

最后我们还得有两个数组，一个数组用来记录每个列的高度，以便于我们寻找最短高度去拼接Item，另一个用来装载所有的Item的UICollectionViewLayoutAttributes对象。

UICollectionViewLayoutAttributes ： 装载了每一个对应IndexPath的Item的布局信息。

于是从上面我们得到了所有需要提前准备的东西:

@interface BJWaterfullLayout ()

@property (nonatomic , assign) NSInteger columnCount;//列数量
@property (nonatomic , assign) NSInteger columnSpace;//列间距
@property (nonatomic , assign) NSInteger rowSpace;//行间距
@property (nonatomic , assign) UIEdgeInsets sectionInsets;//section内容内边距
@property (nonatomic , strong) NSMutableArray * columnYArray;//列长度数组
@property (nonatomic , strong) NSMutableArray * attributesArray;//布局属性数组

@end

下面是我们必须要重写的几个UICollectionViewLayout的方法，没有它们，我们无法完成整个布局。

//预备布局信息调用。
-(void)prepareLayout; 
//生成详细布局信息调用。
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
//返回attributesArray的数组，布局方法。
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;
//返回整个UICollectionView的可滑动范围。
-(CGSize)collectionViewContentSize;

1.3 详细代码（columnYArray、attributesArray通过懒加载方式初始化过了、就不贴代码了）：

//在这个方法中，我们写入了所有预备的参数的值，清空了所有的数组数据，重新写入。
-(void)prepareLayout
{
    [super prepareLayout];

    self.columnCount = 3;
    self.columnSpace = 10;
    self.rowSpace = 10;
    self.sectionInsets = UIEdgeInsetsMake(5, 5, 5, 5);

    [self.columnYArray removeAllObjects];
    for (NSInteger index = 0; index < self.columnCount; index++) {
        [self.columnYArray addObject:@(self.sectionInsets.top)];
    }
    //我们假定数据源只有一组。
    //当然也可以有多组，这样的话我们只要用嵌套循环就可以遍历所有的Item了。
    [self.attributesArray removeAllObjects];
    for (NSInteger index = 0; index<[self.collectionView numberOfItemsInSection:0]; index++) {
    
        UICollectionViewLayoutAttributes * attributes = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0]];
    
        [self.attributesArray addObject:attributes];
    }

}

下面是布局layoutAttributesForElementsInRect:和collectionViewContentSize方法：

//返回布局详细信息数组，数组中包含的全都是我们为对应IndexPath的Item生成的布局属性对象。
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    return self.attributesArray;
}

//找出所有列中最长的一列，并加上section的下边距即为内容的最长Y轴可滑动距离，X轴我们不滑动设置为0。
-(CGSize)collectionViewContentSize
{
    CGFloat maxContent = [self.columnYArray[0] floatValue];

    for (NSInteger index = 0; index < self.columnYArray.count; index++) {
        CGFloat theContentY = [self.columnYArray[index] floatValue];
        if (theContentY > maxContent) {
            maxContent = theContentY;
        }
    }

    return CGSizeMake(0, maxContent + self.sectionInsets.bottom);
}

下面是重头戏layoutAttributesForItemAtIndexPath:方法：

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //创建 UICollectionViewLayoutAttributes 对象，这里面包含了对应 Item 的具体布置细节。
    UICollectionViewLayoutAttributes * attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    
    //获取跟本Layout绑定的UICollectionView的宽度，这是个固定值。
    CGFloat weight = self.collectionView.frame.size.width;
    //每个 Item 的宽度等于总宽度-左边距-右边距-所有的列间距，再除以列数。
    CGFloat w = (weight - self.sectionInsets.left - self.sectionInsets.right - (self.columnCount-1)*self.columnSpace)/self.columnCount;
    //这里我们通过代理，将 Item 的序号和宽度暴露出去，来获取动态的高度，这里我们的代理方法是要求必须实现的。
    CGFloat h = [self.delegate BJWaterfullLayout:self index:indexPath.item weight:w];
    
    //找出列高度数组中最短的那个及其序号。
    NSInteger minIndex = 0;
    CGFloat minContent = [self.columnYArray[0] floatValue];
    for (NSInteger index = 0; index < self.columnYArray.count; index++) {
        CGFloat theContentY = [self.columnYArray[index] floatValue];
        if (theContentY < minContent) {
            minIndex = index;
            minContent = theContentY;
        }
    }    
    
    //x坐标就等于section的左边距+（Item的宽度+列间距）* 最短列序号。
    CGFloat x = self.sectionInsets.left + (w+self.columnSpace)*minIndex;
    //y坐标就是最短的那列的高度+上下行间距。
    CGFloat y = minContent + self.rowSpace;
    //然后设置 UICollectionViewLayoutAttributes 对象的frame坐标。
    attributes.frame = CGRectMake(x, y, w, h);

    //更新 列高度数组中 刚刚找到的 最短的数组的 新高度。
    self.columnYArray[minIndex] = @(CGRectGetMaxY(attributes.frame));

    return attributes;
}

至此，我们的瀑布流的布局类就书写完毕了，我们需要把它和UICollectionView绑定在一起，并且通过UICollectionView的数据源，来提供宽高比从而生成动态高度返回给我们的BJWaterfullLayout的代理使用。
代码如下:
#import "ViewController.h"
#import "BJWaterfullModel.h"
#import "BJWaterfullLayout.h"
#import "BJWaterfullCell.h"

@interface ViewController ()<BJWaterfullLayoutDelegate,UICollectionViewDelegate,UICollectionViewDataSource>

在UICollectionView的懒加载方法中绑定UICollectionView：

BJWaterfullLayout * layout = [[BJWaterfullLayout alloc] init];
layout.delegate = self;
 
_collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];

下面是BJWaterfullLayoutDelegate中我们强制要求实现的返回动态高度的方法，希望你还记得：

-(CGFloat)BJWaterfullLayout:(BJWaterfullLayout *)layout index:(NSInteger)index weight:(CGFloat)weight
{
    BJWaterfullModel * model = self.dataArray[index];

    return weight*(model.h/model.w);
}

至此，大功告成，我的数据源在Demo文件里面有，你们可以去拿来写Demo用，而具体的基本UICollectionView实现我的从零开始UICollectionView(1)--基本实现里面有，瀑布流效果如下:

瀑布流

---

这里我们需要聊聊UICollectionViewLayoutAttributes这个类：

这个类在我的理解中，它更像是UICollectionViewCell和UICollectionReusableView的布局属性类，因为它所包含的属性及构造方法，总的来看，都是为布局而诞生的。
它有坐标frame、尺寸size、甚至2D变形transform和3D变形transform3D。这些都能为我们实现一些极其有趣的布局效果。

NS_CLASS_AVAILABLE_IOS(6_0) @interface UICollectionViewLayoutAttributes : NSObject <NSCopying, UIDynamicItem>

@property (nonatomic) CGRect frame;
@property (nonatomic) CGPoint center;
@property (nonatomic) CGSize size;
@property (nonatomic) CATransform3D transform3D;
@property (nonatomic) CGRect bounds NS_AVAILABLE_IOS(7_0);
@property (nonatomic) CGAffineTransform transform NS_AVAILABLE_IOS(7_0);
@property (nonatomic) CGFloat alpha;
@property (nonatomic) NSInteger zIndex; // default is 0
@property (nonatomic, getter=isHidden) BOOL hidden; // As an optimization, UICollectionView might not create a view for items whose hidden attribute is YES
@property (nonatomic, strong) NSIndexPath *indexPath;

@property (nonatomic, readonly) UICollectionElementCategory representedElementCategory;
@property (nonatomic, readonly, nullable) NSString *representedElementKind; // nil when representedElementCategory is UICollectionElementCategoryCell

+ (instancetype)layoutAttributesForCellWithIndexPath:(NSIndexPath *)indexPath;
+ (instancetype)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind withIndexPath:(NSIndexPath *)indexPath;
+ (instancetype)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind withIndexPath:(NSIndexPath *)indexPath;

@end

---

下节预告：横向动画效果布局及page悬停、增删Item及其动画(基于UICollectionViewLayoutAttributes这个类做的一些有趣的动画和变动)。

---

注:若你觉得这文章确实帮到你了，或是支持一下原创技术文章，请为我点个赞。大爷若是还能打赏打赏，那就更好不过了。