MJRefresh是李明杰老师的作品,到现在已经有9800多颗star了,是一个简单实用,功能强大的iOS下拉刷新(也支持上拉加载更多)控件。它的可定制性很高,几乎可以满足大部分下拉刷新的设计需求,值得学习。
该框架的结构设计得很清晰,使用一个基类MJRefreshComponent
来做一些基本的设定,然后通过继承的方式,让MJRefreshHeader
和MJRefreshFooter
分别具备下拉刷新和上拉加载的功能。从继承机构来看可以分为三层,具体可以从下面的图里看出来:
首先来看一下该控件的基类:MJRefreshComponent:
MJRefreshComponent
这个类作为该控件几类,涵盖了基类所具备的成份:状态,回调block等,大致分成下面这5种职能:
有哪些职能?
- 声明控件的所有状态。
- 声明控件的回调函数。
- 添加监听。
- 提供刷新,停止刷新接口。
- 提供子类需要实现的方法。
职能如何实现?
1. 声明控件的所有状态
1
2
3
4
5
6
7
8
9
10
11
12
13
|
typedef
NS_ENUM(
NSInteger, MJRefreshState) {
MJRefreshStateIdle =
1,
MJRefreshStatePulling,
MJRefreshStateRefreshing,
MJRefreshStateWillRefresh,
MJRefreshStateNoMoreData
};
|
2. 声明控件的回调函数
1
2
3
4
5
6
|
typedef
void (^MJRefreshComponentRefreshingBlock)();
typedef
void (^MJRefreshComponentbeginRefreshingCompletionBlock)();
typedef
void (^MJRefreshComponentEndRefreshingCompletionBlock)();
|
3. 添加监听
监听的声明:
1
2
3
4
5
6
7
8
|
- (
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];
}
|
对于监听的处理:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
- (
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];
}
}
|
4. 提供刷新,停止刷新接口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
#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 {
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;
}
|
交给子类实现的方法:
1
2
3
4
5
6
7
8
9
|
- (
void)prepare
NS_REQUIRES_SUPER;
- (
void)placeSubviews
NS_REQUIRES_SUPER;
- (
void)scrollViewContentOffsetDidChange:(
NSDictionary *)change
NS_REQUIRES_SUPER;
- (
void)scrollViewContentSizeDidChange:(
NSDictionary *)change
NS_REQUIRES_SUPER;
- (
void)scrollViewPanStateDidChange:(
NSDictionary *)change
NS_REQUIRES_SUPER;
|
5. 提供子类需要实现的方法
1
2
3
4
5
6
7
8
9
10
11
|
#pragma mark - 交给子类们去实现
- (
void)prepare
NS_REQUIRES_SUPER;
- (
void)placeSubviews
NS_REQUIRES_SUPER;
- (
void)scrollViewContentOffsetDidChange:(
NSDictionary *)change
NS_REQUIRES_SUPER;
- (
void)scrollViewContentSizeDidChange:(
NSDictionary *)change
NS_REQUIRES_SUPER;
- (
void)scrollViewPanStateDidChange:(
NSDictionary *)change
NS_REQUIRES_SUPER;
|
从上面等结构图可以看出,紧接着这个基类,下面分为MJRefreshHeader
和MJRefreshFooter
,这里顺着MJRefreshHeader
这个分支向下展开:
MJRefreshHeader
继承于MJRefreshComponent
,它做了这几件事:
有哪些职能?
- 初始化。
- 设置header高度。
- 重新调整y值。
- 根据
contentOffset
的变化,来切换状态(默认状态,可以刷新的状态,正在刷新的状态),实现方法是:scrollViewContentOffsetDidChange:
。 - 在切换状态时,执行相应的操作。实现方法是:
setState:
。
职能如何实现?
####1. 初始化
初始化有两种方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
+ (
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;
}
|
通过重写prepare
方法来设置header的高度:
1
2
3
4
5
6
7
8
9
10
|
- (
void)prepare
{
[
super prepare];
self.lastUpdatedTimeKey = MJRefreshHeaderLastUpdatedTimeKey;
self.mj_h = MJRefreshHeaderHeight;
}
|
3. 重新调整y值
通过重写placeSubviews
方法来重新调整y值:
1
2
3
4
5
6
7
8
|
- (
void)placeSubviews
{
[
super placeSubviews];
self.mj_y = -
self.mj_h -
self.ignoredScrollViewContentInsetTop;
}
|
4. 状态切换的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
- (
void)scrollViewContentOffsetDidChange:(
NSDictionary *)change
{
[
super scrollViewContentOffsetDidChange:change];
if (
self.state == MJRefreshStateRefreshing) {
if (
self.window ==
nil)
return;
CGFloat insetT = -
self.scrollView.mj_offsetY > _scrollViewOriginalInset.top ? -
self.scrollView.mj_offsetY : _scrollViewOriginalInset.top;
insetT = insetT >
self.mj_h + _scrollViewOriginalInset.top ?
self.mj_h + _scrollViewOriginalInset.top : insetT;
self.scrollView.mj_insetT = insetT;
self.insetTDelta = _scrollViewOriginalInset.top - insetT;
return;
}
_scrollViewOriginalInset =
self.scrollView.contentInset;
CGFloat offsetY =
self.scrollView.mj_offsetY;
CGFloat happenOffsetY = -
self.scrollViewOriginalInset.top;
if (offsetY > happenOffsetY)
return;
CGFloat normal2pullingOffsetY = happenOffsetY -
self.mj_h;
CGFloat pullingPercent = (happenOffsetY - offsetY) /
self.mj_h;
if (
self.scrollView.isDragging) {
self.pullingPercent = pullingPercent;
if (
self.state == MJRefreshStateIdle && offsetY < normal2pullingOffsetY) {
self.state = MJRefreshStatePulling;
}
else
if (
self.state == MJRefreshStatePulling && offsetY >= normal2pullingOffsetY) {
self.state = MJRefreshStateIdle;
}
}
else
if (
self.state == MJRefreshStatePulling) {
[
self beginRefreshing];
}
else
if (pullingPercent <
1) {
self.pullingPercent = pullingPercent;
}
}
|
需要注意三点:
- 这里的状态有三种:默认状态(MJRefreshStateIdle),可以刷新的状态(MJRefreshStatePulling)以及正在刷新的状态(MJRefreshStateRefreshing)。
- 状态切换的因素有两个:一个是下拉的距离是否超过临界值,另一个是 手指是否离开屏幕。
- 注意:可以刷新的状态和正在刷新的状态是不同的。因为在手指还贴在屏幕的时候是不能进行刷新的。所以即使在下拉的距离超过了临界距离(状态栏 + 导航栏 + header高度),如果手指没有离开屏幕,那么也不能马上进行刷新,而是将状态切换为:可以刷新。一旦手指离开了屏幕,马上将状态切换为正在刷新。
这里提供一张图来体现三个状态的不同:
5. 状态切换时的相应操作:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
- (
void)setState:(MJRefreshState)state
{
MJRefreshCheckState
if (state == MJRefreshStateIdle) {
if (oldState != MJRefreshStateRefreshing)
return;
[[
NSUserDefaults standardUserDefaults] setObject:[
NSDate date] forKey:
self.lastUpdatedTimeKey];
[[
NSUserDefaults standardUserDefaults] synchronize];
[
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) {
dispatch_async(dispatch_get_main_queue(), ^{
[
UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
CGFloat top =
self.scrollViewOriginalInset.top +
self.mj_h;
self.scrollView.mj_insetT = top;
[
self.scrollView setContentOffset:
CGPointMake(
0, -top) animated:
NO];
} completion:^(
BOOL finished) {
[
self executeRefreshingCallback];
}];
});
}
}
|
这里需要注意两点:
- 这里状态的切换,主要围绕着两种:默认状态和正在刷新状态。也就是针对开始刷新和结束刷新这两个切换点。
- 从正在刷新状态状态切换为默认状态时(结束刷新),需要记录刷新结束的时间。因为header里面有一个默认的label是用来显示上次刷新的时间的。
这个类是MJRefreshHeader
类的子类,它做了两件事:
有哪些职能?
- 简单布局了
stateLabel
和lastUpdatedTimeLabel
。 - 根据控件状态的切换(默认状态,正在刷新状态),实现了这两个label显示的文字的切换。
给一张图,让大家直观感受一下这两个控件:
职能如何实现?
这个类通过覆盖父类三个方法来实现上述两个实现:
方法1:prepare方法
1
2
3
4
5
6
7
8
9
10
11
12
|
- (
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形式
1
2
3
4
5
6
|
- (
void)setTitle:(
NSString *)title forState:(MJRefreshState)state
{
if (title ==
nil)
return;
self.stateTitles[@(state)] = title;
self.stateLabel.text =
self.stateTitles[@(
self.state)];
}
|
方法2:placeSubviews方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
- (
void)placeSubviews
{
[
super placeSubviews];
if (
self.stateLabel.hidden)
return;
BOOL noConstrainsOnStatusLabel =
self.stateLabel.constraints.count ==
0;
if (
self.lastUpdatedTimeLabel.hidden) {
if (noConstrainsOnStatusLabel)
self.stateLabel.frame =
self.bounds;
}
else {
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;
}
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;
}
}
}
|
这里主要是对lastUpdatedTimeLabel
和stateLabel
进行布局。要注意lastUpdatedTimeLabel
隐藏的情况。
方法3: setState:方法
1
2
3
4
5
6
7
8
9
10
|
- (
void)setState:(MJRefreshState)state
{
MJRefreshCheckState
self.stateLabel.text =
self.stateTitles[@(state)];
self.lastUpdatedTimeKey =
self.lastUpdatedTimeKey;
}
|
在这里,根据传入的state的不同,在stateLabel
和lastUpdatedTimeLabel
里切换相应的文字。
-
stateLabel
里的文字直接从stateTitles
字典里取出即可。 -
lastUpdatedTimeLabel
里的文字需要通过一个方法来取出即可:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
- (
void)setLastUpdatedTimeKey:(
NSString *)lastUpdatedTimeKey
{
[
super setLastUpdatedTimeKey:lastUpdatedTimeKey];
if (
self.lastUpdatedTimeLabel.hidden)
return;
NSDate *lastUpdatedTime = [[
NSUserDefaults standardUserDefaults] objectForKey:lastUpdatedTimeKey];
if (
self.lastUpdatedTimeText) {
self.lastUpdatedTimeLabel.text =
self.lastUpdatedTimeText(lastUpdatedTime);
return;
}
if (lastUpdatedTime) {
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]];
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];
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]];
}
}
|
在这里注意两点:
- 作者通过使用block来让用户自己定义日期现实的格式,如果用户没有自定义,就使用作者提供的默认格式。
- 在默认格式的设置里,判断了是否是今日,是否是今年的情况。在以后设计显示时间的labe的时候可以借鉴一下。
有哪些职能?
MJRefreshNormalHeader 继承于 MJRefreshStateHeader,它主要做了两件事:
- 它在MJRefreshStateHeader上添加了
_arrowView
和loadingView
。 - 布局了这两个view并在Refresh控件的状态切换的时候改变这两个view的样式。
还是给一张图来直观感受一下这两个view:
职能如何实现?
同MJRefreshStateHeader一样,也是重写了父类的三个方法:
方法1:prepare
1
2
3
4
5
6
|
- (
void)prepare
{
[
super prepare];
self.activityIndicatorViewStyle =
UIActivityIndicatorViewStyleGray;
}
|
方法2:placeSubviews
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
- (
void)placeSubviews
{
[
super placeSubviews];
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;
}
CGFloat textWidth = MAX(stateWidth, timeWidth);
arrowCenterX -= textWidth /
2 +
self.labelLeftInset;
}
CGFloat arrowCenterY =
self.mj_h *
0.5;
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;
}
self.arrowView.tintColor =
self.stateLabel.textColor;
}
|
在这里注意一点:因为stateLabel
和lastUpdatedTimeLabel
是上下并排分布的,而arrowView
或loadingView
是在这二者的左边,所以为了避免这两组重合,在计算arrowView
或loadingView
的center的时候,需要获取stateLabel
和lastUpdatedTimeLabel
两个控件的宽度并比较大小,将较大的一个作为两个label的‘最宽距离’,再计算center,这样一来就不会重合了。
而对于如何计算宽度,作者给出了一个方案,大家可以在以后的实践中使用:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
- (
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
- (
void)setState:(MJRefreshState)state
{
MJRefreshCheckState
if (state == MJRefreshStateIdle) {
if (oldState == MJRefreshStateRefreshing) {
self.arrowView.transform =
CGAffineTransformIdentity;
[
UIView animateWithDuration:MJRefreshSlowAnimationDuration animations:^{
self.loadingView.alpha =
0.0;
} completion:^(
BOOL finished) {
if (
self.state != MJRefreshStateIdle)
return;
self.loadingView.alpha =
1.0;
[
self.loadingView stopAnimating];
self.arrowView.hidden =
NO;
}];
}
else {
[
self.loadingView stopAnimating];
self.arrowView.hidden =
NO;
[
UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
self.arrowView.transform =
CGAffineTransformIdentity;
}];
}
}
else
if (state == MJRefreshStatePulling) {
[
self.loadingView stopAnimating];
self.arrowView.hidden =
NO;
[
UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
self.arrowView.transform =
CGAffineTransformMakeRotation(
0.000001 - M_PI);
}];
}
else
if (state == MJRefreshStateRefreshing) {
self.loadingView.alpha =
1.0;
[
self.loadingView startAnimating];
self.arrowView.hidden =
YES;
}
}
|
到此为止,我们已经从MJRefreshComponent
到MJRefreshNormalHeader
的实现过程看了一遍。可以看出,作者将prepare
,placeSubviews
以及setState:
方法作为基类的方法,让下面的子类去一层一层实现。
而每一层的子类,根据自身的职责,分别按照自己的方式来实现这三个方法:
-
MJRefreshHeader
: 负责header的高度和调整header自身在外部的位置。 -
MJRefreshStateHeader
:负责header内部的stateLabel
和lastUpdatedTimeLabel
的布局和不同状态下内部文字的显示。 -
MJRefreshNormalHeader
:负责header内部的loadingView
以及arrowView
的布局和不同状态下的显示。
这样做的好处是,如果想要增加某种类型的header,只要在某一层上做文章即可。例如该框架里的MJRefreshGifHeader
,它和MJRefreshNormalHeader
属于同一级,都是继承于MJRefreshStateHeader
。因为二者都具有相同形式的stateLabel
和lastUpdatedTimeLabel
,唯一不同的就是左侧的部分:
-
MJRefreshNormalHeader
的左侧是箭头。 -
MJRefreshGifHeader
的左侧则是一个gif动画。
还是提供一张图来直观感受一下:
下面我们来看一下的实现:
它提供了两个接口,是用来设置不同状态下使用的图片数组的:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
- (
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;
}
}
- (
void)setImages:(
NSArray *)images forState:(MJRefreshState)state
{
[
self setImages:images duration:images.count *
0.1 forState:state];
}
|
有哪些职能?
然后,和MJRefreshNormalHeader
一样,它也重写了基类提供的三个方法来实现显示gif图片的职能。
职能如何实现?
####1. 初始化和label的间距
1
2
3
4
5
6
7
|
- (
void)prepare
{
[
super prepare];
self.labelLeftInset =
20;
}
|
####2. 根据label的宽度和存在与否设置gif的位置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
- (
void)placeSubviews
{
[
super placeSubviews];
if (
self.gifView.constraints.count)
return;
self.gifView.frame =
self.bounds;
if (
self.stateLabel.hidden &&
self.lastUpdatedTimeLabel.hidden) {
self.gifView.contentMode =
UIViewContentModeCenter;
}
else {
self.gifView.contentMode =
UIViewContentModeRight;
CGFloat stateWidth =
self.stateLabel.mj_textWith;
CGFloat timeWidth =
0.0;
if (!
self.lastUpdatedTimeLabel.hidden) {
timeWidth =
self.lastUpdatedTimeLabel.mj_textWith;
}
CGFloat textWidth = MAX(stateWidth, timeWidth);
self.gifView.mj_w =
self.mj_w *
0.5 - textWidth *
0.5 -
self.labelLeftInset;
}
}
|
3. 根据传入状态的不同来设置动画
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
- (
void)setState:(MJRefreshState)state
{
MJRefreshCheckState
if (state == MJRefreshStatePulling || state == MJRefreshStateRefreshing) {
NSArray *images =
self.stateImages[@(state)];
if (images.count ==
0)
return;
[
self.gifView stopAnimating];
if (images.count ==
1) {
self.gifView.image = [images lastObject];
}
else {
self.gifView.animationImages = images;
self.gifView.animationDuration = [
self.stateDurations[@(state)] doubleValue];
[
self.gifView startAnimating];
}
}
else
if (state == MJRefreshStateIdle) {
[
self.gifView stopAnimating];
}
}
|
Footer类是用来处理上拉加载的,实现原理和下拉刷新很类似,在这里先不介绍了~
总的来说,该框架设计得非常工整:通过一个基类来定义一些状态和一些需要子类实现的接口。通过一层一层地继承,让每一层的子类各司其职,只完成真正属于自己的任务,提高了框架的可定制性,而且对于功能的扩展和bug的追踪也很有帮助,非常值得我们参考与借鉴。