MJRefresh 源码分析——妈妈再也不用担心我的下拉刷新

作者: 吴佩在天涯 | 来源:发表于2017-06-27 16:21 被阅读366次

MJRefresh 下拉刷新第三方库，是一个功能强大简单实用的下拉刷新控件。

整个框架逻辑清晰，类之间的解耦做的很好，可定制性很高，是一款很有价值的学习框架。

本文基本梳理了 header 详细继承关系，重点解释了header 和 UIScrollView 的调用关系。

文章结构如下：

总体思路描述

每个 header 类的具体功能介绍

小结

header 与 UIScrollView 的关系

实用的知识点

1、总体的思路描述：

header 和 footer 本质上都是添加到 UIScroollView 上的子控件。

在 MJRefresh 里面主要使用了 KVO 、runtime 、继承、GCD 等知识点

MJRefreshComponent 是刷新控件的基类，在 MJRefreshComponent 里面添加了 KVO 监听，prepare 方法和 placeSubview 方法。

当 MJRefreshComponent 中 KVO 监听到了以后，会直接调用在 MJRefreshHeader 和 MJRefreshFooter 里实现的方法。这里的实现方法里面，有主要是通过设置 state 状态。在他们的子类里面又会分别调用 setState 方法。根据不同的状态进行不同的样式变化。

上面描述一下子看起来，太过抽象不好懂，不要急下面会有详细介绍。

这里只需要记住，MJRefresh 每个类里面最重要的机制就是：通过监听的方式，改变刷新状态，根据状态改变，进行相关处理。

重点是：监听机制和状态的改变。

抓住这两点。整个框架的理解就抓住了重点。

下面简要看一看整个类的继承结构：

MJRefresh类结构图.png

2、每个类的具体功能介绍

MJRefreshComponent (基类)

有哪些功能：

1、声明所有的状态（枚举）

2、声明控件的回调函数（NSBlock）

3、添加监听（主要使用KVO监听，scrollView 的contentOffset 和 contentSize的变化，手势识别的 UIPanGestureRecognizer（拖动））

4、提供开始刷新，停止刷新接口

5、声明子类需要实现的方法。（在基类中有部分实现。大部分在子类中实现）

具体实现代码：

1、声明所有的状态（枚举）

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

一共是5种状态，其中前面三种状态：闲置、松开可刷新、正在刷新，是所有的类里面实用最多的条件判断，属于下拉刷新的状态。

即将刷新状态，只是拿来预防view还没显示出来就调用了beginRefreshing，不用关注。

第五种状态，没有更多数据的状态是属于上拉刷新的状态。

2、声明控件的回调函数（NSBlock）

    /** 进入刷新状态的回调 */
    typedef void (^MJRefreshComponentRefreshingBlock)();
    /** 开始刷新后的回调(进入刷新状态后的回调) */
    typedef void (^MJRefreshComponentbeginRefreshingCompletionBlock)();
    /** 结束刷新后的回调 */
    typedef void (^MJRefreshComponentEndRefreshingCompletionBlock)();

3、添加监听（主要使用KVO监听，scrollView 的contentOffset 和 contentSize的变化，手势识别的 UIPanGestureRecognizer（拖动））

监听的声明：

    - (void)addObservers
{
    NSKeyValueObservingOptions options = NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld;
    [self.scrollView addObserver:self forKeyPath:MJRefreshKeyPathContentOffset options:options context:nil];//contentOffset属性
    [self.scrollView addObserver:self forKeyPath:MJRefreshKeyPathContentSize options:options context:nil];//contentSize属性
    self.pan = self.scrollView.panGestureRecognizer;
    [self.pan addObserver:self forKeyPath:MJRefreshKeyPathPanState options:options context:nil];//UIPanGestureRecognizer 的state属性
}

监听的处理：

        - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
    // 遇到这些情况就直接返回
    if (!self.userInteractionEnabled) return;
    
    // 这个就算看不见也需要处理
    if ([keyPath isEqualToString:MJRefreshKeyPathContentSize]) {
        [self scrollViewContentSizeDidChange:change];
    }
    // 看不见
    if (self.hidden) return;
    
    if ([keyPath isEqualToString:MJRefreshKeyPathContentOffset]) {
        [self scrollViewContentOffsetDidChange:change];
    } else if ([keyPath isEqualToString:MJRefreshKeyPathPanState]) {
        [self scrollViewPanStateDidChange:change];
    }
}

