您的位置:

MJRefresh:iOS上最好用的下拉刷新框架

一、MJRefresh是什么

MJRefresh是一款非常优秀的下拉刷新框架,支持UITableView、UICollectionView、UIWebView、UIScrollView等常见的控件上使用下拉刷新,功能强大,使用灵活方便。下拉刷新是现代APP开发中常用的功能,通过下拉刷新能够及时地获取最新数据,增强用户体验,而MJRefresh就是在这个时代背景下生产出来的。

MJRefresh具有很多特点:

1. 下拉刷新和上拉刷新功能全面:不仅支持UITableView和UICollectionView,还支持UIScrollView、UIWebView等

2. 使用简单:创始人使用block回调方法,传统的代理方式已经废弃

3. 扩展性强:具有良好的扩展性,支持自定义控件,自定义控件需要继承MJRefreshStateHeader和MJRefreshAutoFooter。

4. 支持多种刷新动画效果:提供常用的刷新动画(gif、图片、水滴效果、旋转等)

总之,MJRefresh是一个强大并且易于使用的下拉刷新框架,是iOS开发中不可缺少的工具之一。

二、MJRefresh的使用

1. 基于UITableView使用

在使用UITableView的时候,只需要在UITableView上添加MJRefresh即可。

__weak typeof(self) weakSelf = self;
self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
    // 刷新数据的操作代码写在这里
    [weakSelf.tableView reloadData];
    // 结束刷新
    [weakSelf.tableView.mj_header endRefreshing];
}];

2. 基于UICollectionView使用

在使用UICollectionView的时候,只需要在UICollectionView上添加MJRefresh即可。

__weak typeof(self) weakSelf = self;
self.collectionView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
    // 加载更多数据的操作代码写在这里
    // ...
    // 结束加载更多
    [weakSelf.collectionView.mj_footer endRefreshing];
}];

3. 基于UIScrollView使用

在使用UIScrollView的时候,同样是添加MJRefresh。

__weak typeof(self) weakSelf = self;
self.scrollView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
    // 刷新数据的操作代码写在这里
    [weakSelf.scrollView reloadData];
    // 结束刷新
    [weakSelf.scrollView.mj_header endRefreshing];
}];

三、MJRefresh的进阶使用

1. 自定义刷新控件

如果你想要一个更炫酷的下拉刷新控件,可以考虑使用MJRefresh提供的自定义刷新控件。

比如我们可以自定义一个带有菊花的下拉刷新控件:

#import "MJRefreshStateHeader.h"

@interface CustomHeader : MJRefreshStateHeader

@property (nonatomic, strong) UIImageView *logo;
@property (nonatomic, strong) UIActivityIndicatorView *loading;

@end

@implementation CustomHeader

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.logo = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"yourLogo"]];
        [self addSubview:self.logo];

        self.loading = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
        [self addSubview:self.loading];
    }
    return self;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    self.logo.frame = CGRectMake(self.bounds.size.width/2.0-50, 20, 100, 30);
    self.loading.center = CGPointMake(self.bounds.size.width/2.0, 70);
}

- (void)setState:(MJRefreshState)state {
    [super setState:state];
    switch (state) {
        case MJRefreshStateIdle:
            self.loading.hidden = YES;
            [self.loading stopAnimating];
            break;
        case MJRefreshStatePulling:
            self.loading.hidden = YES;
            [self.loading stopAnimating];
            break;
        case MJRefreshStateRefreshing:
            self.loading.hidden = NO;
            [self.loading startAnimating];
            break;
        case MJRefreshStateWillRefresh:

            break;
        case MJRefreshStateNoMoreData:

            break;
    }
}

@end

使用这个自定义刷新控件只需要在初始化MJRefreshHeader时赋值即可:

self.tableView.mj_header = [CustomHeader headerWithRefreshingBlock:^{
    [weakSelf.tableView reloadData];
    [weakSelf.tableView.mj_header endRefreshing];
}];

2. 加载更多酷炫的动画:

还可以使用MJRefresh提供的多种刷新动画效果,使应用更加酷炫的效果,比如下面这个gif图:

这个gif效果使用步骤如下:

// 1. 初始化
MJRefreshGifHeader *header = [MJRefreshGifHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
// 2. 设置动画图片
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];
}
[header setImages:idleImages forState:MJRefreshStateIdle];
[header setImages:idleImages forState:MJRefreshStatePulling];
[header setImages:idleImages duration:1 forState:MJRefreshStateRefreshing];
// 3. 设置header
self.tableView.mj_header = header;

3. 自定义上拉加载更多的文字

在MjRefresh中可以定制上拉加载更多的文字,只需要在初始化MJRefreshAutoFooter时设置即可:

MJRefreshAutoNormalFooter *footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
    // 加载更多数据的操作代码写在这里
    // ...
    // 结束加载更多
    [weakSelf.collectionView.mj_footer endRefreshing];
}];
[footer setTitle:@"加载中..." forState:MJRefreshStateRefreshing];
[footer setTitle:@"松开加载更多" forState:MJRefreshStatePulling];
[footer setTitle:@"没有更多数据了" forState:MJRefreshStateNoMoreData];
self.collectionView.mj_footer = footer;

四、小结

MJRefresh是一款非常好用的下拉刷新框架,本文对其进行了详细的介绍。通过本文,我们可以了解到MJRefresh的基本使用方法,还学习了如何使用自定义下拉刷新控件、自定义上拉加载更多的文字、如何实现更多令人印象深刻的刷新动画。总之,MJRefresh是我们在iOS下拉刷新中不可缺少的一个工具。