国内好多开发者选择MJRefresh来实现下拉刷新，最近我也在读他的源码，在这我分享下我理解的实现的原理
下拉刷新的基本原理
- 一般的下拉刷新都是用<code>contentInset</code>来实现的，如果一个tableView在导航栏的正下方，那么他的<code>contentInset.top</code>就是64，<code>contentOffset.y</code>就是-64。继续下拉<code>contentInset.top</code>不变，<code>contentOffset.y</code>变小，上拉<code>contentOffset.y</code> 变大，直到左上角达到屏幕的左上角变为0。
- 默认情况下，下拉一个tableView，在松手之后，会弹回初始的位置。而下拉刷新控件，就是将自己放在tableView的上方，初始y设置成负数，所以平时不会显示出来，只有下拉的时候才会出现，放开又会弹回去。然后在loading的时候，临时把<code>contentInset</code>增大，相当于把tableView往下挤，于是下拉刷新的控件就会显示出来，然后刷新完成之后，再把<code>contentInset</code>改回原来的值，实现回弹的效果
关键代码分析实现
- 从创建实例的代码开始
[self.tableView addHeaderWithTarget:self action:@selector(loadNewData)];
[self.tableView headerEndRefreshing];
- 这是tagetAction方法，还有一种block方法，在方法中写着真正的headerView初始化方法
- (void)addHeaderWithTarget:(id)target action:(SEL)action
{
[self addHeaderWithTarget:target action:action dateKey:nil];
}
- (void)addHeaderWithTarget:(id)target action:(SEL)action dateKey:(NSString*)dateKey
{
// 1.创建新的header
if (!self.header) {
MJRefreshHeaderView *header = [MJRefreshHeaderView header];
[self addSubview:header];
self.header = header;
}
// 2.设置目标和回调方法
self.header.beginRefreshingTaget = target;
self.header.beginRefreshingAction = action;
// 3.设置存储刷新时间的key
self.header.dateKey = dateKey;
}
- <code>MJRefreshHeaderView *header = [MJRefreshHeaderView header]; </code>， 这个方法是第一个扩展点，具体的header有哪些属性，哪些用户设置的样式都是在这里设置的，但是它现在还没有加到任何的superView商，也没有任何行为将其挂到tableView上，
接下来的调用<code>self.header = header;</code> ，这里运用的技巧是利用了UIScrollView+MJRefresh里的一个category，为UIScrollView增加了属性header和footer，在set.get方法中实现，如下：
- (void)setHeader:(MJRefreshHeaderView *)header {
[self willChangeValueForKey:@"MJRefreshHeaderViewKey"];
objc_setAssociatedObject(self, &MJRefreshHeaderViewKey,
header,
OBJC_ASSOCIATION_ASSIGN);
[self didChangeValueForKey:@"MJRefreshHeaderViewKey"];
}
- (MJRefreshHeaderView *)header {
return objc_getAssociatedObject(self, &MJRefreshHeaderViewKey);
}
这里用到了关联对象的技巧（AssociatedObject），因为category通常情况下是不能直接添加实例变量的、通过上面的代码，把header添加到了UIScrollView的subviews里，并保留了一个引用。但是这个header的frame还没有确定，也没有任何行为设置header的位置和侦听行为
<code>[self addSubview:header];</code> 由于执行了这句代码，接下来就会进入header的生命周期方法<code>
willMoveToSuperview</code>，这个方法是在公共的基类<code>MJRefreshBaseView</code>里实现的，因为这是基础的行为，所以写在公共的基类里，所有的子类都能共享：
- (void)willMoveToSuperview:(UIView *)newSuperview
{
[super willMoveToSuperview:newSuperview];
// 旧的父控件
[self.superview removeObserver:self forKeyPath:MJRefreshContentOffset context:nil];
if (newSuperview) { // 新的父控件
[newSuperview addObserver:self forKeyPath:MJRefreshContentOffset options:NSKeyValueObservingOptionNew context:nil];
// 设置宽度
self.mj_width = newSuperview.mj_width;
// 设置位置
self.mj_x = 0;
// 记录UIScrollView
_scrollView = (UIScrollView *)newSuperview;
// 记录UIScrollView最开始的contentInset
_scrollViewOriginalInset = _scrollView.contentInset;
}
}
- 接下来会进入生命周期方法layoutSubviews：
- (void)layoutSubviews
{
[super layoutSubviews];
// 1.箭头
CGFloat arrowX = self.mj_width * 0.5 - 100;
self.arrowImage.center = CGPointMake(arrowX, self.mj_height * 0.5);
// 2.指示器
self.activityView.center = self.arrowImage.center;
}
- 通过上述的代码，确定了控件的位置，以及其中每个subview的位置。
- 接下来就是侦听<code>UIScrollView</code>的<code>contentOffset</code>和<code>contentSize</code>变化，关键代码如下：
#pragma mark - 监听UIScrollView的contentOffset属性
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
// 不能跟用户交互就直接返回
if (!self.userInteractionEnabled || self.alpha <= 0.01 || self.hidden) return;
// 如果正在刷新，直接返回
if (self.state == MJRefreshStateRefreshing) return;
if ([MJRefreshContentOffset isEqualToString:keyPath]) {
[self adjustStateWithContentOffset];
}
}
/**
* 调整状态
*/
- (void)adjustStateWithContentOffset
{
// 当前的contentOffset
CGFloat currentOffsetY = self.scrollView.mj_contentOffsetY;
// 头部控件刚好出现的offsetY
CGFloat happenOffsetY = - self.scrollViewOriginalInset.top;
// 如果是向上滚动到看不见头部控件，直接返回
if (currentOffsetY >= happenOffsetY) return;
if (self.scrollView.isDragging) {
// 普通 和 即将刷新 的临界点
CGFloat normal2pullingOffsetY = happenOffsetY - self.mj_height;
if (self.state == MJRefreshStateNormal && currentOffsetY < normal2pullingOffsetY) {
// 转为即将刷新状态
self.state = MJRefreshStatePulling;
} else if (self.state == MJRefreshStatePulling && currentOffsetY >= normal2pullingOffsetY) {
// 转为普通状态
self.state = MJRefreshStateNormal;
}
} else if (self.state == MJRefreshStatePulling) {// 即将刷新 && 手松开
// 开始刷新
self.state = MJRefreshStateRefreshing;
}
}
- 接下来是设置状态的方法，根据state状态变化，驱动不同的行为。setState方法是第二个扩展点，这里的MJRefreshCheckState是个宏，也调用了父类的setState的方法。下拉的时候临时增大contentInset，令header保留在屏幕上，然后调用callback block；结束之后还原contentInset,如下：
- (void)setState:(MJRefreshState)state
{
// 0.存储当前的contentInset
if (self.state != MJRefreshStateRefreshing) {
_scrollViewOriginalInset = self.scrollView.contentInset;
}
// 1.一样的就直接返回(暂时不返回)
if (self.state == state) return;
// 2.旧状态
MJRefreshState oldState = self.state;
// 3.存储状态
_state = state;
// 4.根据状态执行不同的操作
switch (state) {
case MJRefreshStateNormal: // 普通状态
{
if (oldState == MJRefreshStateRefreshing) {
[UIView animateWithDuration:MJRefreshSlowAnimationDuration * 0.6 animations:^{
self.activityView.alpha = 0.0;
} completion:^(BOOL finished) {
// 停止转圈圈
[self.activityView stopAnimating];
// 恢复alpha
self.activityView.alpha = 1.0;
}];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(MJRefreshSlowAnimationDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ // 等头部回去
// 再次设置回normal
// _state = MJRefreshStatePulling;
// self.state = MJRefreshStateNormal;
// 显示箭头
self.arrowImage.hidden = NO;
// 停止转圈圈
[self.activityView stopAnimating];
// 设置文字
[self settingLabelText];
});
// 直接返回
return;
} else {
// 显示箭头
self.arrowImage.hidden = NO;
// 停止转圈圈
[self.activityView stopAnimating];
}
break;
}
case MJRefreshStatePulling:
break;
case MJRefreshStateRefreshing:
{
// 开始转圈圈
[self.activityView startAnimating];
// 隐藏箭头
self.arrowImage.hidden = YES;
// 回调
if ([self.beginRefreshingTaget respondsToSelector:self.beginRefreshingAction]) {
msgSend(msgTarget(self.beginRefreshingTaget), self.beginRefreshingAction, self);
}
if (self.beginRefreshingCallback) {
self.beginRefreshingCallback();
}
break;
}
default:
break;
}
// 5.设置文字
[self settingLabelText];
}
- 到此，已经将MJRefresh的原理分析的差不多了，通过分析它的原理，可以看出来下拉刷新的过程大致是：
初始化下拉刷新控件 - 设置Frame - 控件添加监听 - 监控contentOffset - 判断contentOffset并做出相应回调 - 希望能给各位想自己写下拉刷新控件的带来点帮助，有什么写的不对、有问题的地方，希望各位能批评指正
