iOS实现MJRefresh下拉刷新(上拉加载)使用详解

时间:2022-06-21 14:59:59

下拉刷新控件目前比较火的有好几种,本人用过mjrefresh 和 svpulltorefresh,相对而言,前者比后者可定制化、拓展新都更高一点。

因此本文着重讲一下mjrefresh的简单用法。

导入项目:

cocoapods导入:pod 'mjrefresh'

手动导入:

  •  将mjrefresh文件夹中的所有文件拽入项目中
  • 导入主头文件:#import "mjrefresh.h"

使用介绍:

iOS实现MJRefresh下拉刷新(上拉加载)使用详解

广泛性分为6种使用场景,分别对应:默认、动画图片、隐藏时间、隐藏时间和状态、自定义文字说明、以及自定义刷新控件。 

下面就各种场景分别讲一下:

1、默认场景

iOS实现MJRefresh下拉刷新(上拉加载)使用详解

包含刷新菊花、下拉说明、时间

使用代码:

?
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、使用动画图片

iOS实现MJRefresh下拉刷新(上拉加载)使用详解

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、下拉刷新 隐藏时间

 iOS实现MJRefresh下拉刷新(上拉加载)使用详解

这里与默认的区别就是不显示上次刷新时间,使用方法:

?
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、下拉刷新 隐藏状态和时间

iOS实现MJRefresh下拉刷新(上拉加载)使用详解

这个场景一般适用于只需要动画展示,简洁清爽,也是用的蛮多的。

同样,处理很简单。

?
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、文字大小、还是颜色都一句话搞定。

iOS实现MJRefresh下拉刷新(上拉加载)使用详解

iOS实现MJRefresh下拉刷新(上拉加载)使用详解

?
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、下拉刷新 自定义刷新控件

上面的都不够玩,怎么办,没关系,还有最后一种更定制化的方法:自己加控件样式。

iOS实现MJRefresh下拉刷新(上拉加载)使用详解

iOS实现MJRefresh下拉刷新(上拉加载)使用详解

iOS实现MJRefresh下拉刷新(上拉加载)使用详解

这里不限于任何控件,我们可以在头部的这片区域,尽情添加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