【iOS】UITableView的上拉加载更多和下拉刷新原理

在iOS的实际项目中，我们会使用一些第三方库。其中使用较为频繁的一个就是上拉加载更多下拉刷新类的。比如MJRefresh和JHRefresh。一般使用就够了，可以满足我们的项目需求即可。但是作为我们程序员，我们还不能这样就结束了。从提升自己的角度，我们需要看大量的源码，需要知道第三方的实现原理。我就简单的写下我对UITableView的上拉加载更多和下拉刷新原理的理解。下面会列出的代码还存在问题，但是不影响我们理解UITableView的上拉加载更多和下拉刷新的原理。

首先上图：



这是我对UITableView的上拉加载更多和下拉刷新原理的理解所画的一张图，如有错误的地方欢迎拍砖。

我们知道UITableView是继承自UIScrollView的，那么我们就可以在UITableView里面使用UIScrollView的属性和方法。既然是上下拉，我们自然就会涉及到滚动，那么我们就需要仔细研究一下关于UIScrollView里面的一下滚动的属性和方法了。我个人认为只要是这么几个：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView;
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;
@property(nonatomic)         CGPoint              contentOffset;                  // default CGPointZero
@property(nonatomic)         CGSize               contentSize;                    // default CGSizeZero
@property(nonatomic)         UIEdgeInsets         contentInset;                   // default UIEdgeInsetsZero. add additional scroll area around content

关于上面的三个方法，下面的三个属性怎么使用。不要急，我们先看他们的名字。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView;

我们注意看两个关键字 Did和scroll。Did的do的过去式，表示完成。scroll是滚动，使滚动的意思。哪么这个方法的意思就是完成滚动。也就是在tableView完成滚动后调用的方法。下面的两个大家自己翻译。

下面的三个属性，属性的修饰只有一个nonatomic，意味着这个属性是可读可写的。 content的意思是内容，offset当前位置，size大小，inset嵌入。

上面的三个方法主要使用的是第一个

- (void)scrollViewDidScroll:(UIScrollView *)scrollView;

其他两个主要是为了获取调试的时候查看上面属性的数值。

那么上拉和下拉时的两个视图是怎么回事呢？先看效果图：





其实这两个视图是我们在增加上下拉的时候就存在了。给tableView增加一个顶部的子视图和一个底部的子视图，只是初始的时候这些视图在手机屏幕的外面。







上面的三张图展示了一个视图和手机屏幕的关系。

那么问题来了。我们什么时候需要显示出顶部视图？什么时候需要显示底部视图？怎么样在加载了顶部视图或是底部视图后暂停一下？怎么在操作完成后隐藏使显示复原？

再看看第一张图。使用一下上面的三个方法，打印一下contentOffset和contentSize这个两个属性，由于我们只是在Y轴操作，所以我们只需要打印关于Y轴的数值。

我是这么打印的：

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
NSLog(@"%s:%d", __func__, __LINE__);
NSLog(@"Decelerating_contentOffset = %f",self.tabelView.contentOffset.y);
NSLog(@"Decelerating_contentSize = %f",self.tabelView.contentSize.height);
NSLog(@"*******************************************");
}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
NSLog(@"%s:%d", __func__, __LINE__);
NSLog(@"Dragging_contentOffset = %f",self.tabelView.contentOffset.y);
NSLog(@"Dragging_contentSize = %f",self.tabelView.contentSize.height);
self.conoffSet = self.tabelView.contentOffset.y;
NSLog(@"*******************************************");
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
NSLog(@"%s:%d", __func__, __LINE__);
NSLog(@"S_contentOffset = %f",self.tabelView.contentOffset.y);
NSLog(@"S_contentSize = %f",self.tabelView.contentSize.height);
NSLog(@"*******************************************");
}

通过观察打印结果，我就分析出来了第一张图展示的坐标效果图。那么我们是不是可以在我们下拉到一定位置的时候，把我们tableView固定在一个位置，并且这个位置刚好可以显示出上下拉视图。

那么怎么做处理呢？还是先打印一下，一边滑动手机屏幕一边看打印规律。

是这么处理的，这里只是说明原理，所以处理比较粗糙。欢饮拍砖。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
NSLog(@"%s:%d", __func__, __LINE__);
NSLog(@"S_contentOffset = %f",self.tabelView.contentOffset.y);
NSLog(@"S_contentSize = %f",self.tabelView.contentSize.height);
if (self.tabelView.contentOffset.y <= -120) { //为什么是-120？这个自己数字只是测试，实际需要多少需要调试
[UIView animateWithDuration:5 animations:^{
NSLog(@"下拉刷新");
[self.tabelView setContentInset:UIEdgeInsetsMake(200, 0, 0, 0)]; //固定tableView视图
[self performSelector:@selector(huifu) withObject:nil afterDelay:2];
}];
}

if ((self.tabelView.contentSize.height - self.tabelView.contentOffset.y) <= 420) { //同上
[UIView animateWithDuration:5 animations:^{
NSLog(@"上拉加载更多");
[self.tabelView setContentInset:UIEdgeInsetsMake(64, 0, 200, 0)]; <span style="font-family: Arial, Helvetica, sans-serif;">//固定tableView视图</span>
[self performSelector:@selector(shangla) withObject:nil afterDelay:2];
}];
}
NSLog(@"*******************************************");
}
- (void)huifu{
[UIView animateWithDuration:2 animations:^{
NSLog(@"恢复");
[self.tabelView setContentInset:UIEdgeInsetsMake(64, 0, 0, 0)];
}];
}
- (void)shangla{
[UIView animateWithDuration:2 animations:^{ //这里可以不要cpmpletion
[self.tabelView setContentInset:UIEdgeInsetsMake(64, 0, 0, 0)];
} completion:^(BOOL finished) {
[self makeData:50];
[self.tabelView reloadData];
}];
}

下面就是工程的其他部分代码了：

#import "ViewController.h"

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>
@property (weak, nonatomic) IBOutlet UITableView *tabelView;
@property (nonatomic,strong)NSMutableArray *dataArray;
@property (nonatomic,assign)CGFloat conoffSet;

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
[self makeData:30];
self.tabelView.delegate = self;
self.tabelView.dataSource = self;

[self setHeadLabel];

NSLog(@"contentOffset = %f",self.tabelView.contentOffset.y);
NSLog(@"contentSize = %f",self.tabelView.contentSize.height);
// Do any additional setup after loading the view, typically from a nib.
}
- (void)makeData:(NSInteger)num{
self.dataArray = [NSMutableArray array];
for (int i = 0;i < num;i ++) {
[self.dataArray addObject:[NSString stringWithFormat:@"%d",i]];
}
}
- (void)setHeadLabel{
UILabel *refresh = [[UILabel alloc] init];
refresh.frame = CGRectMake(0, -64, 100, 64);
refresh.text = @"刷新";
refresh.textAlignment = NSTextAlignmentCenter;
refresh.textColor = [UIColor orangeColor];
[self.tabelView addSubview:refresh];

UIActivityIndicatorView * myAct = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
myAct.frame = CGRectMake(0, -64, 220, 64);
[myAct startAnimating];
[self.tabelView addSubview:myAct];
}
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return self.dataArray.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identify = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identify];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identify];
}
cell.textLabel.text = [NSString stringWithFormat:@"%ld",(long)indexPath.row];
return cell;
}

下面是效果图：





好了，上面只是一个简单的原理分析。

最后贴上代码下载---
请点击我 https://github.com/zhuming3834/Refrsh。
有时间还是要多研究一下源码。欢迎网友们多交流。