其实，此处的监听处理，只不过是用来连接基类和子类的方法实现。
这个三个方法都是在子类里面实现的：

- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change{}
- (void)scrollViewContentSizeDidChange:(NSDictionary *)change{}
- (void)scrollViewPanStateDidChange:(NSDictionary *)change{}

在后面子类的分析里，会看到这些实现的类到底做了什么。

4、提供开始刷新，停止刷新接口

#pragma mark 进入刷新状态
- (void)beginRefreshingWithCompletionBlock:(void (^)())completionBlock
{
    self.beginRefreshingCompletionBlock = completionBlock;
    
    [self beginRefreshing];
}
- (void)beginRefreshing
{
    [UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
        self.alpha = 1.0;
    }];
    self.pullingPercent = 1.0;
    // 只要正在刷新，就完全显示
    if (self.window) {
        //将状态切换为正在刷新
        self.state = MJRefreshStateRefreshing;
    } else {
        // 预防正在刷新中时，调用本方法使得header inset回置失败
        if (self.state != MJRefreshStateRefreshing) {
            //将状态切换为即将刷新
            self.state = MJRefreshStateWillRefresh;
            // 刷新(预防从另一个控制器回到这个控制器的情况，回来要重新刷新一下)
            [self setNeedsDisplay];
        }
    }
}
#pragma mark 结束刷新状态
- (void)endRefreshing
{
    self.state = MJRefreshStateIdle;
}
- (void)endRefreshingWithCompletionBlock:(void (^)())completionBlock
{
    self.endRefreshingCompletionBlock = completionBlock;
    
    [self endRefreshing];
}
#pragma mark 是否正在刷新
- (BOOL)isRefreshing
{
    return self.state == MJRefreshStateRefreshing || self.state == MJRefreshStateWillRefresh;
}

上面主要是一些状态的切换。

5、声明子类需要实现的方法。（在基类中有部分实现。大部分在子类中实现）

#pragma mark - 交给子类们去实现
/** 初始化 */
- (void)prepare NS_REQUIRES_SUPER;
/** 摆放子控件frame */
- (void)placeSubviews NS_REQUIRES_SUPER;
/** 当scrollView的contentOffset发生改变的时候调用 */
- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change NS_REQUIRES_SUPER;
/** 当scrollView的contentSize发生改变的时候调用 */
- (void)scrollViewContentSizeDidChange:(NSDictionary *)change NS_REQUIRES_SUPER;
/** 当scrollView的拖拽状态发生改变的时候调用 */
- (void)scrollViewPanStateDidChange:(NSDictionary *)change NS_REQUIRES_SUPER;

MJRefreshHeader （继承自 MJRefreshComponet）

主要功能：

1、初始化类方法（主要是生成header对象和传入的block）

2、设置 header 的高度。

3、重新调整 header 的 Y 值。（其实，header本身是UIScrollView的子视图）

4、实现方法：scrollViewContentOffsetDidChange:

（根据 contentOffset 的变化，来切换状态，也就是基类里面定义的几个状态）

5、实现 setState 方法（依据不同的状态，出现不同的动画。）

具体实现：

1、初始化类方法（主要是生成header对象和传入的block）

初始化有两种方法：

+ (instancetype)headerWithRefreshingBlock:(MJRefreshComponentRefreshingBlock)refreshingBlock
{
    MJRefreshHeader *cmp = [[self alloc] init];
    //传入block
    cmp.refreshingBlock = refreshingBlock;
    return cmp;
}
+ (instancetype)headerWithRefreshingTarget:(id)target refreshingAction:(SEL)action
{
    MJRefreshHeader *cmp = [[self alloc] init];
    //设置self.refreshingTarget 和 self.refreshingAction
    [cmp setRefreshingTarget:target refreshingAction:action];
    return cmp;
}

以上方法，是在生成一个 header 最常调用的方法。

2、设置 header 的高度。

通过重新父类的 prepare 方法，来设置 header 的高度。

- (void)prepare
{
    [super prepare];//必须调用父类方法
    
    // 设置用于在NSUserDefaults里存储时间的key
    self.lastUpdatedTimeKey = MJRefreshHeaderLastUpdatedTimeKey;
    
    // 设置header的高度
    self.mj_h = MJRefreshHeaderHeight;
}

3、重新调整 header 的 Y 值。（其实，header本身是UIScrollView的子视图）

