实现TableView的上拉加载和下拉刷新

项目开发过程中经常会用到tableview来加载网络数据，而经常要用到的一个功能就是下拉刷新，上拉加载更多。虽然有很多第三方框架可以使用，但是有时我们还是想自己手动定制来达到目的。

下面我们来具体看看如何实现

---

下拉刷新

这个功能我们可以使用系统自带的refreshControl，但是这个控件只能用在tableViewController里面。

具体实现看代码：

viewController.m 文件
==========================
@interface ViewController ()<UITableViewDelegate, UITableViewDataSource>
@property (strong ,nonatomic)NSMutableArray *modelArray;
@end

@implementation ViewController

static NSString *const CellId = @"cell";

- (NSMutableArray *)modelArray{
    if (!_modelArray) {
        _modelArray = [NSMutableArray array];
    }
    return _modelArray;
}


- (void)viewDidLoad{
    [super viewDidLoad];
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
    
    UIRefreshControl *refresh = [[UIRefreshControl alloc]init];
    refresh.attributedTitle = [[NSAttributedString alloc]initWithString:@"下拉刷新"];
    [refresh addTarget:self action:@selector(refresh) forControlEvents:UIControlEventValueChanged];
    self.refreshControl = refresh;

   [self.refreshControl beginRefreshing];
}


- (void)refresh{
    if (self.refreshControl.isRefreshing){
        [self.modelArray removeAllObjects];//清除旧数据，每次都加载最新的数据
        self.refreshControl.attributedTitle = [[NSAttributedString alloc]initWithString:@"加载中..."];
        [self addData];
        self.refreshControl.attributedTitle = [[NSAttributedString alloc]initWithString:@"下拉刷新"];
        [self.tableView reloadData];
        [self.refreshControl endRefreshing];

    }
}

//加载数据
- (void)addData{
    NSDate *date = [[NSDate alloc]init];
    for (int i = 0; i < 20; i++) {
        [self.modelArray addObject:date];
    }
}

- (NSInteger )tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return  self.modelArray.count;
}

- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *cellId = @"cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellId];
    if (cell == nil) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:cellId];
    }
    
    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc]init];
    [dateFormatter setDateFormat:@"yyyy-MM-dd HH:mm:ss zzz"];
    cell.textLabel.text = [dateFormatter stringFromDate:self.modelArray[indexPath.row]];
    return cell;
}

效果图如下：

问题：

可以看到页面刚加载的时候是没有数据的，虽然我们使用 [self.refreshControl beginRefreshing]触发了refreshcontrol开始旋转。但是并没有触发方法refresh方法，当你手动往下拉触发refreshControl开始旋转才能触发refresh方法。

这说明在其他方法里面触发系统的benginRefresh方法是不会触发代码[refresh addTarget:self action:@selector(refresh) forControlEvents:UIControlEventValueChanged]执行的。

分析：

这表明benginRefresh方法并没有监听UIControlEventValueChanged，那要怎么做呢？我们可以对系统的refreshcontrol控件进行封装，然后重写beginRefresh和endRefresh方法，在这两个方法里面监听UIControlEventValueChanged就可以了。

解决方案

在viewcontroller.m文件的头部直接添加一个封装的refreshControl

@interface WSRefreshControl : UIRefreshControl

@end

@implementation WSRefreshControl

-(void)beginRefreshing
{
    [super beginRefreshing];
    [self sendActionsForControlEvents:UIControlEventValueChanged];
}

-(void)endRefreshing
{
    [super endRefreshing];
    [self sendActionsForControlEvents:UIControlEventValueChanged];
}
@end

在viewcontroller.m文件的viewDidLoad中修改代码如下：
UIRefreshControl *refresh = [[WSRefreshControl alloc]init]
这个时候，进入页面就可以触发refresh方法了。

---

上拉加载

我们先来看一张图：

当tableview滚动到底部的时候，
手机屏幕高度+contentoffset.y=contentSize.height。那么当再向上拖拽tableview到橙色区域的时候，这个时候contentoffset.y继续增大，导致手机屏幕高度+contentoffset.y > contentSize.height。

这个时候我们就说明用户在tableview到达了最底部，还在向上拖拽，想看到更多的内容。我们就可以调用加载更多的方法来加载更多数据了。

实现代码：

viewController.m文件
========================
#import "ViewController.h"
#import "SGLoadMoreView.h"

/*************自定义UIRefreshControl*******************/

@interface WSRefreshControl : UIRefreshControl

@end

@implementation WSRefreshControl

