IOS MJRefresh:下拉刷新与上拉加载

文章目录

  • MJRefresh简介
  • 举例
    • 1.准备
    • 2、添加相关属性
    • 3、初始化
    • 4.实现UITableView数据源方法
    • 5、实现下拉刷新与上拉加载
  • 代码

MJRefresh简介

MJRefresh用于为应用添加常用的上拉加载更多与下拉刷新效果,适用UIScrollView、UITableView 、 UICollectionView、UIWebView控件。它的类结构如下.
IOS MJRefresh:下拉刷新与上拉加载_第1张图片
图中红色文字的类,我们可以直接拿来使用。
MJRefresh中包含了多种上拉加载更多与下拉刷新的实现效果,开发者可以根据需求选取不同样式,主要为以下几种:
默认效果:
IOS MJRefresh:下拉刷新与上拉加载_第2张图片
自定义文字效果:
IOS MJRefresh:下拉刷新与上拉加载_第3张图片
动画效果:
IOS MJRefresh:下拉刷新与上拉加载_第4张图片
自定义控件效果:
IOS MJRefresh:下拉刷新与上拉加载_第5张图片

举例

1.准备

platform :ios, '7.0' #手机的系统
target '下拉刷新和上拉加载' do #工程名字
     pod 'MJRefresh' 
end

在要使用的地方导入头文件即可。

#import 

2、添加相关属性

  • randomData是随机生成的数据,做为程序网络获取的假数据
# define randomData [NSString stringWithFormat:@"随机数——%d",arc4random_uniform(1000000)]
  • moreDataFlag通过该值判断当前获取的数据量,为下次刷新提供数据量;dataArray用来存放假数据;
@interface ViewController ()
@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 ++;
}

IOS MJRefresh:下拉刷新与上拉加载_第6张图片

代码

删除了Pod install 产生的文件
https://github.com/ShaeZhuJiu/MJRefresh_base.git

你可能感兴趣的:(IOS,UI,TableView)