MJRefresh源码框架分析

MJRefresh是一款非常优秀的刷新控件。代码简洁，优雅。今天有时间对源代码阅读了一下。对MJRefresh的宏观设计非常赞叹。所谓大道至简就是这样吧。

 

MJRefresh所采用的主要设计模式非常简单，是类继承 + 模版方法设计模式。

所以子类也主要围绕着这几个模版方法和继承方法进行定制行为的。

 

模版方法设计模式：

由父类MJRefreshComponent定义方法接口并添加到执行步骤中，对象执行中，在特定时间一定会调用的方法。由子类在需要的时候进行自定义实现。

在MJRefreshComponent类中的重要模版方法如下：

[self prepare];//在父类initWithFrame方法调用
[self placeSubviews];//在父类layoutSubviews方法调用

 

类继承：父类定义了方法的基本实现，子类在此基础上进行持续增加，达到复杂功能。与模版方法的区别是没有固定的执行步骤。

在MJRefreshComponent类中的重要继承方法如下：

//状态设置
- (void)setState:(MJRefreshState)state
//事件监听
- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change{}
- (void)scrollViewContentSizeDidChange:(NSDictionary *)change{}
- (void)scrollViewPanStateDidChange:(NSDictionary *)change{}

 

MJRefresh作为刷新组件，核心逻辑根据ScrollView的Offset不同更新相应的状态和数据，

根据方法名字应该是MJRefreshComponent类中的重要继承方法：

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

 

下面看一下其子类MJRefreshHeader对这个方法的实现：

MJRefreshHeader是父类MJRefreshComponent的子类，其方法声明结构如下：

红框内是主要实现代码应该就是这四个“覆盖父类方法”了

 

子类MJRefreshHeader的两个模版方法实现如下：

 

- (void)prepare
{
    [super prepare];
    
    // 设置key
    self.lastUpdatedTimeKey = MJRefreshHeaderLastUpdatedTimeKey;
    
    // 设置高度
    self.mj_h = MJRefreshHeaderHeight;
}

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

方法prepare：设置属性值

方法placeSubviews：更新UI布局

子类填充后，父类按照约定的步骤时机执行。over！

 

子类MJRefreshHeader的覆盖方法实现如下：

 

- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change
{
    [super scrollViewContentOffsetDidChange:change];
    
    // 在刷新的refreshing状态
    if (self.state == MJRefreshStateRefreshing) {
        // 暂时保留
        //My:当NavigationBar从一个页面滑出时，可能被移除页面，其window为nil
        if (self.window == nil) return;
        
        // sectionheader停留解决
        //My:当scrollView向下偏移的距离超过它的contentInset的上间隔时，取距离大的
        CGFloat insetT = - self.scrollView.mj_offsetY > _scrollViewOriginalInset.top ? - self.scrollView.mj_offsetY : _scrollViewOriginalInset.top;
        //My:当这个距离超过了（刷新控件的高度 + 它的contentInset的上间隔）时，取它们的和值
        insetT = insetT > self.mj_h + _scrollViewOriginalInset.top ? self.mj_h + _scrollViewOriginalInset.top : insetT;
        //My:将这个合理的最大值，设置到它的contentInset的上间隔上。
        self.scrollView.mj_insetT = insetT;
        //My:实际露出的刷新空间高
        self.insetTDelta = _scrollViewOriginalInset.top - insetT;
        return;
    }
    
    // 跳转到下一个控制器时，contentInset可能会变
    _scrollViewOriginalInset = self.scrollView.mj_inset;
    
    // 当前的contentOffset
    CGFloat offsetY = self.scrollView.mj_offsetY;
    // 头部控件刚好出现的offsetY
    CGFloat happenOffsetY = - self.scrollViewOriginalInset.top;
    
    // 如果是向上滚动到看不见头部控件，直接返回
    // >= -> >
    if (offsetY > happenOffsetY) return;
    
    // 普通 和 即将刷新 的临界点
    //My:下拉距离正好是（刷新控件高度+contentInset的上间隔）
    CGFloat normal2pullingOffsetY = happenOffsetY - self.mj_h;
    //My:露出的高度/总高度
    CGFloat pullingPercent = (happenOffsetY - offsetY) / self.mj_h;
    
    if (self.scrollView.isDragging) { // 如果正在拖拽
        self.pullingPercent = pullingPercent;
       
        if (self.state == MJRefreshStateIdle && offsetY < normal2pullingOffsetY) {
             //My:下拉度超过临界值

            // 转为即将刷新状态
            self.state = MJRefreshStatePulling;
        } else if (self.state == MJRefreshStatePulling && offsetY >= normal2pullingOffsetY) {
            //My:下拉度小于临界值

            // 转为普通状态
            self.state = MJRefreshStateIdle;
        }
    } else if (self.state == MJRefreshStatePulling) {
        // 即将刷新 && 手松开

        // 开始刷新
        [self beginRefreshing];
    } else if (pullingPercent < 1) {
        self.pullingPercent = pullingPercent;
    }
}

该方法会随着ScrollView的滚动，其Offset会不断更新，此方法不不断被触发。

操作步骤大概思路是：

1.如果当前处于刷新状态，offset的改变时，设置scrollView的offset为（刷新控件的高度 + 它的contentInset的上间隔）。

2.否则的话，如果处于拖拽时，根据拖拽距离和当前控件状态，更新下一步控件的状态。

详细描述见上面的注释。

 

带有NavigationBar的UIScrollView,默认它的offset = {0, -64}; 默认它的contentInset = {64,0,0,0}

内容展示部分刚好在NavigationBar的下面

 

子类MJRefreshHeader的状态设置后，会调用如下方法，刷新控件的UI：

 

- (void)setState:(MJRefreshState)state
{
    MJRefreshCheckState
    
    // 根据状态做事情
    if (state == MJRefreshStateIdle) {
        if (oldState != MJRefreshStateRefreshing) return;
        
        // 保存刷新时间
        [[NSUserDefaults standardUserDefaults] setObject:[NSDate date] forKey:self.lastUpdatedTimeKey];
        [[NSUserDefaults standardUserDefaults] synchronize];
        
        // 恢复inset和offset
        [UIView animateWithDuration:MJRefreshSlowAnimationDuration animations:^{
            self.scrollView.mj_insetT += self.insetTDelta;
            
            // 自动调整透明度
            if (self.isAutomaticallyChangeAlpha) self.alpha = 0.0;
        } completion:^(BOOL finished) {
            self.pullingPercent = 0.0;
            
            if (self.endRefreshingCompletionBlock) {
                self.endRefreshingCompletionBlock();
            }
        }];
    } else if (state == MJRefreshStateRefreshing) {
        MJRefreshDispatchAsyncOnMainQueue({
            [UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
                if (self.scrollView.panGestureRecognizer.state != UIGestureRecognizerStateCancelled) {
                    CGFloat top = self.scrollViewOriginalInset.top + self.mj_h;
                    // 增加滚动区域top
                    self.scrollView.mj_insetT = top;
                    // 设置滚动位置
                    CGPoint offset = self.scrollView.contentOffset;
                    offset.y = -top;
                    [self.scrollView setContentOffset:offset animated:NO];
                }
            } completion:^(BOOL finished) {
                [self executeRefreshingCallback];
            }];
        })
    }
}

宏MJRefreshCheckState：检查旧状态与新状态是否一致，一致的话就返回。

从刷新转普通状态时：

保存刷新时间，调整菊花透明度，移动offset

转换成刷新状态时：

设置contentInset.top,设置offset

 

逻辑主干是上面的四个方法，其他的逻辑枝叶，想自己研究的话可以翻看源代码。