重写 placeSubView 方法，重新调整 Y 值。

        - (void)placeSubviews
{
    [super placeSubviews];
    
    // 设置y值(当自己的高度发生改变了，肯定要重新调整Y值，所以放到placeSubviews方法中设置y值)
    self.mj_y = - self.mj_h - self.ignoredScrollViewContentInsetTop;
    //self.ignoredScrollViewContentInsetTop 如果是10，那么就向上移动10
}

4、实现方法：scrollViewContentOffsetDidChange:

（根据 contentOffset 的变化，来切换状态，也就是基类里面定义的几个状态）

- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change
{
     // 这个方法在父类里面有实现，但是什么也没有做。因为上面说过，具体的实现都是在子类里面做的处理
    
    [super scrollViewContentOffsetDidChange:change];
    
    // 正在刷新的状态
    if (self.state == MJRefreshStateRefreshing) {
        
        if (self.window == nil) return;
        
        //- self.scrollView.mj_offsetY：-（-54-64）= 118 ： 刷新的时候，偏移量是不动的。偏移量 = 状态栏 + 导航栏 + header的高度
        //_scrollViewOriginalInset.top：64 （状态栏 + 导航栏）
        //insetT 取二者之间大的那一个
        CGFloat insetT = - self.scrollView.mj_offsetY > _scrollViewOriginalInset.top ? - self.scrollView.mj_offsetY : _scrollViewOriginalInset.top;
       
        //118
        insetT = insetT > self.mj_h + _scrollViewOriginalInset.top ? self.mj_h + _scrollViewOriginalInset.top : insetT;
        
        //设置contentInset
        self.scrollView.mj_insetT = insetT;
        
        // 记录刷新的时候的偏移量 -54 = 64 - 118
        self.insetTDelta = _scrollViewOriginalInset.top - insetT;
        return;
    }
    // 跳转到下一个控制器时，contentInset可能会变
     _scrollViewOriginalInset = self.scrollView.contentInset;
    
    // 记录当前的contentOffset
    CGFloat offsetY = self.scrollView.mj_offsetY;
    // 头部控件刚好全部出现的offsetY,默认是-64（20 + 44）
    CGFloat happenOffsetY = - self.scrollViewOriginalInset.top;
    
    // 向上滚动，直接返回
    if (offsetY > happenOffsetY) return;
    
    // 从普通 到 即将刷新 的临界距离
    CGFloat normal2pullingOffsetY = happenOffsetY - self.mj_h;// -64 - 54 = -118
    
    //下拉的百分比：下拉的距离与header高度的比值
    CGFloat pullingPercent = (happenOffsetY - offsetY) / self.mj_h;
    
    if (self.scrollView.isDragging) {
        
        //记录当前下拉的百分比
        self.pullingPercent = pullingPercent;
        
        if (self.state == MJRefreshStateIdle && offsetY < normal2pullingOffsetY) {
            // 如果当前为默认状态 && 下拉的距离大于临界距离（将tableview下拉得很低），则将状态切换为可以刷新
            self.state = MJRefreshStatePulling;
            
        } else if (self.state == MJRefreshStatePulling && offsetY >= normal2pullingOffsetY) {
            // 如果当前状态为可以刷新 && 下拉的距离小于临界距离，则将状态切换为默认
            self.state = MJRefreshStateIdle;
        }
    } else if (self.state == MJRefreshStatePulling) {// 即将刷新 && 手松开
        // 手松开 && 状态为可以刷新（MJRefreshStatePulling）时 开始刷新
        [self beginRefreshing];        
    } else if (pullingPercent < 1) {
        //手松开后，默认状态时，恢复self.pullingPercent
        self.pullingPercent = pullingPercent;        
    }
}

这个方法，应该是所有子类方法里面最复杂的方法实现，因为这里要考虑，三种刷新状态的临界点切换。

需要注意三点：

这里的状态有三种：默认状态（MJRefreshStateIdle），可以刷新的状态（MJRefreshStatePulling）以及正在刷新的状态（MJRefreshStateRefreshing）。

状态切换的因素有两个：一个是下拉的距离是否超过临界值，另一个是 手指是否离开屏幕。
注意:可以刷新的状态和正在刷新的状态是不同的。因为在手指还贴在屏幕的时候是不能进行刷新的。所以即使在下拉的距离超过了临界距离（状态栏 + 导航栏 + header高度），如果手指没有离开屏幕，那么也不能马上进行刷新，而是将状态切换为：可以刷新。一旦手指离开了屏幕，马上将状态切换为正在刷新。

