MJRefresh源码解读-白红宇

MJRefresh是MJ大神写的一个实现上拉刷新和下拉刷新的第三方库，这个库目前在很多有名的应用上都有使用看，下面就来分析一下MJRefresh的源码。

1.简单应用

下面创建一个绿色的UIScrollview，然后在UIScrollview上加上一个红色的视图作为子视图：

self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];    self.scrollView.backgroundColor = [UIColor greenColor];    [self.view addSubview:_scrollView];        self.scrollView.mj_header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(refresh)];        self.scrollView.contentInset = UIEdgeInsetsMake(54, 0, 0, 0);        UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height)];    view.backgroundColor = [UIColor redColor];    [self.scrollView addSubview:view];复制代码

然后我们看一下效果：

在这里我们设置的contentInset.top = 54，54正是这个下拉控件的高度，所以整个下拉控件是完全可见的。

2.源码分析

我们首先看一下MJRefresh的源码的类的结构，由于上拉刷新和下拉刷新控件的原理基本一致，因此这里我们仅使用下拉刷新控件来分析：

下面我们从下拉刷新控件的使用开始来探索源码：

self.scrollView.mj_header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(refresh)];复制代码

首先我们的疑问是UIScrollview的mj_header这个属性是哪里来的？我们找到UIScrollview+MJRefresh.h这个文件，这是写的UIScrollview的一个分类，在这个分类中我们找到了mj_header属性，mj_footer属性，但是分类申明属性是没有set方法和get方法的，那么怎么去赋值和取值呢？这时候就要用到runtime的关联属性方法了，我们在UIScrollview+MJRefresh.m文件中找到- (void)setMj_header:(MJRefreshHeader *)mj_header方法看看是不是像我猜想的那样：

事实证明确实是这样，使用关联属性来设值和取值。

MJRefreshNormalHeader最终是继承自

MJRefreshComponent，那么我们就先从

MJRefreshComponent来看：首先在MJRefresh.h文件中有一个枚举类表示刷新控件的状态：

/** 刷新控件的状态 */typedef NS_ENUM(NSInteger, MJRefreshState) {    /** 普通闲置状态 */    MJRefreshStateIdle = 1,    /** 松开就可以进行刷新的状态 */    MJRefreshStatePulling,    /** 正在刷新中的状态 */    MJRefreshStateRefreshing,    /** 即将刷新的状态 */    MJRefreshStateWillRefresh,    /** 所有数据加载完毕，没有更多的数据了 */    MJRefreshStateNoMoreData};复制代码

其中默认状态是MJRefreshStateIdle，当我们拖拽UIScrollview的时候在没有到达临界点之前都是这个状态，当我们拖拽到了临界点之后就变成了MJRefreshStatePulling状态，这个状态就是松手就可以刷新的状态，当我们在MJRefreshStatePulling状态下松手就变成了MJRefreshStateRefreshing状态，即正在刷新状态。 MJRefreshComponnet中有下列属性：

@property (weak, nonatomic) id refreshingTarget; 这是回调的对象

@property (assign, nonatomic) SEL refreshingAction; 这是回调的方法

@property (assign, nonatomic) MJRefreshState state; 刷新控件的状态

@property (assign, nonatomic, readonly) UIEdgeInsets scrollViewOriginalInset; scrollview刚开始的contentInset

@property (assign, nonatomic) CGFloat pullingPercent; 拉拽的百分比，用来控制刷新控件的透明度

在MJRefreshComponent.m中的核心方法是：- (void)willMoveToSuperview:(UIView *)newSuperview，这个方法是在视图加入父视图或者改变父视图的时候调用：

