iOS自定义UICollectionViewLayout之瀑布流

目标效果

因为系统给我们提供的 UICollectionViewFlowLayout 布局类不能实现瀑布流的效果,如果我们想实现 瀑布流 的效果,需要自定义一个 UICollectionViewLayout  类,实现瀑布流效果。效果如右图。

依赖工具:

我们需要一个图片大小和图片地址的Josn数据, 和 SDWebImage图片加载的第三方工具

RootViewController.m

  1 #import "RootViewController.h"
  2 #import "DataModel.h"
  3 #import "WaterFlowLayout.h"
  4 #import "RootCell.h"
  5 #import "UIImageView+WebCache.h"
  6
  7 @interface RootViewController ()<UICollectionViewDataSource, UICollectionViewDelegate, WaterFlowLayoutDelegate>
  8
  9 // 声明大数组存放所有的数据
 10 @property (nonatomic, strong) NSMutableArray *allDataArray;
 11
 12 // 定义collectionView
 13 @property (nonatomic, strong) UICollectionView *collectionView;
 14
 15 @end
 16
 17 @implementation RootViewController
 18
 19 // 懒加载
 20 - (NSMutableArray *)allDataArray {
 21     if (!_allDataArray) {
 22         _allDataArray = [NSMutableArray array];
 23     }
 24     return _allDataArray;
 25 }
 26
 27 - (void)viewDidLoad {
 28     [super viewDidLoad];
 29     // Do any additional setup after loading the view.
 30
 31     // 读取数据
 32     [self loadData];
 33
 34     // 初始化布局
 35     [self initLayout];
 36
 37     // 注册cell
 38     [self.collectionView registerClass:[RootCell class] forCellWithReuseIdentifier:@"cell"];
 39 }
 40
 41 // 初始化布局
 42 - (void)initLayout {
 43
 44     // 1.创建UICollectionView的布局样式对象
 45     WaterFlowLayout *water = [[WaterFlowLayout alloc] init];
 46     CGFloat width = ([UIScreen mainScreen].bounds.size.width - 40) / 3;
 47     water.itemSize = CGSizeMake(width, width);
 48     // 设置内边距
 49     water.sectionInsets = UIEdgeInsetsMake(10, 10, 10, 10);
 50     // 设置间距
 51     water.spacing = 10;
 52     // 设置有多少列
 53     water.numberOfColumn = 3;
 54     // 设置代理
 55     water.delegate = self;
 56
 57     // 2.布局UICollectionView
 58     self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:water];
 59     self.collectionView.delegate = self;
 60     self.collectionView.dataSource = self;
 61     self.collectionView.backgroundColor = [UIColor whiteColor];
 62     [self.view addSubview:self.collectionView];
 63
 64 }
 65
 66 // 读取数据
 67 - (void)loadData {
 68
 69     // 第一步：获取文件路径
 70     NSString *filePath = [[NSBundle mainBundle] pathForResource:@"Data" ofType:@"json"];
 71     // 第二步：根据路径读取数据，转为NSData对象
 72     NSData *data = [NSData dataWithContentsOfFile:filePath];
 73     // 第三步：根据json格式解析数据
 74     NSArray *dataArray = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingAllowFragments error:nil];
 75
 76 //    NSLog(@"%@", dataArray);
 77     // 第四步：遍历数组，将数据转为model对象
 78     for (NSDictionary *dict in dataArray) {
 79
 80         // 创建model对象
 81         DataModel *model = [[DataModel alloc] init];
 82         // 使用KVC给model赋值
 83         [model setValuesForKeysWithDictionary:dict];
 84
 85         // 将model添加到大数组中
 86         [self.allDataArray addObject:model];
 87     }
 88 //    NSLog(@"%@", self.allDataArray);
 89 }
 90
 91 // 设置分区个数
 92 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
 93     return 1;
 94 }
 95 // 设置每个分区的item个数
 96 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
 97     return self.allDataArray.count;
 98 }
 99
