免费开源的iOS开发学习平台

MJRefresh的使用:下拉刷新与上拉加载

在移动网络应用中,一般情况下都要实现上拉加载与下拉刷新操作。这两个功能我们可以使用国内开发者开发的一款优秀框架–MJRefresh来实现。此篇文章我们通过操作UITableView控件来实现MJRefresh的基本功能。

0、MJRefresh简介

  • MJRefresh用于为应用添加常用的上拉加载更多与下拉刷新效果,适用UIScrollView、UITableView 、 UICollectionView、UIWebView控件。它的类结构如下:

图中红色文字的类,我们可以直接拿来使用。

  • MJRefresh中包含了多种上拉加载更多与下拉刷新的实现效果,开发者可以根据需求选取不同样式,主要为以下几种:

默认效果:

自定义文字效果:

动画效果:

自定义控件效果:

1、准备工作

MJRefresh可以使用手工方式以及CocoPods两种方式导入工程,这里我们以手工导入的方式为例。

  • 在要使用的地方导入头文件即可。
#import "MJRefresh.h"

2、添加相关属性

  • randomData是随机生成的数据,做为程序网络获取的假数据;
# define randomData [NSString stringWithFormat:@"随机数——%d",arc4random_uniform(1000000)]
  • moreDataFlag通过该值判断当前获取的数据量,为下次刷新提供数据量;dataArray用来存放假数据;
@interface ViewController ()<UITableViewDataSource>
@property(nonatomic,strong)UITableView *tableView;
@property(nonatomic,copy)NSMutableArray *dataArray;
@property int moreDataFlag;
@end

3、初始化

  • 初始化数组,添加一些测试数据。
- (NSMutableArray *)dataArray {
    if (_dataArray == nil) {
        _dataArray = [NSMutableArray array];
        for (int i = 0; i < 5; i++) {
            [_dataArray addObject:randomData];
        }
    }
    return _dataArray;
}
  • 通过懒加载的方式初始化UITableView,并对其做一些简单的设置。
- (UITableView *)tableView {
    if (_tableView == nil) {
        _tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 30, CGRectGetWidth(self.view.bounds), CGRectGetHeight(self.view.bounds)- 30) style:UITableViewStylePlain];
        _tableView.dataSource = self;
        self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
                [self loadNewData];
        }];
        self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
    }
    return _tableView;
}
  • 添加tableView,设定moreDataFlag初始值。
- (void)viewDidLoad {
    [super viewDidLoad];
    self.moreDataFlag = 1;
    [self.view addSubview:self.tableView];
}

4、实现UITableView数据源方法

  • 返回单元格数量
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return  self.dataArray.count;
}
  • 返回单元格的具体样式和显示内容。
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *identifier = @"cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
    }
    cell.textLabel.text = self.dataArray[indexPath.row];
    return cell;
}

5、实现下拉刷新与上拉加载

  • 下拉刷新数据。
- (void)loadNewData {
    //刷新前先移除表中数据
    [self.dataArray removeAllObjects];
    // 1.添加与移除前数据等量的新数据
    for (int i = 0; i<5 * self.moreDataFlag; i++) {
        [self.dataArray insertObject:randomData atIndex:0];
    }
    // 2.模拟2秒后刷新表格UI(真实开发中,可以移除这段gcd代码)
    __weak UITableView *tableView = self.tableView;
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0* NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        // 刷新表格
        [tableView reloadData];
        // 拿到当前的下拉刷新控件,结束刷新状态
        [tableView.mj_header endRefreshing];
    });
}
  • 上拉加载更多数据。
- (void)loadMoreData {
    // 1.添加假数据
    for (int i = 0; i<5; i++) {
        [self.dataArray addObject:randomData];
    }
    // 2.模拟2秒后刷新表格UI(真实开发中,可以移除这段gcd代码)
    __weak UITableView *tableView = self.tableView;
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0* NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        // 刷新表格
        [tableView reloadData];
        //做多展示20组数据
        if (self.dataArray.count >= 20) {
            //加载最后一份数据后,变为没有更多数据的状态
            [tableView.mj_footer endRefreshingWithNoMoreData];
        }else{
            // 拿到当前的上拉加载控件,结束刷新状态
            [tableView.mj_footer endRefreshing];
        }  
    });
    self.moreDataFlag ++;
}

运行效果: