手动实现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上面,大家可以去参考,文章结尾会给出地址。


效果图:


总结:

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

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

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

comments powered by Disqus