MJRefresh的使用:下拉刷新与上拉加载
在移动网络应用中,一般情况下都要实现上拉加载与下拉刷新操作。这两个功能我们可以使用国内开发者开发的一款优秀框架–MJRefresh来实现。此篇文章我们通过操作UITableView控件来实现MJRefresh的基本功能。
0、MJRefresh简介
- MJRefresh用于为应用添加常用的上拉加载更多与下拉刷新效果,适用UIScrollView、UITableView 、 UICollectionView、UIWebView控件。它的类结构如下:
图中红色文字的类,我们可以直接拿来使用。
- MJRefresh中包含了多种上拉加载更多与下拉刷新的实现效果,开发者可以根据需求选取不同样式,主要为以下几种:
默认效果:
自定义文字效果:
动画效果:
自定义控件效果:
1、准备工作
MJRefresh可以使用手工方式以及CocoPods两种方式导入工程,这里我们以手工导入的方式为例。
首先到github上下载MJRefresh:https://github.com/CoderMJLee/MJRefresh
下载完成后将图中所示文件夹拖入项目中
- 在要使用的地方导入头文件即可。
#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 ++;
}
运行效果:
文章发布时间为: December 13th , 2016 at 10:36 am
最后编辑时间为: December 13th , 2016 at 02:36 am
本文由 99ios 创作,转载请注明出处
最后编辑时间为: December 13th , 2016 at 02:36 am
本文由 99ios 创作,转载请注明出处