三个状态图：

MJRefresh_三个状态.png

5、实现 setState 方法（依据不同的状态，出现不同的动画。）

    - (void)setState:(MJRefreshState)state

{
MJRefreshCheckState

if (state == MJRefreshStateIdle) {
   
    //============== 设置状态为默认状态 =============//
    
    //如果当前不是正在刷新就返回，因为这个方法主要针对从正在刷新状态（oldstate）到默认状态
    if (oldState != MJRefreshStateRefreshing) return;
    
    //刷新完成后，保存刷新完成的时间
    [[NSUserDefaults standardUserDefaults] setObject:[NSDate date] forKey:self.lastUpdatedTimeKey];
    [[NSUserDefaults standardUserDefaults] synchronize];
    
    // 恢复inset和offset
    [UIView animateWithDuration:MJRefreshSlowAnimationDuration animations:^{
        
        //118 -> 64（剪去了header的高度）
        self.scrollView.mj_insetT += self.insetTDelta;
        
        // 自动调整透明度
        if (self.isAutomaticallyChangeAlpha) self.alpha = 0.0;
        
    } completion:^(BOOL finished) {
        
        self.pullingPercent = 0.0;
        
        if (self.endRefreshingCompletionBlock) {
            //调用刷新完成的block
            self.endRefreshingCompletionBlock();
        }
    }];
    
} else if (state == MJRefreshStateRefreshing) {
    
     //============== 设置状态为正在刷新状态 =============//
     dispatch_async(dispatch_get_main_queue(), ^{
        
         [UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
           
            CGFloat top = self.scrollViewOriginalInset.top + self.mj_h;//64 + 54 (都是默认的高度)
            // 重新设置contentInset，top = 118
            self.scrollView.mj_insetT = top;
            // 设置滚动位置
            [self.scrollView setContentOffset:CGPointMake(0, -top) animated:NO];
             
        } completion:^(BOOL finished) {
            //调用进行刷新的block
            [self executeRefreshingCallback];
        }];
     });
}

}

这里需要注意两点：

这里状态的切换，主要围绕着两种：默认状态和正在刷新态。也就是针对开始刷新和结束刷新这两个切换点。

从正在刷新状态状态切换为默认状态时（结束刷新），需要记录刷新结束的时间。因为header里面有一个默认的label是用来显示上次刷新的时间的。

MJRefreshStateHeader （继承自 MJRefreshHeader）

主要功能：

1、简单布局 stateLable(状态labe) 和 lastUpdatedTimeLabel(时间 label)

2、根据刷新状态的变化，设置两个 label 的文本。

给一张图，让大家直观感受一下这两个 label 控件：

MJRefresh_label.png

功能实现：

1、简单布局 stateLable(状态labe) 和 lastUpdatedTimeLabel(时间 label)

还是重新父类的 prepare 方法:

- (void)prepare
{
    [super prepare];
    
    // 初始化间距
    self.labelLeftInset = MJRefreshLabelLeftInset;
    
    // 初始化文字
    [self setTitle:[NSBundle mj_localizedStringForKey:MJRefreshHeaderIdleText] forState:MJRefreshStateIdle];
    [self setTitle:[NSBundle mj_localizedStringForKey:MJRefreshHeaderPullingText] forState:MJRefreshStatePulling];
    [self setTitle:[NSBundle mj_localizedStringForKey:MJRefreshHeaderRefreshingText] forState:MJRefreshStateRefreshing];
}

在这里，将每一个状态对应的提示文字放入一个字典里面,key是状态的NSNumber形式.

- (void)setTitle:(NSString *)title forState:(MJRefreshState)state
{
    if (title == nil) return;
    self.stateTitles[@(state)] = title;
    self.stateLabel.text = self.stateTitles[@(self.state)];
}

依据时间 label 是否隐藏，对两个 label 进行布局：