-(void)beginRefreshing
{
    [super beginRefreshing];
    [self sendActionsForControlEvents:UIControlEventValueChanged];
}

-(void)endRefreshing
{
    [super endRefreshing];
    [self sendActionsForControlEvents:UIControlEventValueChanged];
}
@end

/******************************************************/

@interface ViewController ()<UITableViewDelegate, UITableViewDataSource>
@property (strong ,nonatomic)NSMutableArray *modelArray;
@property (strong,nonatomic)SGLoadMoreView *loadMoreView;
@end

@implementation ViewController

static NSString *const CellId = @"cell";


- (NSMutableArray *)modelArray{
    if (!_modelArray) {
        _modelArray = [NSMutableArray array];
    }
    return _modelArray;
}


- (void)viewDidLoad{
    [super viewDidLoad];
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
    
    UIRefreshControl *refresh = [[UIRefreshControl alloc]init];
    refresh.attributedTitle = [[NSAttributedString alloc]initWithString:@"下拉刷新"];
    [refresh addTarget:self action:@selector(refresh) forControlEvents:UIControlEventValueChanged];
    self.refreshControl = refresh;
    
    self.loadMoreView = [[SGLoadMoreView alloc]initWithFrame:CGRectMake(0, 0, self.tableView.frame.size.width, 44)];
    self.tableView.tableFooterView = self.loadMoreView;
    
    [self.refreshControl beginRefreshing];
}


- (void)refresh{
    if (self.refreshControl.isRefreshing && self.loadMoreView.isAnimating ==NO){
        [self.modelArray removeAllObjects];//清除旧数据，每次都加载最新的数据
        self.refreshControl.attributedTitle = [[NSAttributedString alloc]initWithString:@"加载中..."];
        [self addData];
        self.refreshControl.attributedTitle = [[NSAttributedString alloc]initWithString:@"下拉刷新"];
        [self.tableView reloadData];
        [self.refreshControl endRefreshing];
        self.loadMoreView.tipsLabel.hidden = YES;

    }
}

- (void)loadMore{
    [self addData];
    [self.loadMoreView stopAnimation];//数据加载成功后停止旋转菊花
    [self.tableView reloadData];
    
    if (self.modelArray.count > 60) {//当数据条目大于60的时候，提示没有更多数据。如果是网络数据，那么就是服务器没有数据返回的时候触发该方法
        [self.loadMoreView noMoreData];
    }
}

//加载数据
- (void)addData{
    NSDate *date = [[NSDate alloc]init];
    for (int i = 0; i < 20; i++) {
        [self.modelArray addObject:date];
    }
}


- (NSInteger )tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return  self.modelArray.count;
}

- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *cellId = @"cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellId];
    if (cell == nil) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:cellId];
    }
    
    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc]init];
    [dateFormatter setDateFormat:@"yyyy-MM-dd HH:mm:ss zzz"];
    cell.textLabel.text = [dateFormatter stringFromDate:self.modelArray[indexPath.row]];
    return cell;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGFloat currentOffsetY = scrollView.contentOffset.y;
    /*self.refreshControl.isRefreshing == NO加这个条件是为了防止下面的情况发生：
    每次进入UITableView，表格都会沉降一段距离，这个时候就会导致currentOffsetY + scrollView.frame.size.height   > scrollView.contentSize.height 被触发，从而触发loadMore方法，而不会触发refresh方法。
     */
    if ( currentOffsetY + scrollView.frame.size.height  > scrollView.contentSize.height &&  self.refreshControl.isRefreshing == NO  && self.loadMoreView.isAnimating == NO && self.loadMoreView.tipsLabel.isHidden ){
        [self.loadMoreView startAnimation];//开始旋转菊花
        [self loadMore];
    }
    NSLog(@"%@ ---%f----%f",NSStringFromCGRect(scrollView.frame),currentOffsetY,scrollView.contentSize.height);

}

上面给出了viewcontroller的所有代码，包括前面的下拉刷新。但是没有给出SGLoadMoreView的代码，但是我把整个Demo放到了githu上面，大家可以去参考。

最后给出Demo的地址：https://github.com/XiMu-Demo/Refresh-loadMore

---

效果图：

---

总结：

上拉刷新我们使用了系统的控件refreshControl，但是发现不能满足我们的要求，我们可以对系统控件进行二度封装变成自己的控件。

上拉加载主要要搞清楚contentoffset，屏幕高度，contentsize三者之间的关系，然后判断条件要注意尽可能详细。