logo头像
Snippet 博客主题

MJRefresh使用

ios framework详解 2016/10/07

一、导入MJRefresh到项目中

cocoapods导入：pod ‘MJRefresh’
将MJRefresh文件夹中的所有内容拖拽进项目中。
两种方式任选其一。使用时别忘记引入头文件：#import “MJRefresh.h”

二、UITableView下拉刷新和上拉刷新

1

1 默认下拉界面

1
2
3
4
5
6
7
// 设置回调（一旦进入刷新状态就会调用这个refreshingBlock）
   self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
       //进行数据刷新操作
   }];
   
   // 马上进入刷新状态
   [self.tableView.mj_header beginRefreshing];

2 下拉刷新设置动画图片

1
2
3
4
5
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadNewData方法）
   self.tableView.mj_header = [MJChiBaoZiHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
   
   // 马上进入刷新状态
   [self.tableView.mj_header beginRefreshing];

ps：MJChiBaoZiHeader是继承自MJRefreshGifHeader，在这里面可以自定义加载动画图片

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
#import "MJChiBaoZiHeader.h"

@implementation MJChiBaoZiHeader
#pragma mark - 重写方法
#pragma mark 基本设置
- (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];
}
@end

3 默认下拉刷新+隐藏时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 设置回调（一旦进入刷新状态，就调用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
// 设置回调（一旦进入刷新状态，就调用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 默认下拉刷新+自定义文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadNewData方法）
   MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
   
   // 设置文字
   [header setTitle:@"Pull down to refresh" forState:MJRefreshStateIdle];
   [header setTitle:@"Release to refresh" forState:MJRefreshStatePulling];
   [header setTitle:@"Loading ..." forState:MJRefreshStateRefreshing];
   
   // 设置字体
   header.stateLabel.font = [UIFont systemFontOfSize:15];
   header.lastUpdatedTimeLabel.font = [UIFont systemFontOfSize:14];

   // 设置颜色
   header.stateLabel.textColor = [UIColor redColor];
   header.lastUpdatedTimeLabel.textColor = [UIColor blueColor];
   
   // 马上进入刷新状态
   [header beginRefreshing];
   
   // 设置刷新控件
   self.tableView.mj_header = header;

6 下拉刷新+自定义header

1
2
3
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadNewData方法）
  self.tableView.mj_header = [MJDIYHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
  [self.tableView.mj_header beginRefreshing];

MJDIYHeader是继承自MJRefreshHeader，在这里面进行自定义header视图的操作

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
#import "MJDIYHeader.h"

@interface MJDIYHeader()
//在这里声明子控件的全局变量
@end

@implementation MJDIYHeader
#pragma mark - 重写方法
#pragma mark 在这里做一些初始化配置（比如添加子控件）
- (void)prepare
{
    [super prepare];
    
    // 设置控件的高度
    self.mj_h = 50;
    
    // 在这里添加子控件
}

#pragma mark 在这里设置子控件的位置和尺寸
- (void)placeSubviews
{
    [super placeSubviews];

    //在这里设置子控件的位置和尺寸
}

#pragma mark 监听scrollView的contentOffset改变
- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change
{
    [super scrollViewContentOffsetDidChange:change];

}

#pragma mark 监听scrollView的contentSize改变
- (void)scrollViewContentSizeDidChange:(NSDictionary *)change
{
    [super scrollViewContentSizeDidChange:change];
    
}

#pragma mark 监听scrollView的拖拽状态改变
- (void)scrollViewPanStateDidChange:(NSDictionary *)change
{
    [super scrollViewPanStateDidChange:change];

}

#pragma mark 监听控件的刷新状态
- (void)setState:(MJRefreshState)state
{
    MJRefreshCheckState;

    switch (state) {
        case MJRefreshStateIdle:
             /** 普通闲置状态 */
            //在这里设置子控件在普通闲置状态的界面展示
            break;
        case MJRefreshStatePulling:
            /** 松开就可以进行刷新的状态 */
            //在这里设置子控件在松开就可以进行刷新的状态的界面展示
            break;
        case MJRefreshStateRefreshing:
            /** 正在刷新中的状态 */
            //在这里设置子控件在正在刷新中的状态的界面展示
            break;
        default:
            break;
    }
}

#pragma mark 监听拖拽比例（控件被拖出来的比例）
- (void)setPullingPercent:(CGFloat)pullingPercent
{
    [super setPullingPercent:pullingPercent];
}

@end

7 上拉刷新 默认界面

1
2
3
4
// 设置回调（一旦进入刷新状态就会调用这个refreshingBlock）
   self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
       [weakSelf loadMoreData];
   }];