- (void)placeSubviews
{
    [super placeSubviews];
    
    if (self.stateLabel.hidden) return;
    
    BOOL noConstrainsOnStatusLabel = self.stateLabel.constraints.count == 0;
    
    if (self.lastUpdatedTimeLabel.hidden) {
        
        //如果更新时间label是隐藏的，则让状态label撑满整个header
        if (noConstrainsOnStatusLabel) self.stateLabel.frame = self.bounds;
        
    } else {
        
        //如果更新时间label不是隐藏的，根据约束设置更新时间label和状态label（高度各占一半）
        CGFloat stateLabelH = self.mj_h * 0.5;
        
        if (noConstrainsOnStatusLabel) {
            self.stateLabel.mj_x = 0;
            self.stateLabel.mj_y = 0;
            self.stateLabel.mj_w = self.mj_w;
            self.stateLabel.mj_h = stateLabelH;
        }
        
        // 更新时间label
        if (self.lastUpdatedTimeLabel.constraints.count == 0) {
            self.lastUpdatedTimeLabel.mj_x = 0;
            self.lastUpdatedTimeLabel.mj_y = stateLabelH;
            self.lastUpdatedTimeLabel.mj_w = self.mj_w;
            self.lastUpdatedTimeLabel.mj_h = self.mj_h - self.lastUpdatedTimeLabel.mj_y;
        }
    }
}

2、根据刷新状态的变化，设置两个 label 的文本。

- (void)setState:(MJRefreshState)state
{
    MJRefreshCheckState
    
    // 设置状态文字
    self.stateLabel.text = self.stateTitles[@(state)];
    
    // 重新设置key（重新显示时间）
    self.lastUpdatedTimeKey = self.lastUpdatedTimeKey;
}

这里传入的状态不同，在 stateLabel 和 lastUpdatedLabel 里面文字也不同。

stateLabel 可以直接从字典 stateTitles 里面取到。

lastUpdatedLabel 需要使用下面的方法：

    - (void)setLastUpdatedTimeKey:(NSString *)lastUpdatedTimeKey
{
    [super setLastUpdatedTimeKey:lastUpdatedTimeKey];
    
    // 如果label隐藏了，就不用再处理
    if (self.lastUpdatedTimeLabel.hidden) return;
    
    //根据key，从NSUserDefaults获取对应的NSData型时间
    NSDate *lastUpdatedTime = [[NSUserDefaults standardUserDefaults] objectForKey:lastUpdatedTimeKey];
    
    // 如果有block，从block里拿来时间，这应该是用户自定义显示时间格式的渠道
    if (self.lastUpdatedTimeText) {
        self.lastUpdatedTimeLabel.text = self.lastUpdatedTimeText(lastUpdatedTime);
        return;
    }
    
    //如果没有block，就按照下面的默认方法显示时间格式
    if (lastUpdatedTime) {
        
        // 获得了上次更新时间
        // 1.获得年月日
        NSCalendar *calendar = [self currentCalendar];
        NSUInteger unitFlags = NSCalendarUnitYear| NSCalendarUnitMonth | NSCalendarUnitDay |NSCalendarUnitHour |NSCalendarUnitMinute;
        NSDateComponents *cmp1 = [calendar components:unitFlags fromDate:lastUpdatedTime];
        NSDateComponents *cmp2 = [calendar components:unitFlags fromDate:[NSDate date]];
        
        // 2.格式化日期
        NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
        BOOL isToday = NO;
        if ([cmp1 day] == [cmp2 day]) {
            //今天，省去年月日
            formatter.dateFormat = @" HH:mm";
            isToday = YES;
            
        } else if ([cmp1 year] == [cmp2 year]) { // 今年
            //今年，省去年，显示月日
            formatter.dateFormat = @"MM-dd HH:mm";
        } else {
            //其他，年月日都显示
            formatter.dateFormat = @"yyyy-MM-dd HH:mm";
        }
        NSString *time = [formatter stringFromDate:lastUpdatedTime];
        
        // 3.显示日期
        self.lastUpdatedTimeLabel.text = [NSString stringWithFormat:@"%@%@%@",
                                          [NSBundle mj_localizedStringForKey:MJRefreshHeaderLastTimeText],
                                          isToday ? [NSBundle mj_localizedStringForKey:MJRefreshHeaderDateTodayText] : @"",
                                          time];
    } else {
        // 没有获得上次更新时间（应该是第一次更新或者多次更新，之前的更新都失败了）
        self.lastUpdatedTimeLabel.text = [NSString stringWithFormat:@"%@%@",
                                          [NSBundle mj_localizedStringForKey:MJRefreshHeaderLastTimeText],
                                          [NSBundle mj_localizedStringForKey:MJRefreshHeaderNoneLastDateText]];
    }
}

此处借鉴一下，时间比较的处理。使用 NSDateComponents 类进行时间比较。

MJRefreshNomalHeader （继承自 MJRefreshStarteHeader ）

主要功能：

1、添加箭头和小菊花控件

