实现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三者之间的关系，然后判断条件要注意尽可能详细。