8 上拉刷新+设置动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadMoreData方法）
    self.tableView.mj_footer = [MJChiBaoZiFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];

 #import "MJChiBaoZiFooter.h"

@implementation MJChiBaoZiFooter
#pragma mark - 重写方法
#pragma mark 基本设置
- (void)prepare
{
    [super prepare];
    
    // 设置正在刷新状态的动画图片
    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:MJRefreshStateRefreshing];
}
@end

9 上拉刷新 隐藏刷新状态的文字

1
2
3
4
5
6
7
8
9
10
11
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadMoreData方法）
  MJChiBaoZiFooter *footer = [MJChiBaoZiFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
  
  // 当上拉刷新控件出现50%时（出现一半），就会自动刷新。这个值默认是1.0（也就是上拉刷新100%出现时，才会自动刷新）
  //    footer.triggerAutomaticallyRefreshPercent = 0.5;
  
  // 隐藏刷新状态的文字
  footer.refreshingTitleHidden = YES;
  
  // 设置footer
  self.tableView.mj_footer = footer;

10 上拉刷新 禁止自动加载

1
2
3
4
5
6
7
8
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadMoreData方法）
  MJRefreshAutoNormalFooter *footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
  
  // 禁止自动加载
  footer.automaticallyRefresh = NO;
  
  // 设置footer
  self.tableView.mj_footer = footer;

11 上拉刷新 自定义文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadMoreData方法）
  MJRefreshAutoNormalFooter *footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
  
  // 设置文字
  [footer setTitle:@"Click or drag up to refresh" forState:MJRefreshStateIdle];
  [footer setTitle:@"Loading more ..." forState:MJRefreshStateRefreshing];
  [footer setTitle:@"No more data" forState:MJRefreshStateNoMoreData];

  // 设置字体
  footer.stateLabel.font = [UIFont systemFontOfSize:17];

  // 设置颜色
  footer.stateLabel.textColor = [UIColor blueColor];
  
  // 设置footer
  self.tableView.mj_footer = footer;

三、UIWebView的下拉刷新和上拉刷新

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)example31
{
    __weak UIWebView *webView = self.webView;
    webView.delegate = self;
    
    __weak UIScrollView *scrollView = self.webView.scrollView;
    
    // 添加下拉刷新控件
    scrollView.mj_header= [MJRefreshNormalHeader headerWithRefreshingBlock:^{
        [webView reload];
    }];
    
    // 如果是上拉刷新，就以此类推
}

#pragma mark - webViewDelegate
- (void)webViewDidFinishLoad:(nonnull UIWebView *)webView
{
    [self.webView.scrollView.mj_header endRefreshing];
}

四、UICollectionView的下拉刷新和上拉刷新

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
#pragma mark - 示例
#pragma mark UICollectionView 上下拉刷新
- (void)example21
{
    __weak __typeof(self) weakSelf = self;
    
    // 下拉刷新
    self.collectionView.mj_header= [MJRefreshNormalHeader headerWithRefreshingBlock:^{
        // 增加5条假数据
        for (int i = 0; i<10; i++) {
            [weakSelf.colors insertObject:MJRandomColor atIndex:0];
        }
        
        // 模拟延迟加载数据，因此2秒后才调用（真实开发中，可以移除这段gcd代码）
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(MJDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [weakSelf.collectionView reloadData];
            
            // 结束刷新
            [weakSelf.collectionView.mj_header endRefreshing];
        });
    }];
    [self.collectionView.mj_header beginRefreshing];

    // 上拉刷新
    self.collectionView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingBlock:^{
        // 增加5条假数据
        for (int i = 0; i<5; i++) {
            [weakSelf.colors addObject:MJRandomColor];
        }
        
        // 模拟延迟加载数据，因此2秒后才调用（真实开发中，可以移除这段gcd代码）
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(MJDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [weakSelf.collectionView reloadData];
            
            // 结束刷新
            [weakSelf.collectionView.mj_footer endRefreshing];
        });
    }];
    // 默认先隐藏footer
    self.collectionView.mj_footer.hidden = YES;
}
赏
微信打赏

赞赏是不耍流氓的鼓励

转载声明：商业转载请联系作者获得授权,非商业转载请注明出处 © Snippet
Copyright © 2017 | Powered by Hexo | Theme by Snippet