2、布局这两个控件，并且在 refresh 控件的状态切换的时候，改变这两个 view 的样式。

直观认识一下这两个控件：

MJRefresh_箭头和小菊花.png

功能实现：（同样是实现了父类的三个方法）

1、prepare 方法，设置小菊花样式。

    - (void)prepare
{
    [super prepare];
    
    self.activityIndicatorViewStyle = UIActivityIndicatorViewStyleGray;
}

2、 placeSubviews 方法，

        - (void)placeSubviews
{
    [super placeSubviews];
    
    // 首先将箭头的中心点x设为header宽度的一半
    CGFloat arrowCenterX = self.mj_w * 0.5;
    
    if (!self.stateLabel.hidden) {
        
        CGFloat stateWidth = self.stateLabel.mj_textWith;
        CGFloat timeWidth = 0.0;
        if (!self.lastUpdatedTimeLabel.hidden) {
            timeWidth = self.lastUpdatedTimeLabel.mj_textWith;
        }
        
        //在stateLabel里的文字宽度和更新时间里的文字宽度里取较宽的
        CGFloat textWidth = MAX(stateWidth, timeWidth);
        //根据self.labelLeftInset和textWidth向左移动中心点x
        arrowCenterX -= textWidth / 2 + self.labelLeftInset;
    }
    
    //中心点y永远设置为header的高度的一半
    CGFloat arrowCenterY = self.mj_h * 0.5;
    
    //获得了最终的center，而这个center同时适用于arrowView和loadingView，因为二者是不共存的。
    CGPoint arrowCenter = CGPointMake(arrowCenterX, arrowCenterY);
    
    // 箭头
    if (self.arrowView.constraints.count == 0) {
        //控件大小等于图片大小
        self.arrowView.mj_size = self.arrowView.image.size;
        self.arrowView.center = arrowCenter;
    }
        
    // 菊花
    if (self.loadingView.constraints.count == 0) {
        self.loadingView.center = arrowCenter;
    }
    
    //arrowView的色调与stateLabel的字体颜色一致
    self.arrowView.tintColor = self.stateLabel.textColor;
}

这里需要注意就是箭头或者小菊花，是处于 stateLabel 和
lastUpdateTimeLabel 左边的。在计算arrowView或loadingView的
center的时候，需要获取stateLabel和lastUpdatedTimeLabel两个控件的
宽度并比较大小，将较大的一个作为两个label的‘最宽距离’，再计算center，
这样一来就不会重合了。

关于计算宽度的方法，大家可以在以后的实践中使用：

    - (CGFloat)mj_textWith {
        CGFloat stringWidth = 0;
        CGSize size = CGSizeMake(MAXFLOAT, MAXFLOAT);
        if (self.text.length > 0) {
    #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 70000
            stringWidth =[self.text
                          boundingRectWithSize:size
                          options:NSStringDrawingUsesLineFragmentOrigin
                          attributes:@{NSFontAttributeName:self.font}
                          context:nil].size.width;
    #else
            
            stringWidth = [self.text sizeWithFont:self.font
                                 constrainedToSize:size
                                     lineBreakMode:NSLineBreakByCharWrapping].width;
    #endif
        }
        return stringWidth;
    }

3、 setState 方法实现。与父类的同名方法一样，这里同样是判断状态的变化，处理相关事件。这里处理的是箭头和小菊花的动画。

    - (void)setState:(MJRefreshState)state
    {
    MJRefreshCheckState
    
    // 根据状态更新arrowView和loadingView的显示
    if (state == MJRefreshStateIdle) {
       
        //1. 设置为默认状态
        if (oldState == MJRefreshStateRefreshing) {
            
            //1.1 从正在刷新状态中切换过来
            self.arrowView.transform = CGAffineTransformIdentity;
            
            [UIView animateWithDuration:MJRefreshSlowAnimationDuration animations:^{
                //隐藏菊花
                self.loadingView.alpha = 0.0;
                
            } completion:^(BOOL finished) {
                
                // 如果执行完动画发现不是idle状态，就直接返回，进入其他状态
                if (self.state != MJRefreshStateIdle) return;
                //菊花停止旋转
                self.loadingView.alpha = 1.0;
                [self.loadingView stopAnimating];
                //显示箭头
                self.arrowView.hidden = NO;
            }];
            
        } else {
            //1.2 从其他状态中切换过来
            [self.loadingView stopAnimating];
            //显示箭头并设置为初始状态
            self.arrowView.hidden = NO;
            [UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
                self.arrowView.transform = CGAffineTransformIdentity;
            }];
        }
        
    } else if (state == MJRefreshStatePulling) {
        
        //2. 设置为可以刷新状态
        [self.loadingView stopAnimating];
        self.arrowView.hidden = NO;
        [UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
            //箭头倒立
            self.arrowView.transform = CGAffineTransformMakeRotation(0.000001 - M_PI);
        }];
        
    } else if (state == MJRefreshStateRefreshing) {
        
        //3. 设置为正在刷新状态
        self.loadingView.alpha = 1.0; // 防止refreshing -> idle的动画完毕动作没有被执行
        //菊花旋转
        [self.loadingView startAnimating];
        //隐藏arrowView
        self.arrowView.hidden = YES;
    }
}

