MJRefresh 源码解析

MJRefresh是李明杰老师的作品,到现在已经有9800多颗star了,是一个简单实用,功能强大的iOS下拉刷新(也支持上拉加载更多)控件。它的可定制性很高,几乎可以满足大部分下拉刷新的设计需求,值得学习。

该框架的结构设计得很清晰,使用一个基类MJRefreshComponent来做一些基本的设定,然后通过继承的方式,让MJRefreshHeaderMJRefreshFooter分别具备下拉刷新和上拉加载的功能。从继承机构来看可以分为三层,具体可以从下面的图里看出来:

11859001-2f61aa201798594e

框架组织结构图

首先来看一下该控件的基类:MJRefreshComponent:

MJRefreshComponent

这个类作为该控件的基类,涵盖了基类所具备的一些:状态,回调block等,大致分成下面这5种职能:

有哪些职能?

  1. 声明控件的所有状态。
  2. 声明控件的回调函数。
  3. 添加监听。
  4. 提供刷新,停止刷新接口。
  5. 提供子类需要实现的方法。

职能如何实现?

1. 声明控件的所有状态

2. 声明控件的回调函数

3. 添加监听

监听的声明:

对于监听的处理:

4. 提供刷新,停止刷新接口

交给子类实现的方法:

5. 提供子类需要实现的方法

从上面等结构图可以看出,紧接着这个基类,下面分为MJRefreshHeaderMJRefreshFooter,这里顺着MJRefreshHeader这个分支向下展开:

MJRefreshHeader

MJRefreshHeader继承于MJRefreshComponent,它做了这几件事:

有哪些职能?

  1. 初始化。
  2. 设置header高度。
  3. 重新调整y值。
  4. 根据contentOffset的变化,来切换状态(默认状态,可以刷新的状态,正在刷新的状态),实现方法是:scrollViewContentOffsetDidChange:
  5. 在切换状态时,执行相应的操作。实现方法是:setState:

职能如何实现?

1. 初始化

初始化有两种方法:

2. 设置header高度

通过重写prepare方法来设置header的高度:

3. 重新调整y值

通过重写placeSubviews方法来重新调整y值:

4. 状态切换的代码:

需要注意三点:

  1. 这里的状态有三种:默认状态(MJRefreshStateIdle),可以刷新的状态(MJRefreshStatePulling)以及正在刷新的状态(MJRefreshStateRefreshing)。
  2. 状态切换的因素有两个:一个是下拉的距离是否超过临界值,另一个是 手指是否离开屏幕。
  3. 注意:可以刷新的状态正在刷新的状态是不同的。因为在手指还贴在屏幕的时候是不能进行刷新的。所以即使在下拉的距离超过了临界距离(状态栏 + 导航栏 + header高度),如果手指没有离开屏幕,那么也不能马上进行刷新,而是将状态切换为:可以刷新。一旦手指离开了屏幕,马上将状态切换为正在刷新。

这里提供一张图来体现三个状态的不同:

12859001-d203fc8639a02362

三个状态

5. 状态切换时的相应操作:

这里需要注意两点:

  1. 这里状态的切换,主要围绕着两种:默认状态和正在刷新状态。也就是针对开始刷新结束刷新这两个切换点。
  2. 从正在刷新状态状态切换为默认状态时(结束刷新),需要记录刷新结束的时间。因为header里面有一个默认的label是用来显示上次刷新的时间的。

MJRefreshStateHeader

这个类是MJRefreshHeader类的子类,它做了两件事:

有哪些职能?

  1. 简单布局了stateLabellastUpdatedTimeLabel
  2. 根据控件状态的切换(默认状态,正在刷新状态),实现了这两个label显示的文字的切换。

给一张图,让大家直观感受一下这两个控件:

13859001-d8f5475e0f8cff0c

两个Label

职能如何实现?

这个类通过覆盖父类三个方法来实现上述两个实现:

方法1:prepare方法

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

方法2:placeSubviews方法