100 // 返回每一个item的cell对象
101 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
102
103     RootCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
104
105     // 设置cell数据
106
107     DataModel *model = self.allDataArray[indexPath.row];
108     NSURL *url = [NSURL URLWithString:model.thumbURL];
109     [cell.photoView sd_setImageWithURL:url];
110     cell.backgroundColor = [UIColor orangeColor];
111     return cell;
112 }
113
114 // 实现代理方法返回每一个item的高度
115 - (CGFloat)heightForItemAtIndexPath:(NSIndexPath *)indexPath {
116
117     DataModel *model = self.allDataArray[indexPath.row];
118     CGFloat width = ([UIScreen mainScreen].bounds.size.width - 40) / 3;
119     // 计算item高度
120     CGFloat height = model.height / model.width * width;
121     return height;
122
123 }
124
125 @end

主视图文件,主要用于处理数据和布局页面

RootCell.h

1 #import <UIKit/UIKit.h>
2
3 @interface RootCell : UICollectionViewCell
4
5 @property (nonatomic, strong) UIImageView *photoView;
6
7 @end

RootCell.m

 1 #import "RootCell.h"
 2
 3 @implementation RootCell
 4
 5 - (instancetype)initWithFrame:(CGRect)frame {
 6     self = [super initWithFrame:frame];
 7     if (self) {
 8         self.photoView = [[UIImageView alloc] init];
 9         [self.contentView addSubview:self.photoView];
10     }
11     return self;
12 }
13
14 - (void)layoutSubviews {
15
16     self.photoView.frame = self.bounds;
17
18 }
19
20 @end

RootCell就是每一个Item的样式, 也就是一张张图片

WaterFlowLayout.h

 1 #import <UIKit/UIKit.h>
 2
 3 @protocol WaterFlowLayoutDelegate <NSObject>
 4
 5 // 返回每一个item的高度
 6 - (CGFloat)heightForItemAtIndexPath:(NSIndexPath *)indexPath;
 7
 8 @end
 9
10 @interface WaterFlowLayout : UICollectionViewLayout
11
12 // item的大小，需要根据这个获取宽度
13 @property (nonatomic, assign) CGSize itemSize;
14
15 // 内边距的设置
16 @property (nonatomic, assign) UIEdgeInsets sectionInsets;
17
18 // item的间距(这里水平方向和垂直方向的间距一样)
19 @property (nonatomic, assign) CGFloat spacing;
20
21 // 列数
22 @property (nonatomic, assign) NSInteger numberOfColumn;
23
24 // 设置代理，用于获取item的高度
25 @property (nonatomic, weak) id<WaterFlowLayoutDelegate>delegate;
26
27 @end