3、小结

以上，我们已经从基类 MJrefreshComponent 到 MJRefreshNormalHeader ，完整地梳理了继承的方法实现和各自的功能代码。

可以清晰的看到，每个子类都实现了父类的 prepare、placeView、setState 方法。每一个子类分工明确，结构清晰。

MJRefreshHeader: 处理了 header 的高度，并且调整了 header 在 scrollView 里面的位置。

MJRefreshStateHeader:处理了 header 内部两个子控件 stateLabel 和 lastUpdateeTimeLabel 的布局和不同状态的不同文字显示。

MJRefreshNormalHeader:处理了 header 内部的另外两个子控件，小箭头和小菊花的布局，以及不同状态的显示。

以上的结构，把一个看起来简单的 header 分成四个类来写。很好的把子控件之间耦合度降低，便于我们进行定制化处理。

例如该框架里的MJRefreshGifHeader,它和MJRefreshNormalHeader属于同一级，都是继承于MJRefreshStateHeader。因为二者都具有相同形式的stateLabel和lastUpdatedTimeLabel，唯一不同的就是左侧的部分：

MJRefreshNormalHeader的左侧是箭头。
MJRefreshGifHeader的左侧则是一个gif动画。

相关代码解析，此处就不一一说明。

可以参考：MJRefresh源码解析主要思路

4、header 与 UIScrollView 的关系

上面的三大步骤，其实都是在讲一个 header 的构成。

那我们，平常在给 UITableView 或者 UICollectionView 添加 header 的过程到底是怎么实现的呢？

下面就带大家看一看，header 到底是怎么添加到父视图 UIScrollView 上的。

此处，有个问题要清楚：header 为什么是添加在 UIScrollView 上的呢？

答：**UITableView 和 UICollectionView 都是继承自 UIScrollView **。

接下来又有问题了：系统自带的 UIScrollView 怎么可以添加子视图 header 呢？

答：使用 runtime 的关联属性+category，可以给UIScrollView 添加两个属性，header 和 footer 。（运行时只是参加我的Objective-C 的 runtime 特性与小蝌蚪找妈妈
）

以上，两个问题明白了，就可以去研究 MJRefresh 框架里面的 UIScrollView+MJRefresh类。

关联属性方法：

- (void)setMj_header:(MJRefreshHeader *)mj_header
{
    if (mj_header != self.mj_header) {
        // 删除旧的，添加新的
        [self.mj_header removeFromSuperview];
        [self insertSubview:mj_header atIndex:0];
        
        // 存储新的
        [self willChangeValueForKey:@"mj_header"]; // KVO
        objc_setAssociatedObject(self, &MJRefreshHeaderKey,
                                 mj_header, OBJC_ASSOCIATION_ASSIGN);
        [self didChangeValueForKey:@"mj_header"]; // KVO
    }
}

- (MJRefreshHeader *)mj_header
{
    return objc_getAssociatedObject(self, &MJRefreshHeaderKey);
}

这里把 header 添加到 UIScrollView 里面使用的是 UIView 的方法：

[self insertSubview:mj_header atIndex:0];

footer 的添加也是同理。

到这里，可以知道利用关联属性，可以把 header 添加到 UIScrollView 上面。

但大家有没有想过一个问题：

header 是 UIScrollView 的子控件，header 控件是怎样对 UIScrollView 父控件添加 KVO 的监听的呢？

这一点，至关重要，如果子控件 header 无法给父控件添加监听事件，那么，header 就不会响应状态的变化。

下面来看看，MJRefresh 框架是怎么做的：

在 header 的基类里面声明了一个成员变量：