这里主要是对lastUpdatedTimeLabelstateLabel进行布局。要注意lastUpdatedTimeLabel隐藏的情况。

方法3: setState:方法

在这里,根据传入的state的不同,在stateLabellastUpdatedTimeLabel里切换相应的文字。

  • stateLabel里的文字直接从stateTitles字典里取出即可。
  • lastUpdatedTimeLabel里的文字需要通过一个方法来取出即可:

在这里注意两点:

  1. 作者通过使用block来让用户自己定义日期现实的格式,如果用户没有自定义,就使用作者提供的默认格式。
  2. 在默认格式的设置里,判断了是否是今日,是否是今年的情况。在以后设计显示时间的labe的时候可以借鉴一下。

MJRefreshNormalHeader

有哪些职能?

MJRefreshNormalHeader 继承于 MJRefreshStateHeader,它主要做了两件事:

  1. 它在MJRefreshStateHeader上添加了_arrowViewloadingView
  2. 布局了这两个view并在Refresh控件的状态切换的时候改变这两个view的样式。

还是给一张图来直观感受一下这两个view:

14859001-ee8c1c9c41dd5601

两个view

职能如何实现?

同MJRefreshStateHeader一样,也是重写了父类的三个方法:

方法1:prepare

方法2:placeSubviews

在这里注意一点:因为stateLabellastUpdatedTimeLabel是上下并排分布的,而arrowViewloadingView是在这二者的左边,所以为了避免这两组重合,在计算arrowViewloadingView的center的时候,需要获取stateLabellastUpdatedTimeLabel两个控件的宽度并比较大小,将较大的一个作为两个label的‘最宽距离’,再计算center,这样一来就不会重合了。
而对于如何计算宽度,作者给出了一个方案,大家可以在以后的实践中使用:

方法3: setState:

到此为止,我们已经从MJRefreshComponentMJRefreshNormalHeader的实现过程看了一遍。可以看出,作者将prepare,placeSubviews以及setState:方法作为基类的方法,让下面的子类去一层一层实现。

而每一层的子类,根据自身的职责,分别按照自己的方式来实现这三个方法:

  • MJRefreshHeader: 负责header的高度和调整header自身在外部的位置。
  • MJRefreshStateHeader:负责header内部的stateLabellastUpdatedTimeLabel的布局和不同状态下内部文字的显示。
  • MJRefreshNormalHeader:负责header内部的loadingView以及arrowView的布局和不同状态下的显示。

这样做的好处是,如果想要增加某种类型的header,只要在某一层上做文章即可。例如该框架里的MJRefreshGifHeader,它和MJRefreshNormalHeader属于同一级,都是继承于MJRefreshStateHeader。因为二者都具有相同形式的stateLabellastUpdatedTimeLabel,唯一不同的就是左侧的部分:

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

还是提供一张图来直观感受一下:

15859001-3664f693d7d33f89

normalHeader 与 gifHeader

下面我们来看一下的实现:

MJRefreshGifHeader

它提供了两个接口,是用来设置不同状态下使用的图片数组的:

有哪些职能?

然后,和MJRefreshNormalHeader一样,它也重写了基类提供的三个方法来实现显示gif图片的职能。

职能如何实现?

1. 初始化和label的间距

2. 根据label的宽度和存在与否设置gif的位置

3. 根据传入状态的不同来设置动画


Footer类是用来处理上拉加载的,实现原理和下拉刷新很类似,在这里先不介绍了~

总的来说,该框架设计得非常工整:通过一个基类来定义一些状态和一些需要子类实现的接口。通过一层一层地继承,让每一层的子类各司其职,只完成真正属于自己的任务,提高了框架的可定制性,而且对于功能的扩展和bug的追踪也很有帮助,非常值得我们参考与借鉴。

本篇文章已经同步到我个人博客:J_Knight MJRefresh 源码解析

欢迎来参观 ^^

本文已在版权印备案,如需转载请访问版权印。48422928

获取授权

1 3 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部