自定义Collection与使用
实现步骤
一、新建两个类
1.继承自UIScrollView的子类，比如iCocosWaterflowView
* 瀑布流显示控件，用来显示所有的瀑布流数据
2.继承自UIView的子类，比如iCocosWaterflowViewCell
* 代表着瀑布流数据中的一个单元（一个格子）
3.总结
iCocosWaterflowView和iCocosWaterflowViewCell的关系实际上类似于
UITableView和UITableViewCell的关系
二、设计iCocosWaterflowView的接口
1.模仿UITableView的接口来设计
* 设计一套数据源和代理方法
三、iCocosWaterflowView的实现
1.reloadData
* 作用：刷新数据
* 步骤：
1> 清空以前残余的数据
2> 计算所有新数据对应的frame
2.layoutSubviews
* 作用：显示和移除子控件
* 步骤：
1> 检测每一个数据对应的frame在不在屏幕上（用户能不能看见）
2> 如果这个数据对应的frame在屏幕上：向数据源索要这个数据对应的cell，添加这个cell到iCocosWaterflowView中显示
3> 如果这个数据对应的frame不在屏幕上：从iCocosWaterflowView中移除这个数据对应的cell，并将这个cell添加到缓存池中
View.h文件
1 #import <UIKit/UIKit.h>
2
3 typedef enum {
4 iCocosWaterflowViewMarginTypeTop,
5 iCocosWaterflowViewMarginTypeBottom,
6 iCocosWaterflowViewMarginTypeLeft,
7 iCocosWaterflowViewMarginTypeRight,
8 iCocosWaterflowViewMarginTypeColumn, // 每一列
9 iCocosWaterflowViewMarginTypeRow, // 每一行
10 } iCocosWaterflowViewMarginType;
11
12 @class iCocosWaterflowView, iCocosWaterflowViewCell;
13
14 /**
15 * 数据源方法
16 */
17 @protocol iCocosWaterflowViewDataSource <NSObject>
18 @required
19 /**
20 * 一共有多少个数据
21 */
22 - (NSUInteger)numberOfCellsInWaterflowView:(iCocosWaterflowView *)waterflowView;
23 /**
24 * 返回index位置对应的cell
25 */
26 - (iCocosWaterflowViewCell *)waterflowView:(iCocosWaterflowView *)waterflowView cellAtIndex:(NSUInteger)index;
27
28 @optional
29 /**
30 * 一共有多少列
31 */
32 - (NSUInteger)numberOfColumnsInWaterflowView:(iCocosWaterflowView *)waterflowView;
33 @end
34
35 /**
36 * 代理方法
37 */
38 @protocol iCocosWaterflowViewDelegate <UIScrollViewDelegate>
39 @optional
40 /**
41 * 第index位置cell对应的高度
42 */
43 - (CGFloat)waterflowView:(iCocosWaterflowView *)waterflowView heightAtIndex:(NSUInteger)index;
44 /**
45 * 选中第index位置的cell
46 */
47 - (void)waterflowView:(iCocosWaterflowView *)waterflowView didSelectAtIndex:(NSUInteger)index;
48 /**
49 * 返回间距
50 */
51 - (CGFloat)waterflowView:(iCocosWaterflowView *)waterflowView marginForType:(iCocosWaterflowViewMarginType)type;
52 @end
53
54 /**
55 * 瀑布流控件
56 */
57 @interface iCocosWaterflowView : UIScrollView
58 /**
59 * 数据源
60 */
61 @property (nonatomic, weak) id<iCocosWaterflowViewDataSource> dataSource;
62 /**
63 * 代理
64 */
65 @property (nonatomic, weak) id<iCocosWaterflowViewDelegate> delegate;
66
67 /**
68 * 刷新数据（只要调用这个方法，会重新向数据源和代理发送请求，请求数据）
69 */
70 - (void)reloadData;
71
72 /**
73 * cell的宽度
74 */
75 - (CGFloat)cellWidth;
76
77 /**
78 * 根据标识去缓存池查找可循环利用的cell
79 */
80 - (id)dequeueReusableCellWithIdentifier:(NSString *)identifier;
81 @end
View.m文件
1 #import "iCocosWaterflowView.h"
2 #import "iCocosWaterflowViewCell.h"
3
4 #define iCocosWaterflowViewDefaultCellH 70
5 #define iCocosWaterflowViewDefaultMargin 8
6 #define iCocosWaterflowViewDefaultNumberOfColumns 3
7
8 @interface iCocosWaterflowView()
9 /**
10 * 所有cell的frame数据
11 */
12 @property (nonatomic, strong) NSMutableArray *cellFrames;
13 /**
14 * 正在展示的cell
15 */
16 @property (nonatomic, strong) NSMutableDictionary *displayingCells;
17 /**
18 * 缓存池（用Set，存放离开屏幕的cell）
19 */
20 @property (nonatomic, strong) NSMutableSet *reusableCells;
21 @end
22
23 @implementation iCocosWaterflowView
24
25 #pragma mark - 初始化
26 - (NSMutableArray *)cellFrames
27 {
28 if (_cellFrames == nil) {
29 self.cellFrames = [NSMutableArray array];
30 }
31 return _cellFrames;
32 }
33
34 - (NSMutableDictionary *)displayingCells
35 {
36 if (_displayingCells == nil) {
37 self.displayingCells = [NSMutableDictionary dictionary];
38 }
39 return _displayingCells;
40 }
41
42 - (NSMutableSet *)reusableCells
43 {
44 if (_reusableCells == nil) {
45 self.reusableCells = [NSMutableSet set];
46 }
47 return _reusableCells;
48 }
49
50 - (id)initWithFrame:(CGRect)frame
51 {
52 self = [super initWithFrame:frame];
53 if (self) {
54
55 }
56 return self;
57 }
58
59 - (void)willMoveToSuperview:(UIView *)newSuperview
60 {
61 [self reloadData];
62 }
63
64 #pragma mark - 公共接口
65 /**
66 * cell的宽度
67 */
68 - (CGFloat)cellWidth
69 {
70 // 总列数
71 int numberOfColumns = [self numberOfColumns];
72 CGFloat leftM = [self marginForType:iCocosWaterflowViewMarginTypeLeft];
73 CGFloat rightM = [self marginForType:iCocosWaterflowViewMarginTypeRight];
74 CGFloat columnM = [self marginForType:iCocosWaterflowViewMarginTypeColumn];
75 return (self.bounds.size.width - leftM - rightM - (numberOfColumns - 1) * columnM) / numberOfColumns;
76 }
77
78 /**
79 * 刷新数据
80 */
81 - (void)reloadData
82 {
83 // 清空之前的所有数据
84 // 移除正在正在显示cell
85 [self.displayingCells.allValues makeObjectsPerformSelector:@selector(removeFromSuperview)];
86 [self.displayingCells removeAllObjects];
87 [self.cellFrames removeAllObjects];
88 [self.reusableCells removeAllObjects];
89
90 // cell的总数
91 int numberOfCells = [self.dataSource numberOfCellsInWaterflowView:self];
92
93 // 总列数
94 int numberOfColumns = [self numberOfColumns];
95
96 // 间距
97 CGFloat topM = [self marginForType:iCocosWaterflowViewMarginTypeTop];
98 CGFloat bottomM = [self marginForType:iCocosWaterflowViewMarginTypeBottom];
99 CGFloat leftM = [self marginForType:iCocosWaterflowViewMarginTypeLeft];
100 CGFloat columnM = [self marginForType:iCocosWaterflowViewMarginTypeColumn];
101 CGFloat rowM = [self marginForType:iCocosWaterflowViewMarginTypeRow];
102
103 // cell的宽度
104 CGFloat cellW = [self cellWidth];
105
106 // 用一个C语言数组存放所有列的最大Y值
107 CGFloat maxYOfColumns[numberOfColumns];
108 for (int i = 0; i<numberOfColumns; i++) {
109 maxYOfColumns[i] = 0.0;
110 }
111
112 // 计算所有cell的frame
113 for (int i = 0; i<numberOfCells; i++) {
114 // cell处在第几列(最短的一列)
115 NSUInteger cellColumn = 0;
116 // cell所处那列的最大Y值(最短那一列的最大Y值)
117 CGFloat maxYOfCellColumn = maxYOfColumns[cellColumn];
118 // 求出最短的一列
119 for (int j = 1; j<numberOfColumns; j++) {
120 if (maxYOfColumns[j] < maxYOfCellColumn) {
121 cellColumn = j;
122 maxYOfCellColumn = maxYOfColumns[j];
123 }
124 }
125
126 // 询问代理i位置的高度
127 CGFloat cellH = [self heightAtIndex:i];
128
129 // cell的位置
130 CGFloat cellX = leftM + cellColumn * (cellW + columnM);
131 CGFloat cellY = 0;
132 if (maxYOfCellColumn == 0.0) { // 首行
133 cellY = topM;
134 } else {
135 cellY = maxYOfCellColumn + rowM;
136 }
137
138 // 添加frame到数组中
139 CGRect cellFrame = CGRectMake(cellX, cellY, cellW, cellH);
140 [self.cellFrames addObject:[NSValue valueWithCGRect:cellFrame]];
141
142 // 更新最短那一列的最大Y值
143 maxYOfColumns[cellColumn] = CGRectGetMaxY(cellFrame);
144 }
145
146 // 设置contentSize
147 CGFloat contentH = maxYOfColumns[0];
148 for (int j = 1; j<numberOfColumns; j++) {
149 if (maxYOfColumns[j] > contentH) {
150 contentH = maxYOfColumns[j];
151 }
152 }
153 contentH += bottomM;
154 self.contentSize = CGSizeMake(0, contentH);
155 }
156
157 /**
158 * 当UIScrollView滚动的时候也会调用这个方法
159 */
160 - (void)layoutSubviews
161 {
162 [super layoutSubviews];
163
164 // 向数据源索要对应位置的cell
165 NSUInteger numberOfCells = self.cellFrames.count;
166 for (int i = 0; i<numberOfCells; i++) {
167 // 取出i位置的frame
168 CGRect cellFrame = [self.cellFrames[i] CGRectValue];
169
170 // 优先从字典中取出i位置的cell
171 iCocosWaterflowViewCell *cell = self.displayingCells[@(i)];
172
173 // 判断i位置对应的frame在不在屏幕上（能否看见）
174 if ([self isInScreen:cellFrame]) { // 在屏幕上
175 if (cell == nil) {
176 cell = [self.dataSource waterflowView:self cellAtIndex:i];
177 cell.frame = cellFrame;
178 [self addSubview:cell];
179
180 // 存放到字典中
181 self.displayingCells[@(i)] = cell;
182 }
183 } else { // 不在屏幕上
184 if (cell) {
185 // 从scrollView和字典中移除
186 [cell removeFromSuperview];
187 [self.displayingCells removeObjectForKey:@(i)];
188
189 // 存放进缓存池
190 [self.reusableCells addObject:cell];
191 }
192 }
193 }
194 }
195
196 - (id)dequeueReusableCellWithIdentifier:(NSString *)identifier
197 {
198 __block iCocosWaterflowViewCell *reusableCell = nil;
199
200 [self.reusableCells enumerateObjectsUsingBlock:^(iCocosWaterflowViewCell *cell, BOOL *stop) {
201 if ([cell.identifier isEqualToString:identifier]) {
202 reusableCell = cell;
203 *stop = YES;
204 }
205 }];
206
207 if (reusableCell) { // 从缓存池中移除
208 [self.reusableCells removeObject:reusableCell];
209 }
210 return reusableCell;
211 }
212
213 #pragma mark - 私有方法
214 /**
215 * 判断一个frame有无显示在屏幕上
216 */
217 - (BOOL)isInScreen:(CGRect)frame
218 {
219 return (CGRectGetMaxY(frame) > self.contentOffset.y) &&
220 (CGRectGetMinY(frame) < self.contentOffset.y + self.bounds.size.height);
221 }
222
223 /**
224 * 间距
225 */
226 - (CGFloat)marginForType:(iCocosWaterflowViewMarginType)type
227 {
228 if ([self.delegate respondsToSelector:@selector(waterflowView:marginForType:)]) {
229 return [self.delegate waterflowView:self marginForType:type];
230 } else {
231 return iCocosWaterflowViewDefaultMargin;
232 }
233 }
234 /**
235 * 总列数
236 */
237 - (NSUInteger)numberOfColumns
238 {
239 if ([self.dataSource respondsToSelector:@selector(numberOfColumnsInWaterflowView:)]) {
240 return [self.dataSource numberOfColumnsInWaterflowView:self];
241 } else {
242 return iCocosWaterflowViewDefaultNumberOfColumns;
243 }
244 }
245 /**
246 * index位置对应的高度
247 */
248 - (CGFloat)heightAtIndex:(NSUInteger)index
249 {
250 if ([self.delegate respondsToSelector:@selector(waterflowView:heightAtIndex:)]) {
251 return [self.delegate waterflowView:self heightAtIndex:index];
252 } else {
253 return iCocosWaterflowViewDefaultCellH;
254 }
255 }
256
257 #pragma mark - 事件处理
258 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
259 {
260 if (![self.delegate respondsToSelector:@selector(waterflowView:didSelectAtIndex:)]) return;
261
262 // 获得触摸点
263 UITouch *touch = [touches anyObject];
264 // CGPoint point = [touch locationInView:touch.view];
265 CGPoint point = [touch locationInView:self];
266
267 __block NSNumber *selectIndex = nil;
268 [self.displayingCells enumerateKeysAndObjectsUsingBlock:^(id key, iCocosWaterflowViewCell *cell, BOOL *stop) {
269 if (CGRectContainsPoint(cell.frame, point)) {
270 selectIndex = key;
271 *stop = YES;
272 }
273 }];
274
275 if (selectIndex) {
276 [self.delegate waterflowView:self didSelectAtIndex:selectIndex.unsignedIntegerValue];
277 }
278 }
Cell.h文件
1 #import <UIKit/UIKit.h> 2 3 @interface iCocosWaterflowViewCell : UIView 4 @property (nonatomic, copy) NSString *identifier; 5 @end
使用方法：
1:新建一个Cell模型
1 #import <Foundation/Foundation.h> 2 3 @interface iCocosShop : NSObject 4 @property (nonatomic, assign) CGFloat w; 5 @property (nonatomic, assign) CGFloat h; 6 @property (nonatomic, copy) NSString *img; 7 @property (nonatomic, copy) NSString *price; 8 @end
2：定义一个集成自上面的Cell的Cell
1 #import "iCocosWaterflowViewCell.h" 2 @class iCocosWaterflowView, iCocosShop; 3 4 @interface iCocosShopCell : iCocosWaterflowViewCell 5 + (instancetype)cellWithWaterflowView:(iCocosWaterflowView *)waterflowView; 6 7 @property (nonatomic, strong) iCocosShop *shop; 8 @end
实现这个Cell：
1 #import "iCocosShopCell.h"
2 #import "iCocosWaterflowView.h"
3 #import "UIImageView+WebCache.h"
4 #import "iCocosShop.h"
5
6 @interface iCocosShopCell()
7 @property (weak, nonatomic) UIImageView *imageView;
8 @property (weak, nonatomic) UILabel *priceLabel;
9 @end
10
11 @implementation iCocosShopCell
12
13
14 + (instancetype)cellWithWaterflowView:(iCocosWaterflowView *)waterflowView
15 {
16 static NSString *ID = @"SHOP";
17 iCocosShopCell *cell = [waterflowView dequeueReusableCellWithIdentifier:ID];
18 if (cell == nil) {
19 cell = [[iCocosShopCell alloc] init];
20 cell.identifier = ID;
21 }
22 return cell;
23 }
24
25 - (id)initWithFrame:(CGRect)frame
26 {
27 self = [super initWithFrame:frame];
28 if (self) {
29
30 UIImageView *imageView = [[UIImageView alloc] init];
31 [self addSubview:imageView];
32 self.imageView = imageView;
33
34 UILabel *priceLabel = [[UILabel alloc] init];
35 priceLabel.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.3];
36 priceLabel.textAlignment = NSTextAlignmentCenter;
37 priceLabel.textColor = [UIColor whiteColor];
38 [self addSubview:priceLabel];
39 self.priceLabel = priceLabel;
40 }
41 return self;
42 }
43
44 - (void)setShop:(iCocosShop *)shop
45 {
46 _shop = shop;
47
48 self.priceLabel.text = shop.price;
49 [self.imageView sd_setImageWithURL:[NSURL URLWithString:shop.img] placeholderImage:[UIImage imageNamed:@"loading"]];
50 }
51
52 - (void)layoutSubviews
53 {
54 [super layoutSubviews];
55
56 self.imageView.frame = self.bounds;
57
58 CGFloat priceX = 0;
59 CGFloat priceH = 25;
60 CGFloat priceY = self.bounds.size.height - priceH;
61 CGFloat priceW = self.bounds.size.width;
62 self.priceLabel.frame = CGRectMake(priceX, priceY, priceW, priceH);
63 }
3:在控制器中直接使用：
1 #import "iCocosShopsViewController.h"
2 #import "iCocosShopCell.h"
3 #import "iCocosWaterflowView.h"
4 #import "iCocosShop.h"
5 #import "MJExtension.h"
6 #import "MJRefresh.h"
7
8 @interface iCocosShopsViewController ()<iCocosWaterflowViewDataSource, iCocosWaterflowViewDelegate>
9 @property (nonatomic, strong) NSMutableArray *shops;
10 @property (nonatomic, weak) iCocosWaterflowView *waterflowView;
11 @end
12
13 @implementation iCocosShopsViewController
14
15 - (NSMutableArray *)shops
16 {
17 if (_shops == nil) {
18 self.shops = [NSMutableArray array];
19 }
20 return _shops;
21 }
22
23 - (void)viewDidLoad
24 {
25 [super viewDidLoad];
26
27 // 0.初始化数据
28 NSArray *newShops = [iCocosShop objectArrayWithFilename:@"2.plist"];
29 [self.shops addObjectsFromArray:newShops];
30
31 // 1.瀑布流控件
32 iCocosWaterflowView *waterflowView = [[iCocosWaterflowView alloc] init];
33 waterflowView.backgroundColor = [UIColor redColor];
34 // 跟随着父控件的尺寸而自动伸缩
35 waterflowView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
36 waterflowView.frame = self.view.bounds;
37 waterflowView.dataSource = self;
38 waterflowView.delegate = self;
39 [self.view addSubview:waterflowView];
40 self.waterflowView = waterflowView;
41
42 // 2.继承刷新控件
43 // [waterflowView addFooterWithCallback:^{
44 // NSLog(@"进入上拉加载状态");
45 // }];
46
47 // [waterflowView addHeaderWithCallback:^{
48 // NSLog(@"进入下拉加载状态");
49 // }];
50
51 [waterflowView addHeaderWithTarget:self action:@selector(loadNewShops)];
52 [waterflowView addFooterWithTarget:self action:@selector(loadMoreShops)];
53 }
54
55 - (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
56 {
57 // NSLog(@"屏幕旋转完毕");
58 [self.waterflowView reloadData];
59 }
60
61 - (void)loadNewShops
62 {
63 static dispatch_once_t onceToken;
64 dispatch_once(&onceToken, ^{
65 // 加载1.plist
66 NSArray *newShops = [iCocosShop objectArrayWithFilename:@"1.plist"];
67 [self.shops insertObjects:newShops atIndexes:[NSIndexSet indexSetWithIndexesInRange:NSMakeRange(0, newShops.count)]];
68 });
69
70 dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
71 // 刷新瀑布流控件
72 [self.waterflowView reloadData];
73
74 // 停止刷新
75 [self.waterflowView headerEndRefreshing];
76 });
77 }
78
79 - (void)loadMoreShops
80 {
81 static dispatch_once_t onceToken;
82 dispatch_once(&onceToken, ^{
83 // 加载3.plist
84 NSArray *newShops = [iCocosShop objectArrayWithFilename:@"3.plist"];
85 [self.shops addObjectsFromArray:newShops];
86 });
87
88 dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
89
90 // 刷新瀑布流控件
91 [self.waterflowView reloadData];
92
93 // 停止刷新
94 [self.waterflowView footerEndRefreshing];
95 });
96 }
97
98 #pragma mark - 数据源方法
99 - (NSUInteger)numberOfCellsInWaterflowView:(iCocosWaterflowView *)waterflowView
100 {
101 return self.shops.count;
102 }
103
104 - (iCocosWaterflowViewCell *)waterflowView:(iCocosWaterflowView *)waterflowView cellAtIndex:(NSUInteger)index
105 {
106 iCocosShopCell *cell = [iCocosShopCell cellWithWaterflowView:waterflowView];
107
108 cell.shop = self.shops[index];
109
110 return cell;
111 }
112
113 - (NSUInteger)numberOfColumnsInWaterflowView:(iCocosWaterflowView *)waterflowView
114 {
115 if (UIInterfaceOrientationIsPortrait(self.interfaceOrientation)) {
116 // 竖屏
117 return 3;
118 } else {
119 return 5;
120 }
121 }
122
123 #pragma mark - 代理方法
124 - (CGFloat)waterflowView:(iCocosWaterflowView *)waterflowView heightAtIndex:(NSUInteger)index
125 {
126 iCocosShop *shop = self.shops[index];
127 // 根据cell的宽度 和 图片的宽高比 算出 cell的高度
128 return waterflowView.cellWidth * shop.h / shop.w;
129 }
注：这里还需要引入第三方库和相应的工具类
时间： 2024-12-17 19:58:44