WaterFlowLayout.m

  1 #import "WaterFlowLayout.h"
  2
  3 @interface WaterFlowLayout ()
  4
  5 // 声明私有属性
  6 // 保存一共有多少个item
  7 @property (nonatomic, assign) NSInteger numberOfItems;
  8
  9 // 保存计算好的每一个item的信息
 10 @property (nonatomic, strong) NSMutableArray *itemAttributes;
 11
 12 // 保存每一列的高度
 13 @property (nonatomic, strong) NSMutableArray *columnHeights;
 14
 15
 16 // 声明私有方法
 17 // 找到当前最长列
 18 - (NSInteger)indexOfHeightestColumn;
 19
 20 // 找到当前最短列
 21 - (NSInteger)indexOfShortestColumn;
 22
 23 @end
 24
 25 @implementation WaterFlowLayout
 26
 27 // 懒加载
 28 - (NSMutableArray *)itemAttributes {
 29     if (!_itemAttributes) {
 30         _itemAttributes = [NSMutableArray array];
 31     }
 32     return _itemAttributes;
 33 }
 34
 35 - (NSMutableArray *)columnHeights {
 36     if (!_columnHeights) {
 37         _columnHeights = [NSMutableArray array];
 38     }
 39     return _columnHeights;
 40 }
 41
 42 // 找到当前最长列
 43 - (NSInteger)indexOfHeightestColumn {
 44     // 记录最长列的下标
 45     NSInteger index = 0;
 46     // 记录最长列的高度
 47     CGFloat length = 0;
 48     for (int i = 0; i < self.columnHeights.count; i++) {
 49         // 将数组中的对象转为基本数值
 50         CGFloat currentLength = [self.columnHeights[i] floatValue];
 51         if (currentLength > length) {
 52             length = currentLength;
 53             index = i;
 54         }
 55     }
 56     return index;
 57 }
 58
 59 // 找到当前最短列
 60 - (NSInteger)indexOfShortestColumn {
 61     NSInteger index = 0;
 62     CGFloat length = MAXFLOAT;
 63     for (int i = 0; i < self.columnHeights.count; i++) {
 64
 65         CGFloat currentLength = [self.columnHeights[i] floatValue];
 66         if (currentLength < length) {
 67             length = currentLength;
 68             index = i;
 69         }
 70     }
 71     return index;
 72 }
 73
 74 // 接下来重写三个方法
 75
 76 // 准备布局，在这里计算每个item的frame
 77 - (void)prepareLayout {
 78
 79     // 拿到一共有多少个item
 80     self.numberOfItems = [self.collectionView numberOfItemsInSection:0];
 81     // 每一列添加一个top高度
 82     for (int i = 0; i < self.numberOfColumn; i++) {
 83         // @() NSNumber字面量创建对象
 84         self.columnHeights[i] = @(self.sectionInsets.top);
 85     }
 86
 87     // 依次为每个item设置位置信息，并存储在数组中
 88     for (int i = 0; i < self.numberOfItems; i++) {
 89
 90         // 1.找到最短列的下标
 91         NSInteger shortestIndex = [self indexOfShortestColumn];
 92         // 2.计算X 目标X = 内边距左间距 + (宽 + item间距)*最短列下标
 93         CGFloat detalX = self.sectionInsets.left + shortestIndex * (self.itemSize.width + self.spacing);
 94         // 3.找到最短列的高度
 95         CGFloat height = [self.columnHeights[shortestIndex] floatValue];
 96         // 4.计算Y
 97         CGFloat detalY = height + self.spacing;
 98         // 5.创建indexPath
 99         NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
100
101         // 6.调用代理方法计算高度
102         CGFloat itemHeight = 0;
103         if (_delegate && [_delegate respondsToSelector:@selector(heightForItemAtIndexPath:)]) {
104             itemHeight = [_delegate heightForItemAtIndexPath:indexPath];
105         }
106
107         // 定义保存位置信息的对象
108         UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
109
110         // 7.生成frame
111         attributes.frame = CGRectMake(detalX, detalY, self.itemSize.width, itemHeight);
112         // 8.将位置信息添加到数组中
113         [self.itemAttributes addObject:attributes];
114
115         // 9.更新这一列的高度
116         self.columnHeights[shortestIndex] = @(detalY + itemHeight);
117     }
118
119 }
120
121 // 返回UICollectionView的大小
122 - (CGSize)collectionViewContentSize {
123
124     // 求最高列的下标
125     NSInteger heightest = [self indexOfHeightestColumn];
126     // 最高列的高度
127     CGFloat height = [self.columnHeights[heightest] floatValue];
128     // 拿到collectionView的原始大小
129     CGSize size = self.collectionView.frame.size;
130     size.height = height + self.sectionInsets.bottom;
131
132     return size;
133 }
134
135 // 返回每一个item的位置信息
136 - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
137     return self.itemAttributes;
138 }
139
140 @end

WaterFlowLayout 就是我们自定义的 瀑布流 的文件

DataModel.h

 1 #import <Foundation/Foundation.h>
 2
 3 @interface DataModel : NSObject
 4
 5 @property (nonatomic, copy) NSString *thumbURL;
 6
 7 @property (nonatomic, assign) float width;
 8
 9 @property (nonatomic, assign) float height;
10
11
12 @end

DataModel.m

 1 #import "DataModel.h"
 2
 3 @implementation DataModel
 4
 5 // 防崩
 6 - (void)setValue:(id)value forUndefinedKey:(NSString *)key {
 7
 8 }
 9
10 @end