一、开篇
1.瀑布流设计讨论
1.应用场景：在我们app开发中，瀑布流一般应用于大数据展示时，比如淘宝搜索页面、蘑菇街app、各大直播app主播列表页面等等。
2.设计思路：我们首要考虑UICollectionView,因为UICollectionView特殊性和可复用性。因为瀑布流每个格子item大小不同，需要计算每个item的宽高，就需要自定义UICollectionViewLayout。
2.瀑布流分类
我把瀑布流分为两种：垂直瀑布流、水平瀑布流。
1.垂直瀑布流：在我们app上实现的瀑布流一般是垂直瀑布流，也就是列数可设定，item宽度由列数决定，从上往下布局。
2.水平瀑布流：我在搜索网页百度图片时，看到百度图片的布局从而想到的一种布局方式。每行的高度是可设定的，item高度由图片大小决定，比例缩放。
3.瀑布流样式展示
垂直瀑布.jpeg
水平瀑布.jpeg
二、具体实现
1.创建一个UICollectionViewCell，它上面只有一个imageView。
// CollectionViewCell.m
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
_imageView = [[UIImageView alloc] init];
_imageView.frame = self.bounds;
[self addSubview:_imageView];
}
return self;
}
2.我们需要自定义一个layout，并且暴露一些可设置的属性用来控制瀑布流的对应展示，让瀑布流可用性更强大一些。
2.1 头文件：DYTWaterflowLayout.h
@interface DYTWaterflowLayout : UICollectionViewLayout
/**
* 行高(水平瀑布流时),默认为100
*/
@property (nonatomic, assign) CGFloat rowHeight;
/**
* 单元格宽度(垂直瀑布流时)
*/
@property (nonatomic, assign, readonly) CGFloat itemWidth;
/**
* 列数 : 默认为3
*/
@property (nonatomic, assign) NSInteger numberOfColumns;
/**
* 内边距 : 每一列之间的间距 (top, left, bottom, right)默认为{10, 10, 10, 10};
*/
@property (nonatomic, assign) UIEdgeInsets insets;
/**
* 每一行之间的间距 : 默认为10
*/
@property (nonatomic, assign) CGFloat rowGap;
/**
* 每一列之间的间距 : 默认为10
*/
@property (nonatomic, assign) CGFloat columnGap;
/**
* 高度数组 : 存储所有item的高度
*/
@property (nonatomic, strong) NSArray *itemHeights;
/**
* 宽度数组 : 存储所有item的宽度
*/
@property (nonatomic, strong) NSArray *itemWidths;
/**
* 瀑布流类型 : 分为水平瀑布流 和 垂直瀑布流
*/
@property (nonatomic, assign) DirectionType type;
@end
2.2 .m文件：DYTWaterflowLayout.m属性声明
@interface DYTWaterflowLayout()
@property (nonatomic, strong) NSMutableArray *itemAttributes; // 存放每个cell的布局属性
// 垂直瀑布流相关属性
@property (nonatomic, strong) NSMutableArray *columnsHeights; // 每一列的高度(count=多少列)
@property (nonatomic, assign) CGFloat maxHeight; // 最长列的高度(最大高度)
@property (nonatomic, assign) CGFloat minHeight; // 最短列的高度(最低高度)
@property (nonatomic, assign) NSInteger minIndex; // 最短列的下标
@property (nonatomic, assign) NSInteger maxIndex; // 最长列的下标
// 水平瀑布流相关属性
@property (nonatomic, strong) NSMutableArray *columnsWidths; // 每一行的宽度(count不确定)
@property (nonatomic, assign) NSInteger tempItemX; // 临时x : 用来计算每个cell的x值
@property (nonatomic, assign) NSInteger maxRowIndex; //最大行
@end
2.3 .m文件：DYTWaterflowLayout.m主要方法实现
//
#pragma mark -- 系统内部方法
/**
* 重写父类布局
*/
- (void)prepareLayout {
[super prepareLayout];
// (水平瀑布流时)重置最大行
if ((self.type == HorizontalType)) {
self.maxRowIndex = 0;
}
if (self.type == VerticalType) {
// (垂直瀑布流时)重置每一列的高度
[self.columnsHeights removeAllObjects];
for (NSUInteger i = 0; i < self.numberOfColumns; i++) {
[self.columnsHeights addObject:@(self.insets.top)];
}
}
// 计算所有cell的布局属性
[self.itemAttributes removeAllObjects];
NSUInteger itemCount = [self.collectionView numberOfItemsInSection:0];
self.tempItemX = self.insets.left;
for (NSUInteger i = 0; i < itemCount; ++i) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
if (self.type == VerticalType) {
[self setVerticalFrame:indexPath];
}else if ((self.type == HorizontalType)){
[self setHorizontalFrame:indexPath];
}
}
}
/**
* 水平瀑布：设置每一个attrs的frame，并加入数组中
*/
- (void)setHorizontalFrame:(NSIndexPath *)indexPath {
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
CGFloat w = [self.itemWidths[indexPath.item] floatValue];
CGFloat width = w + self.columnGap;
CGFloat h = (self.rowHeight == 0) ? 100 : self.rowHeight;
/**
* 如果当前的x值+当前cell的宽度 超出了 屏幕宽度，那么就要换行了。
* 换行操作 : 最大行+1，tempItemX重置为10(self.insets.left)。
*/
if (self.tempItemX + w > [UIScreen mainScreen].bounds.size.width) {
self.maxRowIndex++;
self.tempItemX = self.insets.left;
}
CGFloat x = self.tempItemX;
CGFloat y = self.insets.top + self.maxRowIndex * (h + self.rowGap);
attrs.frame = CGRectMake(x, y, w, h);
/**
* 注：1.cell的宽度和高度算起来比较简单 : 宽度由外部传进来，高度固定为rowHeight(默认为100)。
* 2.cell的x : 通过tempItemX算好了。
* 3.cell的y : minHeight最短列的高度，也就是最低高度，作为当前cell的起始y，当然要加上行之间的间隙。
*/
NSLog(@"%@",NSStringFromCGRect(attrs.frame));
[self.itemAttributes addObject:attrs];
self.tempItemX += width;
}
/**
* 垂直瀑布：设置每一个attrs的frame，并加入数组中
*/
- (void)setVerticalFrame:(NSIndexPath *)indexPath {
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
// cell的frame
CGFloat w = self.itemWidth;
CGFloat h = [self.itemHeights[indexPath.item] floatValue];
CGFloat x = self.insets.left + self.minIndex * (w + self.columnGap);
CGFloat y = self.minHeight + self.rowGap;
attrs.frame = CGRectMake(x, y, w, h);
/**
* 注：1.cell的宽度和高度算起来比较简单 : 宽度固定(itemWidth已经算好)，高度由外部传进来
* 2.cell的x : minIndex最短列作为当前列。
* 3.cell的y : minHeight最短列的高度，也就是最低高度，作为当前cell的起始y，当然要加上行之间的间隙。
*/
// 更新数组中的最大高度
self.columnsHeights[self.minIndex] = @(CGRectGetMaxY(attrs.frame));
NSLog(@"%@",NSStringFromCGRect(attrs.frame));
[self.itemAttributes addObject:attrs];
}
/**
* 返回collectionView的尺寸
*/
- (CGSize)collectionViewContentSize {
CGFloat height;
if (self.type == HorizontalType) {
CGFloat rowHeight = (self.rowHeight == 0) ? 100 : self.rowHeight;
height = self.insets.top + (self.maxRowIndex+1) * (rowHeight + self.rowGap);
}else {
height = self.maxHeight;
}
return CGSizeMake(self.collectionView.frame.size.width, height);
}
/**
* 所有元素（比如cell、补充控件、装饰控件）的布局属性
*/
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.itemAttributes;
}
3.1 直接在控制器里使用
// 设置布局
DYTWaterflowLayout *layout = [[DYTWaterflowLayout alloc]init];
layout.type = _type;
// 设置相关属性(不设置的话也行，都有相关默认配置)
layout.numberOfColumns = 3;
layout.columnGap = 10;
layout.rowGap = 10;
layout.insets = UIEdgeInsetsMake(10, 10, 10, 10);
layout.rowHeight = 100;
self.collectionView.collectionViewLayout = self.waterflowLayout = layout;
3.2 (举例)垂直瀑布流时，SDWebImage获取图片block里的具体实现
if (weakSelf.heights.count < weakSelf.allImageUrls.count) {
// 根据图片原始比例 计算 当前图片的高度(宽度固定)
CGFloat scale = image.size.height / image.size.width;
CGFloat width = weakSelf.waterflowLayout.itemWidth;
CGFloat height = width * scale;
NSNumber *heightNum = [NSNumber numberWithFloat:height];
[weakSelf.heights addObject:heightNum];
}
if (weakSelf.heights.count == weakSelf.allImageUrls.count) {
// 赋值所有cell的高度数组itemHeights
weakSelf.waterflowLayout.itemHeights = weakSelf.heights;
[weakSelf.collectionView reloadData];
}
3.3 UICollectionViewDataSource中要注意的点
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
cell.imageView.image = self.picImageArr[indexPath.item];
// 注：非常关键的一句，由于cell的复用，imageView的frame可能和cell对不上，需要重新设置。
cell.imageView.frame = cell.bounds;
cell.backgroundColor = [UIColor orangeColor];
return cell;
}
三、总结
1.瀑布流使用场景比较广泛，也是常用的技术之一，我也是又回顾了一遍，并且总结了整体的思路决定分享出来，结尾有demo，童鞋们可以自行下载。另外我参考的资料链接也会贴出，供大家研究比对。
2.水平瀑布流还没达到百度图片搜索的那种效果，右边距离屏幕间隙太大了，所以影响美观。后续会继续研究，期待有所突破。
3.有种情况是后台直接给图片的所有数据给我们，包括url、图片宽高等等，其实这样就是后台已经做好了图片的顺序优化处理。不过我们可以自己研究一下这个排序思路。如何达到右边间隙几乎相同，比如都为10。
4.当然有疑惑的地方可以留言或者直接私信我，我们可以一起讨论。
四、总结最终实现效果:
瀑布流.gif
本文章demo：
瀑布流Demo
参考相关文章：
iOS--瀑布流的实现 -- 作者Go_Spec
iOS 瀑布流基本实现 -- 作者iOS_成才录
额。。。如果想知道图片里的小姐姐是谁，请直接在文章下面留言。因为我想暂时留点悬念给大家。(皮一下就很开心😄)
