iOS开发UI篇—自定义瀑布流控件（cell的事件处理）

iOS开发UI篇—自定义瀑布流控件（cell的事件处理）

一、关于cell的复用的补充

在设置每个索引位置对应的cell的方法中，打印cell的索引和地址，已查看cell的循环利用情况

1 -(YYWaterflowViewCell *)waterflowView:(YYWaterflowView *)waterflowView cellAtIndex:(NSUInteger)index
2 {
3 //    YYWaterflowViewCell *cell=[[YYWaterflowViewCell alloc]init];
4
5     static NSString *ID=@"cell";
6     YYWaterflowViewCell *cell=[waterflowView dequeueReusableCellWithIdentifier:ID];
7     if (cell==nil) {
8         cell=[[YYWaterflowViewCell alloc]init];
9         cell.identifier=ID;
10         //给cell设置一个随机色
11         cell.backgroundColor=YYRandomColor;
12 //        [cell addSubview:[UIButton buttonWithType:UIButtonTypeContactAdd]];
13     }
14     //通过取出cell中的label，重新为label的text赋值
15
16     NSLog(@"%d---%p",index,cell);
17     return cell;
18 }

查看：



二、事件处理

1.在cell创建的时候添加一个label,设置label的tag值，以便在之后能够获取到label。

代码示例：

YYViewController.m文件

1 //  YYViewController.m
2 //  06-瀑布流
3 //
4 //  Created by apple on 14-7-28.
5 //  Copyright (c) 2014年 wendingding. All rights reserved.
6 //
7
8 #import "YYViewController.h"
9 #import "YYWaterflowView.h"
10 #import "YYWaterflowViewCell.h"
11
12 @interface YYViewController ()<YYWaterflowViewDelegate,YYWaterflowViewDataSource>
13
14 @end
15
16 @implementation YYViewController
17
18 - (void)viewDidLoad
19 {
20     [super viewDidLoad];
21     YYWaterflowView *waterflow=[[YYWaterflowView alloc]init];
22     waterflow.frame=self.view.bounds;
23     waterflow.delegate=self;
24     waterflow.dadaSource=self;
25     [self.view addSubview:waterflow];
26
27     //刷新数据
28     [waterflow reloadData];
29 }
30
31 #pragma mark-数据源方法
32 -(NSUInteger)numberOfCellsInWaterflowView:(YYWaterflowView *)waterflowView
33 {
34     return 40;
35 }
36 -(NSUInteger)numberOfColumnsInWaterflowView:(YYWaterflowView *)waterflowView
37 {
38     return 3;
39 }
40 -(YYWaterflowViewCell *)waterflowView:(YYWaterflowView *)waterflowView cellAtIndex:(NSUInteger)index
41 {
42 //    YYWaterflowViewCell *cell=[[YYWaterflowViewCell alloc]init];
43
44     static NSString *ID=@"cell";
45     YYWaterflowViewCell *cell=[waterflowView dequeueReusableCellWithIdentifier:ID];
46     if (cell==nil) {
47         cell=[[YYWaterflowViewCell alloc]init];
48         cell.identifier=ID;
49         //给cell设置一个随机色
50         cell.backgroundColor=YYRandomColor;
51 //        [cell addSubview:[UIButton buttonWithType:UIButtonTypeContactAdd]];
52         //在cell中添加一个label，设置tag值
53         UILabel *label=[[UILabel alloc]init];
54         label.tag=10;
55         //注意：需要设置控件的frame值，否则不会显示
56         label.frame=CGRectMake(0, 0, 20, 20);
57         [cell addSubview:label];
58     }
59     //通过取出cell中的label，重新为label的text赋值
60     UILabel *label=(UILabel *)[cell viewWithTag:10];
61     label.text=[NSString stringWithFormat:@"%d",index];
62
63     NSLog(@"%d---%p",index,cell);
64     return cell;
65 }
66
67
68 #pragma mark-代理方法
69 -(CGFloat)waterflowView:(YYWaterflowView *)waterflowView heightAtIndex:(NSUInteger)index
70 {
71     switch (index%3) {
72         case 0:return 90;
73         case 1:return 110;
74         case 2:return 80;
75         default:return 120;
76     }
77 }
78 -(CGFloat)waterflowView:(YYWaterflowView *)waterflowView marginForType:(YYWaterflowViewMarginType)type
79 {
80     switch (type) {
81         case YYWaterflowViewMarginTypeTop:
82         case YYWaterflowViewMarginTypeBottom:
83         case YYWaterflowViewMarginTypeLeft:
84         case YYWaterflowViewMarginTypeRight:
85             return 10;
86         case YYWaterflowViewMarginTypeColumn:
87         case YYWaterflowViewMarginTypeRow:
88             return 5;
89     }
90 }
91 -(void)waterflowView:(YYWaterflowView *)waterflowView didSelectAtIndex:(NSUInteger)index
92 {
93     NSLog(@"点击了第%d个cell",index);
94 }
95 @end