/** 刷新控件的基类 */
@interface MJRefreshComponent : UIView
{
    /** 记录scrollView刚开始的inset */
    UIEdgeInsets _scrollViewOriginalInset;
    /** 父控件 */
    __weak UIScrollView *_scrollView;
}

紧接着 MJRefreshComponent.m 文件里实现了方法 willMoveToSuperview ：

- (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 = 0;
        
        // 记录UIScrollView
        _scrollView = (UIScrollView *)newSuperview;
        // 设置永远支持垂直弹簧效果
        _scrollView.alwaysBounceVertical = YES;
        // 记录UIScrollView最开始的contentInset
        _scrollViewOriginalInset = _scrollView.contentInset;
        
        // 添加监听
        [self addObservers];
    }
}

willMoveToSuperview 是 UIView 的方法，在当前的 UIView 被添加到父类的时候就会调用。

还记得上面的方法：[self insertSubview:mj_header atIndex:0]？

这句话，把 header 实例对象添加到了 UIScrollView 里面。这个方法之后，会立马调用 willMoveToSuperview 方法。

在 willMoveToSuperview 方法里面，

 // 记录UIScrollView
_scrollView = (UIScrollView *)newSuperview;
// 设置永远支持垂直弹簧效果
_scrollView.alwaysBounceVertical = YES;
// 记录UIScrollView最开始的contentInset
_scrollViewOriginalInset = _scrollView.contentInset;

// 添加监听
[self addObservers];

这样，就实现了，子控件 header 对于父控件 UIScrollView 的弱引用，
同时，添加了监听方法。

   //MJRefreshComponent.m
    #pragma mark - KVO监听
    - (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];
    }

经过上面的分析，应该清楚的是：willMoveToSuperview 方法，连接了 UIScrollView 和动态添加的 header 的调用关系。

5、实用的知识点

1、关键字 NS_REQUIRES_SUPER

这个关键字 NS_REQUIRES_SUPER 放在方法声明的后面，意思是说，子类在实现父类的这个方法的时候，必须先调用父类方法。

比如：在 MJRefreshComponent.h 里面

/** 初始化 */
- (void)prepare NS_REQUIRES_SUPER;
/** 摆放子控件frame */
- (void)placeSubviews NS_REQUIRES_SUPER;
/** 当scrollView的contentOffset发生改变的时候调用 */
- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change NS_REQUIRES_SUPER;
/** 当scrollView的contentSize发生改变的时候调用 */
- (void)scrollViewContentSizeDidChange:(NSDictionary *)change NS_REQUIRES_SUPER;
/** 当scrollView的拖拽状态发生改变的时候调用 */
- (void)scrollViewPanStateDidChange:(NSDictionary *)change NS_REQUIRES_SUPER;

2、关联属性的应用

此处略过。放上 Objective-C 的 runtime 特性与小蝌蚪找妈妈
。

3、计算 UILabel 宽度的方法

    - (CGFloat)mj_textWith {
        CGFloat stringWidth = 0;
        CGSize size = CGSizeMake(MAXFLOAT, MAXFLOAT);
        if (self.text.length > 0) {
    #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 70000
            stringWidth =[self.text
                          boundingRectWithSize:size
                          options:NSStringDrawingUsesLineFragmentOrigin
                          attributes:@{NSFontAttributeName:self.font}
                          context:nil].size.width;
    #else
            
            stringWidth = [self.text sizeWithFont:self.font
                                 constrainedToSize:size
                                     lineBreakMode:NSLineBreakByCharWrapping].width;
    #endif
        }
        return stringWidth;
    }

4、架构的思想

不得不说，MJRefresh 确实是一个优秀的 iOS 开源库。

结构清晰，分工明确。完美的诠释了编程的基本原则：单一职责原则。

难怪，很多大牛都说，编程能力的进阶需要研究开源库。

希望，大家有所收获。

参考文章：

1、MJRefresh源码解析主要思路

2、自定义下拉控件的思路

3、调用关系分析

MJRefresh 源码分析——妈妈再也不用担心我的下拉刷新

1、总体的思路描述：

2、每个类的具体功能介绍

MJRefreshComponent (基类)

有哪些功能：

具体实现代码：

3、小结

4、header 与 UIScrollView 的关系

5、实用的知识点

1、关键字 NS_REQUIRES_SUPER

2、关联属性的应用

3、计算 UILabel 宽度的方法

4、架构的思想

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS学习笔记

iOS Developer

iOS进阶之路

iOS技术资料

iOS 知识点