- (void)willMoveToSuperview:(UIView *)newSuperview{    [super willMoveToSuperview:newSuperview];        // 如果不是UIScrollView，不做任何事情    if (newSuperview && ![newSuperview isKindOfClass:[UIScrollView class]]) return;        // 旧的父控件移除监听    [self removeObservers];        if (newSuperview) { // 新的父控件        // 设置宽度        self.mj_w = newSuperview.mj_w;        // 设置位置        self.mj_x = -_scrollView.mj_insetL;                // 记录UIScrollView        _scrollView = (UIScrollView *)newSuperview;        // 设置永远支持垂直弹簧效果        _scrollView.alwaysBounceVertical = YES;        // 记录UIScrollView最开始的contentInset        _scrollViewOriginalInset = _scrollView.mj_inset;                // 添加监听        [self addObservers];    }}复制代码

在这个方法里面设置了self.mj_x,self.mj_w, _scrollViewOriginalInset这三个属性并且添加了观察者：

- (void)addObservers{    NSKeyValueObservingOptions options = NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld;    [self.scrollView addObserver:self forKeyPath:MJRefreshKeyPathContentOffset options:options context:nil];    [self.scrollView addObserver:self forKeyPath:MJRefreshKeyPathContentSize options:options context:nil];    self.pan = self.scrollView.panGestureRecognizer;    [self.pan addObserver:self forKeyPath:MJRefreshKeyPathPanState options:options context:nil];}复制代码

监听了scrollview的contentOffset和contentsize的改变，需要根据contentoffset的改变来变更刷新控件的状态。

MJRefreshHeader

接下来再来分析一下MJRefreshComponnet的子类MJRefreshHeader这个类，这个类是基础的下拉刷新控件类： 这个类的头文件中多了两个方法，这两个方法都是用来创建下拉刷新控件的，不同的是一个的回调是block，另一个的回调是@selector：

+ (instancetype)headerWithRefreshingBlock:(MJRefreshComponentRefreshingBlock)refreshingBlock{    MJRefreshHeader *cmp = [[self alloc] init];    cmp.refreshingBlock = refreshingBlock;    return cmp;}+ (instancetype)headerWithRefreshingTarget:(id)target refreshingAction:(SEL)action{    MJRefreshHeader *cmp = [[self alloc] init];    [cmp setRefreshingTarget:target refreshingAction:action];    return cmp;}复制代码

在这个类中确定了上拉刷新控件的mj_y属性：

- (void)placeSubviews{    [super placeSubviews];        // 设置y值(当自己的高度发生改变了，肯定要重新调整Y值，所以放到placeSubviews方法中设置y值)    self.mj_y = - self.mj_h - self.ignoredScrollViewContentInsetTop;}复制代码

由于self.ignoredScrollViewContentInsetTop一般是0，所以一般情况下就有：

self.mj_y = -self.mj_h;复制代码

然后我们再来看一下一个最核心的方法：- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change，这个方法是contentoffset发生变化时KVO产生的调用，

上面这个方法主要是根据contentoffset进行了一系列判断然后进行了状态的变化，那么在这个类里面还有一个很重要的方法，就是

- (void)setState:(MJRefreshState)state，我们看看这个方法里面做了什么：

总结一下MJRefreshHeader这个类，这个类实现了两个非常重要的方法，一个是- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change，这个方法是在用手拖拽scrollview导致contentoffset变化的时候调用的，在这个方法中会根据contentoffset的值来改变下拉刷新控件的状态。这个类实现的另一个很重要的方法是- (void)setState:(MJRefreshState)state，在- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change中改变属性，在- (void)setState:(MJRefreshState)state中根据属性的改变来做具体的事。 #####MJRefreshStateHeader **MJRefreshStateHeader继承自MJRefreshHeader，这个类是带有状态文字的刷新控件，没有箭头和菊花。这个类比较简单，主要是对状态label和最近刷新时间label进行布局：

MJRefreshNoramlHeader是MJRefreshStateHeader的子类，它是默认的下拉刷新控件类，我们实例中用的就是这种，这种刷新控件是在拖拽的时候显示箭头，当开始刷新的时候箭头小时，显示菊花。

MJRefreshNoramlHeader这个类做了两件事，一件事是布局上面说到的箭头视图和菊花视图，另外一件事是处理在拖拽过程中箭头和菊花的变化。

布局菊花和箭头：

处理拖拽过程中箭头和菊花的变化

MJRefreshGifHeader

MJRefreshGifHeader这个类也是继承自MJRefreshStateHeader，它是带GIF的下拉刷新控件，就是把MJRefreshNormalHeader的箭头和菊花变成GIF，下面我们先看一下MJRefreshNormal的简单使用：

MJRefreshGifHeader *header = [MJRefreshGifHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];// Set the ordinary state of animated images[header setImages:idleImages forState:MJRefreshStateIdle];// Set the pulling state of animated images（Enter the status of refreshing as soon as loosen）[header setImages:pullingImages forState:MJRefreshStatePulling];// Set the refreshing state of animated images[header setImages:refreshingImages forState:MJRefreshStateRefreshing];// Set headerself.tableView.mj_header = header;复制代码

下面我们就从- (void)setImages:(NSArray *)images forState:(MJRefreshState)state这个方法下手来看看具体实现：

- (void)setImages:(NSArray *)images forState:(MJRefreshState)state {     [self setImages:images duration:images.count * 0.1 forState:state]; }复制代码

这个方法还是主要调用- (void)setImages:(NSArray *)images duration:(NSTimeInterval)duration forState:(MJRefreshState)state这个方法：

- (void)setImages:(NSArray *)images duration:(NSTimeInterval)duration forState:(MJRefreshState)state {     if (images == nil) return;         self.stateImages[@(state)] = images;     self.stateDurations[@(state)] = @(duration);         /* 根据图片设置控件的高度 */     UIImage *image = [images firstObject];     if (image.size.height > self.mj_h) {         self.mj_h = image.size.height;     } }复制代码

在这个方法中，使用了两个字典，一个字典用来存放各种状态下的图片数组，因为GIF本质上也就是多张图片循环播放嘛，另一个字典用来存放各种状态下GIF动画的周期。并且如果GIF图片的高度大于刷新控件的高度，那么就调整刷新控件的高度为GIF图片的高度。我们再来看一下GIF视图的布局：

根据状态变化显示不同的GIF视图：

这篇文章在简书的地址：