前言
对于许多的项目来说，瀑布流是极其重要的一个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这个类做的一些有趣的动画和变动)。
注:若你觉得这文章确实帮到你了，或是支持一下原创技术文章，请为我点个赞。大爷若是还能打赏打赏，那就更好不过了。
网友评论