2.在YYWaterflowView.m中，监听手指对瀑布流的触碰，获得手指在屏幕上点击的触摸点，判断该触摸点是否在cell上，在哪个cell上？

　　如果点击了cell调用代理方法，那么处理对应cell的点击事件。

YYWaterflowView.m文件

1 //
2 //  YYWaterflowView.m
3 //  06-瀑布流
4 //
5 //  Created by apple on 14-7-29.
6 //  Copyright (c) 2014年 wendingding. All rights reserved.
7 //
8
9 #import "YYWaterflowView.h"
10 #import "YYWaterflowViewCell.h"
11 #define YYWaterflowViewDefaultNumberOfClunms  3
12 #define YYWaterflowViewDefaultCellH  100
13 #define YYWaterflowViewDefaultMargin 10
14
15 @interface YYWaterflowView()
16 /**
17  *  所有cell的frame数据
18  */
19 @property(nonatomic,strong)NSMutableArray *cellFrames;
20 /**
21  *  正在展示的cell
22  */
23 @property(nonatomic,strong)NSMutableDictionary  *displayingCells;
24 /**
25  *  缓存池（使用SET）
26  */
27 @property(nonatomic,strong)NSMutableSet *reusableCells;
28 @end
29
30 @implementation YYWaterflowView
31
32 #pragma mark-懒加载
33 -(NSMutableArray *)cellFrames
34 {
35     if (_cellFrames==nil) {
36         _cellFrames=[NSMutableArray array];
37     }
38     return _cellFrames;
39 }
40
41 -(NSMutableDictionary *)displayingCells
42 {
43     if (_displayingCells==nil) {
44         _displayingCells=[NSMutableDictionary dictionary];
45     }
46     return _displayingCells;
47 }
48
49 -(NSMutableSet *)reusableCells
50 {
51     if (_reusableCells==nil) {
52         _reusableCells=[NSMutableSet set];
53     }
54     return _reusableCells;
55 }
56
57 - (id)initWithFrame:(CGRect)frame
58 {
59     self = [super initWithFrame:frame];
60     if (self) {
61     }
62     return self;
63 }
64
65 #pragma mark-公共方法
66 /**
67  *  刷新数据
68  *  1.计算每个cell的frame
69  */
70 -(void)reloadData
71 {
72     //cell的总数是多少
73     int numberOfCells=[self.dadaSource numberOfCellsInWaterflowView:self];
74
75     //cell的列数
76     int numberOfColumns=[self numberOfColumns];
77
78     //间距
79     CGFloat leftM=[self marginForType:YYWaterflowViewMarginTypeLeft];
80     CGFloat rightM=[self marginForType:YYWaterflowViewMarginTypeRight];
81     CGFloat columnM=[self marginForType:YYWaterflowViewMarginTypeColumn];
82     CGFloat topM=[self marginForType:YYWaterflowViewMarginTypeTop];
83     CGFloat rowM=[self marginForType:YYWaterflowViewMarginTypeRow];
84     CGFloat bottomM=[self marginForType:YYWaterflowViewMarginTypeBottom];
85
86     //（1）cell的宽度
87     //cell的宽度=（整个view的宽度-左边的间距-右边的间距-（列数-1）X每列之间的间距）/总列数
88     CGFloat cellW=(self.frame.size.width-leftM-rightM-(numberOfColumns-1)*columnM)/numberOfColumns;
89
90
91
92     //用一个C语言的数组来存放所有列的最大的Y值
93     CGFloat maxYOfColumns[numberOfColumns];
94     for (int i=0; i<numberOfColumns; i++) {
95         //初始化数组的数值全部为0
96         maxYOfColumns[i]=0.0;
97     }
98
99
100     //计算每个cell的fram
101     for (int i=0; i<numberOfCells; i++) {
102
103         //(2)cell的高度
104         //询问代理i位置的高度
105         CGFloat cellH=[self heightAtIndex:i];
106
107         //cell处在第几列（最短的一列）
108         NSUInteger cellAtColumn=0;
109
110         //cell所处那列的最大的Y值（当前最短的那一列的最大的Y值）
111         //默认设置最短的一列为第一列（优化性能）
112         CGFloat maxYOfCellAtColumn=maxYOfColumns[cellAtColumn];
113
114         //求出最短的那一列
115         for (int j=0; j<numberOfColumns; j++) {
116             if (maxYOfColumns[j]<maxYOfCellAtColumn) {
117                 cellAtColumn=j;
118                 maxYOfCellAtColumn=maxYOfColumns[j];
119             }
120         }
121
122         //（3）cell的位置（X,Y）
123         //cell的X=左边的间距+列号*（cell的宽度+每列之间的间距）
124         CGFloat cellX=leftM+cellAtColumn*(cellW +columnM);
125         //cell的Y，先设定为0
126         CGFloat cellY=0;
127         if (maxYOfCellAtColumn==0.0) {//首行
128             cellY=topM;
129         }else
130         {
131             cellY=maxYOfCellAtColumn+rowM;
132         }
133
134         //设置cell的frame并添加到数组中
135         CGRect cellFrame=CGRectMake(cellX, cellY, cellW, cellH);
136         [self.cellFrames addObject:[NSValue valueWithCGRect:cellFrame]];
137
138         //更新最短那一列的最大的Y值
139         maxYOfColumns[cellAtColumn]=CGRectGetMaxY(cellFrame);
140
141         //显示cell
142 //        YYWaterflowViewCell *cell=[self.dadaSource waterflowView:self cellAtIndex:i];
143 //        cell.frame=cellFrame;
144 //        [self addSubview:cell];
145     }
146
147     //设置contentSize
148     CGFloat contentH=maxYOfColumns[0];
149     for (int i=1; i<numberOfColumns; i++) {
150         if (maxYOfColumns[i]>contentH) {
151             contentH=maxYOfColumns[i];
152         }
153     }
154     contentH += bottomM;
155     self.contentSize=CGSizeMake(0, contentH);
156 }
157
158 /**
159  *  当UIScrollView滚动的时候也会调用这个方法
160  */
161 -(void)layoutSubviews
162 {
163     [super layoutSubviews];
164
165
166     //向数据源索要对应位置的cell
167     NSUInteger numberOfCells=self.cellFrames.count;
168     for (int i=0; i<numberOfCells; i++) {
169         //取出i位置的frame,注意转换
170         CGRect cellFrame=[self.cellFrames[i] CGRectValue];
171
172         //优先从字典中取出i位置的cell
173         YYWaterflowViewCell *cell=self.displayingCells[@(i)];
174
175         //判断i位置对应的frame在不在屏幕上（能否看见）
176         if ([self isInScreen:cellFrame]) {//在屏幕上
177             if (cell==nil) {
178                cell= [self.dadaSource waterflowView:self cellAtIndex:i];
179                 cell.frame=cellFrame;
180                 [self addSubview:cell];
181
182                 //存放在字典中
183                 self.displayingCells[@(i)]=cell;
184             }
185
186         }else //不在屏幕上
187         {
188             if (cell) {
189                 //从scrollView和字典中删除
190                 [cell removeFromSuperview];
191                 [self.displayingCells removeObjectForKey:@(i)];
192
193                 //存放进缓存池
194                 [self.reusableCells addObject:cell];
195             }
196         }
197     }
198 //       NSLog(@"%d",self.subviews.count);
199 }
200
201 -(id)dequeueReusableCellWithIdentifier:(NSString *)identifier
202 {
203    __block YYWaterflowViewCell *reusableCell=nil;
204     [self.reusableCells enumerateObjectsUsingBlock:^(YYWaterflowViewCell *cell, BOOL *stop) {
205         if ([cell.identifier isEqualToString:identifier]) {
206             reusableCell=cell;
207             *stop=YES;
208         }
209     }];
210
211     if (reusableCell) {//从缓存池中移除（已经用掉了）
212         [self.reusableCells removeObject:reusableCell];
213     }
214     return reusableCell;
215 }
216
217 #pragma mark cell的事件处理
218 -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
219 {
220     //如果没有点击事件的代理方法，那么就直接返回
221     if (![self.delegate respondsToSelector:@selector(waterflowView:didSelectAtIndex:)])
222         return;
223
224     //获得手指在屏幕上点击的触摸点
225     UITouch *touch=[touches anyObject];
226 //    CGPoint point=[touch locationInView:touch.view];
227     CGPoint point=[touch locationInView:self];
228
229     __block NSNumber *selectIndex=nil;
230     [self.displayingCells enumerateKeysAndObjectsUsingBlock:^(id key, YYWaterflowViewCell *cell, BOOL *stop) {
231         if (CGRectContainsPoint(cell.frame, point)) {
232             selectIndex=key;
233             *stop=YES;
234         }
235     }];
236     if (selectIndex) {
237         //需要转换
238         [self.delegate waterflowView:self didSelectAtIndex:selectIndex.unsignedIntegerValue];
239     }
240
241 }
242 #pragma mark-私有方法
243 /**
244  *  判断一个人cell的frame有没有显示在屏幕上
245  */
246 -(BOOL)isInScreen:(CGRect)frame
247 {
248 //    return (CGRectGetMaxY(frame)>self.contentOffset.y)&&(CGRectGetMaxY(frame)<self.contentOffset.y+self.frame.size.height);
249     return (CGRectGetMaxY(frame) > self.contentOffset.y) &&
250     (CGRectGetMinY(frame) < self.contentOffset.y + self.frame.size.height);
251
252 }
253 -(CGFloat)marginForType:(YYWaterflowViewMarginType)type
254 {
255     if ([self.delegate respondsToSelector:@selector(waterflowView:marginForType:)]) {
256        return  [self.delegate waterflowView:self marginForType:type];
257     }else
258     {
259         return YYWaterflowViewDefaultMargin;
260     }
261 }
262
263 -(NSUInteger)numberOfColumns
264 {
265     if ([self.dadaSource respondsToSelector:@selector(numberOfColumnsInWaterflowView:)]) {
266         return [self.dadaSource numberOfColumnsInWaterflowView:self];
267     }else
268     {
269         return  YYWaterflowViewDefaultNumberOfClunms;
270     }
271 }
272
273 -(CGFloat)heightAtIndex:(NSUInteger)index
274 {
275     if ([self.delegate respondsToSelector:@selector(waterflowView:heightAtIndex:)]) {
276         return [self.delegate waterflowView:self heightAtIndex:index];
277     }else
278     {
279         return YYWaterflowViewDefaultCellH;
280     }
281 }
282 @end

实现效果：



点击对应的cell,能够监听并对点击事件进行处理。



三、补充说明

示例代码：





说明：

touch.view指的是子控件（单个cell）以这个cell的左上角为（0，0）进行坐标计算

self指的是整个瀑布流，以整个瀑布流的左上角为（0，0）进行坐标计算

打印查看：