iOS MJRefresh 自定义刷新动画_ios开发 mjrefresh 自定义动画

前言

项目开发中用了MJRefres 刷新控件，但是MJRefresh默认的加载样式感觉比较丑，产品觉得需要换个样式，弄的简洁一点。于是着手看了一下MJRefresh的源码，发现其提供了修改样式的方法。

从MJRefresh的继承图谱来看，带动画的下拉刷新类为：MJRefreshGifHeader，带动画的上拉刷新类为：MJRefreshBackGifFooter。我们只需要分别继承这两个类，然后把加载动画的功能重写一下就可以实现了。

一、自定义下拉刷新动画

自己重新创建一个类：HSRefreshGifHeader，继承 MJRefreshGifHeader。具体代码如下：

#import "MJRefreshGifHeader.h"

@interface HSRefreshGifHeader : MJRefreshGifHeader

@end
1
2
3
4
5

#import "HSRefreshGifHeader.h"

@implementation HSRefreshGifHeader

#pragma mark - 实现父类的方法
- (void)prepare {
    [super prepare];
    //GIF数据
    NSArray * idleImages = [self getRefreshingImageArrayWithStartIndex:1 endIndex:8];
    NSArray * refreshingImages = [self getRefreshingImageArrayWithStartIndex:1 endIndex:8];
    //普通状态
    [self setImages:idleImages forState:MJRefreshStateIdle];
    //即将刷新状态
    [self setImages:refreshingImages forState:MJRefreshStatePulling];
    //正在刷新状态
    [self setImages:refreshingImages forState:MJRefreshStateRefreshing];
}

- (void)placeSubviews {
    [super placeSubviews];
    //隐藏状态显示文字
    self.stateLabel.hidden = YES;
    //隐藏更新时间文字
    self.lastUpdatedTimeLabel.hidden = YES;
}

#pragma mark - 获取资源图片
- (NSArray *)getRefreshingImageArrayWithStartIndex:(NSInteger)startIndex endIndex:(NSInteger)endIndex {
    NSMutableArray * imageArray = [NSMutableArray array];
    for (NSUInteger i = startIndex; i <= endIndex; i++) {
        UIImage * image = [UIImage imageNamed:[NSString stringWithFormat:@"Loading_%zd.tiff",i]];
        if (image) {
            [imageArray addObject:image];
        }
    }
    return imageArray;
}

@end
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

二、自定义上拉刷新动画

自己重新创建一个类：HSRefreshGifFooter，继承 MJRefreshBackGifFooter。具体代码如下：

#import "MJRefreshBackGifFooter.h"

@interface HSRefreshGifFooter : MJRefreshBackGifFooter

@end
1
2
3
4
5

#import "HSRefreshGifFooter.h"

@interface HSRefreshGifFooter ()

@end

@implementation HSRefreshGifFooter

#pragma mark - 实现父类的方法
- (void)prepare {
    [super prepare];
    //GIF数据
    NSArray * idleImages = [self getRefreshingImageArrayWithStartIndex:1 endIndex:8];
    NSArray * refreshingImages = [self getRefreshingImageArrayWithStartIndex:1 endIndex:8];
   // 普通状态
    [self setImages:idleImages forState:MJRefreshStateIdle];
    //即将刷新状态
    [self setImages:refreshingImages forState:MJRefreshStatePulling];
    //正在刷新状态
    [self setImages:refreshingImages forState:MJRefreshStateRefreshing];
}

- (void)placeSubviews {
    [super placeSubviews];
    
    self.stateLabel.hidden = self.state != MJRefreshStateNoMoreData;
}

- (void)scrollViewContentSizeDidChange:(NSDictionary *)change
{
    [super scrollViewContentSizeDidChange:change];
    
    // 内容的高度
    CGFloat contentHeight = self.scrollView.mj_contentH + self.ignoredScrollViewContentInsetBottom;
    // 表格的高度
    CGFloat scrollHeight = self.scrollView.mj_h - self.scrollViewOriginalInset.top - self.scrollViewOriginalInset.bottom + self.ignoredScrollViewContentInsetBottom;
    // 设置位置和尺寸
    self.mj_y = MAX(contentHeight, scrollHeight);
    
}

#pragma mark - 获取资源图片
- (NSArray *)getRefreshingImageArrayWithStartIndex:(NSInteger)startIndex endIndex:(NSInteger)endIndex {
    NSMutableArray * imageArray = [NSMutableArray array];
    for (NSUInteger i = startIndex; i <= endIndex; i++) {
        UIImage * image = [UIImage imageNamed:[NSString stringWithFormat:@"Loading_%zd.tiff",i]];
        if (image) {
            [imageArray addObject:image];
        }
    }
    return imageArray;
}

@end
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

三、如何使用

//导入相关头文件
#import "HSRefreshGifHeader.h"
#import "HSRefreshGifFooter.h"

 //下拉刷新
 self.tableView.mj_header = [HSRefreshGifHeader headerWithRefreshingBlock:^{
     self.page = 1;
     [self.arrData removeAllObjects];
     [self requestData];
 }];
    
 //上拉加载更多
 self.tableView.mj_footer = [HSRefreshGifFooter footerWithRefreshingBlock:^{
     self.page ++;
     [self requestData];
 }];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

自己准备好动画图片：

资源下载：https://download.csdn.net/download/u010545480/86018815