下拉刷新控件目前比较火的有好几种，本人用过mjrefresh 和 svpulltorefresh，相对而言，前者比后者可定制化、拓展新都更高一点。
因此本文着重讲一下mjrefresh的简单用法。
导入项目：
cocoapods导入：pod 'mjrefresh'
手动导入：
- 将mjrefresh文件夹中的所有文件拽入项目中
- 导入主头文件：#import "mjrefresh.h"
使用介绍：
广泛性分为6种使用场景，分别对应：默认、动画图片、隐藏时间、隐藏时间和状态、自定义文字说明、以及自定义刷新控件。
下面就各种场景分别讲一下：
1、默认场景
包含刷新菊花、下拉说明、时间
使用代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
#pragma mark uitableview + 下拉刷新 默认- (void)example01{ __weak __typeof(self) weakself = self; // 设置回调（一旦进入刷新状态就会调用这个refreshingblock） self.tableview.mj_header = [mjrefreshnormalheader headerwithrefreshingblock:^{ [weakself loadnewdata]; }]; // 马上进入刷新状态 [self.tableview.mj_header beginrefreshing];} |
2、使用动画图片
ps：这里的动画并不是用gif实现的，而是利用序列帧（即若干图片组成一个不同状态下的图片数组，然后根据位置显示不同图片）去展现。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
#pragma mark uitableview + 下拉刷新 动画图片- (void)example02{ // 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadnewdata方法） self.tableview.mj_header = [mjchibaoziheader headerwithrefreshingtarget:self refreshingaction:@selector(loadnewdata)]; // 马上进入刷新状态 [self.tableview.mj_header beginrefreshing];} |
这里用大众点评吃包子图片为例，新建一个自定义类 mjchibaoziheader，继承：mjrefreshgifheader
|
1
2
3
4
5
|
#import "mjrefreshgifheader.h" @interface mjchibaoziheader : mjrefreshgifheader @end |
然后重写prepare方法，代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
- (void)prepare{ [super prepare]; // 设置普通状态的动画图片 nsmutablearray *idleimages = [nsmutablearray array]; for (nsuinteger i = 1; i<=60; i++) { uiimage *image = [uiimage imagenamed:[nsstring stringwithformat:@"dropdown_anim__000%zd", i]]; [idleimages addobject:image]; } [self setimages:idleimages forstate:mjrefreshstateidle]; // 设置即将刷新状态的动画图片（一松开就会刷新的状态） nsmutablearray *refreshingimages = [nsmutablearray array]; for (nsuinteger i = 1; i<=3; i++) { uiimage *image = [uiimage imagenamed:[nsstring stringwithformat:@"dropdown_loading_0%zd", i]]; [refreshingimages addobject:image]; } [self setimages:refreshingimages forstate:mjrefreshstatepulling]; // 设置正在刷新状态的动画图片 [self setimages:refreshingimages forstate:mjrefreshstaterefreshing];} |
关键点就是这里的两个图片数组，60是因为下拉控件默认拉动距离就是60距离，这里比较严谨，利用60张不同图片去对应每个距离点，当然实际中，我们可以缩减，不需要精确到每个距离点对应一张图片，这里个人自己决定。
这里需要先了解下，下拉的五种状态。如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
/** 刷新控件的状态 */typedef ns_enum(nsinteger, mjrefreshstate) { /** 普通闲置状态 */ mjrefreshstateidle = 1, /** 松开就可以进行刷新的状态 */ mjrefreshstatepulling, /** 正在刷新中的状态 */ mjrefreshstaterefreshing, /** 即将刷新的状态 */ mjrefreshstatewillrefresh, /** 所有数据加载完毕，没有更多的数据了 */ mjrefreshstatenomoredata}; |
idleimages图片数组对应闲置下拉状态，表示下拉到临界值前的展示图片。
refreshingimages图片数组对应正在刷新时的动画展示图片，一般这里需要3～5张图片去模拟动画。<br><br>重写完<span class="s1">prepare方法，就可以实现动画了。<br><br></span>
3、下拉刷新 隐藏时间
这里与默认的区别就是不显示上次刷新时间，使用方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
#pragma mark uitableview + 下拉刷新 隐藏时间- (void)example03{ // 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadnewdata方法） mjrefreshnormalheader *header = [mjrefreshnormalheader headerwithrefreshingtarget:self refreshingaction:@selector(loadnewdata)]; // 设置自动切换透明度(在导航栏下面自动隐藏) header.automaticallychangealpha = yes; // 隐藏时间 header.lastupdatedtimelabel.hidden = yes; // 马上进入刷新状态 [header beginrefreshing]; // 设置header self.tableview.mj_header = header;} |
4、下拉刷新 隐藏状态和时间
这个场景一般适用于只需要动画展示，简洁清爽，也是用的蛮多的。
同样，处理很简单。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
#pragma mark uitableview + 下拉刷新 隐藏状态和时间- (void)example04{ // 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadnewdata方法） mjchibaoziheader *header = [mjchibaoziheader headerwithrefreshingtarget:self refreshingaction:@selector(loadnewdata)]; // 隐藏时间 header.lastupdatedtimelabel.hidden = yes; // 隐藏状态 header.statelabel.hidden = yes; // 马上进入刷新状态 [header beginrefreshing]; // 设置header self.tableview.mj_header = header;} |
5、下拉刷新 自定义文字
想自己diy个性文字描述，一样很简单。
不管是文字text、文字大小、还是颜色都一句话搞定。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
#pragma mark uitableview + 下拉刷新 自定义文字- (void)example05{ // 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadnewdata方法） mjrefreshnormalheader *header = [mjrefreshnormalheader headerwithrefreshingtarget:self refreshingaction:@selector(loadnewdata)]; // 设置文字 [header settitle:@"快扯我，快点" forstate:mjrefreshstateidle]; [header settitle:@"数据要来啦" forstate:mjrefreshstatepulling]; [header settitle:@"服务器正在狂奔 ..." forstate:mjrefreshstaterefreshing]; // 设置字体 header.statelabel.font = [uifont systemfontofsize:15]; header.lastupdatedtimelabel.font = [uifont systemfontofsize:14]; // 设置颜色 header.statelabel.textcolor = [uicolor redcolor]; header.lastupdatedtimelabel.textcolor = [uicolor graycolor]; // 马上进入刷新状态 [header beginrefreshing]; // 设置刷新控件 self.tableview.mj_header = header;} |
6、下拉刷新 自定义刷新控件
上面的都不够玩，怎么办，没关系，还有最后一种更定制化的方法：自己加控件样式。
这里不限于任何控件，我们可以在头部的这片区域，尽情添加subviews，但记住一点，高度千万不要吵过header高度（默认60）。
除了控件，甚至可以自己绘制动画等等。
实现原理：同样先自定义自己的类，继承 mjrefreshheader
重写 prepare 方法，再重写 placesubviews 方法 设置位置。
代码：
a、定义控件属性
|
1
2
3
4
5
6
7
8
9
10
11
|
@interface mjdiyheader()@property (weak, nonatomic) uilabel *label;@property (weak, nonatomic) uiswitch *s;@property (weak, nonatomic) uiimageview *logo;@property (weak, nonatomic) uiactivityindicatorview *loading;@end |
b、重写prepare方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
#pragma mark 在这里做一些初始化配置（比如添加子控件）- (void)prepare{ [super prepare]; // 设置控件的高度 self.mj_h = 50; // 添加label uilabel *label = [[uilabel alloc] init]; label.textcolor = [uicolor colorwithred:1.0 green:0.5 blue:0.0 alpha:1.0]; label.font = [uifont boldsystemfontofsize:16]; label.textalignment = nstextalignmentcenter; [self addsubview:label]; self.label = label; // 打酱油的开关 uiswitch *s = [[uiswitch alloc] init]; [self addsubview:s]; self.s = s; // logo uiimageview *logo = [[uiimageview alloc] initwithimage:[uiimage imagenamed:@"logo"]]; logo.contentmode = uiviewcontentmodescaleaspectfit; [self addsubview:logo]; self.logo = logo; // loading uiactivityindicatorview *loading = [[uiactivityindicatorview alloc] initwithactivityindicatorstyle:uiactivityindicatorviewstylegray]; [self addsubview:loading]; self.loading = loading;} |
c、重写 placesubviews
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
#pragma mark 在这里设置子控件的位置和尺寸- (void)placesubviews{ [super placesubviews]; self.label.frame = self.bounds; self.logo.bounds = cgrectmake(0, 0, self.bounds.size.width, 100); self.logo.center = cgpointmake(self.mj_w * 0.5, - self.logo.mj_h + 20); self.loading.center = cgpointmake(self.mj_w - 30, self.mj_h * 0.5);} |
d、根据下拉位移，自定义不同位移的控件展示，比如显示不同文字，颜色等
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
#pragma mark 监听控件的刷新状态- (void)setstate:(mjrefreshstate)state{ mjrefreshcheckstate; switch (state) { case mjrefreshstateidle: [self.loading stopanimating]; [self.s seton:no animated:yes]; self.label.text = @"赶紧下拉吖(开关是打酱油滴)"; break; case mjrefreshstatepulling: [self.loading stopanimating]; [self.s seton:yes animated:yes]; self.label.text = @"赶紧放开我吧(开关是打酱油滴)"; break; case mjrefreshstaterefreshing: [self.s seton:yes animated:yes]; self.label.text = @"加载数据中(开关是打酱油滴)"; [self.loading startanimating]; break; default: break; }} |
上拉刷新加载其实和下拉是同理，只不过区别就是：
self.tableview.mj_header 变成 self.tableview.mj_footer，后面的类也由
mjrefreshnormalheader 变成 mjrefreshautonormalfooter。
实现原理是相同的。
下载源码：mjrefresh.rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：http://www.cnblogs.com/yajunLi/p/5735990.html
