MJRefresh在iOS中是一个简单实用功能强大的刷新的控件。可定制很高,几乎可以满足大部分的App对刷新控件的要求,值得学习。
该框架使用了模板方法的设计模式(查看上一篇文章),在基类MJRefreshComponent中定义了一些模板方法,具体的细节交给子类去实现,类图结构如下:
imageMJRefreshComponent
这个类作为基类,定义了一些子类需要实现的模板方法,用枚举定义出控件刷新的几种状态,回调等
职能:
- 1.枚举定义刷新控件的状态
- 2.控件的回调函数
- 3.添加监听
- 4.提供刷新,停止刷新接口
- 5.提供子类具体实现的模板方法
1.枚举定义刷新控件的状态
/** 刷新控件的状态 */
typedef NS_ENUM(NSInteger, MJRefreshState) {
/** 普通闲置状态 */
MJRefreshStateIdle = 1,
/** 松开就可以进行刷新的状态 */
MJRefreshStatePulling,
/** 正在刷新中的状态 */
MJRefreshStateRefreshing,
/** 即将刷新的状态 */
MJRefreshStateWillRefresh,
/** 所有数据加载完毕,没有更多的数据了 */
MJRefreshStateNoMoreData
};
属性:
/** 刷新状态 一般交给子类内部实现 */
@property (assign, nonatomic) MJRefreshState state;
2.控件的回调函数
/** 进入刷新状态的回调 */
typedef void (^MJRefreshComponentRefreshingBlock)();
/** 开始刷新后的回调(进入刷新状态后的回调) */
typedef void (^MJRefreshComponentbeginRefreshingCompletionBlock)();
/** 结束刷新后的回调 */
typedef void (^MJRefreshComponentEndRefreshingCompletionBlock)();
3.添加监听
- (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];
}
对监听的处理
- (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.提供刷新,停止刷新接口
#pragma mark 进入刷新状态
- (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];
}
}
}
- (void)beginRefreshingWithCompletionBlock:(void (^)())completionBlock
{
self.beginRefreshingCompletionBlock = completionBlock;
[self beginRefreshing];
}
#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.提供子类具体实现的模板方法
/** 初始化 */
- (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,顺着这个分支向下展开:
MJRefreshHeader
MJRefreshHeader是MJRefreshComponent的子类
职能
- 1.初始化
- 2.实现模板方法->- (void)prepare 准备初始化
- 3.实现模板方法->- (void)placeSubviews摆放控件位置
- 4.实现模板方法->*- (void)scrollViewContentOffsetDidChange:(NSDictionary )change监听contentOffset发生改变
- 5.模板方法->- (void)setState:(MJRefreshState)state根据状态改变来设置滚动的位置
1.初始化
初始化有两种方法:
+ (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;
}
2.模板方法->- (void)prepare 准备工作
- (void)prepare
{
[super prepare];
// 设置用于在NSUserDefaults里存储时间的key
self.lastUpdatedTimeKey = MJRefreshHeaderLastUpdatedTimeKey;
// 设置header的高度
self.mj_h = MJRefreshHeaderHeight;
}
3.模板方法->- (void)placeSubviews调整值
- (void)placeSubviews
{
[super placeSubviews];
// 设置y值(当自己的高度发生改变了,肯定要重新调整Y值,所以放到placeSubviews方法中设置y值)
self.mj_y = - self.mj_h - self.ignoredScrollViewContentInsetTop;
//self.ignoredScrollViewContentInsetTop 如果是10,那么就向上移动10
}
4.实现模板方法->监听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;
}
}
需要注意:
1.这里的状态有三种:默认状态(MJRefreshStateIdle),可以刷新的状态(MJRefreshStatePulling)以及正在刷新的状态(MJRefreshStateRefreshing)。
2.状态切换的因素有两个:一个是下拉的距离是否超过临界值,另一个是 手指是否离开屏幕。
3.注意:可以刷新的状态和正在刷新的状态是不同的。因为在手指还贴在屏幕的时候是不能进行刷新的。所以即使在下拉的距离超过了临界距离(状态栏 + 导航栏 + header高度),如果手指没有离开屏幕,那么也不能马上进行刷新,而是将状态切换为:可以刷新。一旦手指离开了屏幕,马上将状态切换为正在刷新。
5.根据状态改变来设置滚动的位置
- (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];
}];
});
}
}
上面两个是框架的核心代码,通过监听contentOffset的偏移量,来改变state的状态,从而调了state的set方法来修改scrollView的Inset和offset
注意:
1.这里主要是调整scrollView的偏移量,所以只做了两种状态的切换:默认状态和正在刷新状态。也就是针对开始刷新和结束刷新
MJRefreshStateHeader
MJRefreshStateHeader是MJRefreshHeader的子类
职能
- 1.简单布局stateLabel和lastUpdatedTimeLabel
- 2.根据控件状态的切换(默认状态,正在刷新状态),实现了这两个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];
}
- (void)setTitle:(NSString *)title forState:(MJRefreshState)state
{
if (title == nil) return;
self.stateTitles[@(state)] = title;
self.stateLabel.text = self.stateTitles[@(self.state)];
}
在prepare方法里,将每一个状态对应的提示文字放入一个字典里面
模板方法-placeSubviews方法
- (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;
}
}
}
这里主要是对lastUpdatedTimeLabel和stateLabel进行布局。要注意lastUpdatedTimeLabel隐藏的情况。
模板方法-setState方法:
- (void)setState:(MJRefreshState)state
{
MJRefreshCheckState
// 设置状态文字
self.stateLabel.text = self.stateTitles[@(state)];
// 重新设置key(重新显示时间)
self.lastUpdatedTimeKey = self.lastUpdatedTimeKey;
}
在这里,根据传入的state的不同,在stateLabel和lastUpdatedTimeLabel里切换相应的文字
* stateLabel里的文字直接从stateTitles字典里取出即可。
* lastUpdatedTimeLabel里的文字需要通过一个方法来取出即可
MJRefreshNormalHeader
MJRefreshNormalHeader是MJRefreshStateHeader的子类
MJRefreshNormalHeader通过重写三个模板方法,实现了:
- 1.在MJRefreshNormalHeader上添加了_arrowView和loadingView
- 2.布局箭头和加载视图位置和状态切换时状态的改变
模板方法-prepare方法:
- (void)prepare
{
[super prepare];
self.activityIndicatorViewStyle = UIActivityIndicatorViewStyleGray;
}
模板方法-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;
}
模板方法-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;
}
}
通过判断state的状态来切换顶部的箭头和文字,从基类MJRefreshComponent到MJRefreshNormalHeader的实现过程可以看出作者采用了模板方法的设计模式,将最核心的部分设计成模板方法,具体的细节交给子类去实现。
每一层的子类,根据自身的职责,分别按照自己的方式来实现三个方法:
- MJRefreshHeader:负责header的高度和调整header自身在外部的位置
- MJRefreshStateHeader:负责header内部的stateLabel和lastUpdatedTimeLabel的布局和不同的状态下内部文字的显示
- MJRefreshNormalHeader:负责header内部的loadingView以及arrowView的布局和不同状态下的显示。
这样做的好处,如果想要增加某种类型的header,只要在某一层上做文章。例如框架中的MJRefreshGifHeader和MJRefreshNormalHeader是同一级,都是继承于MJRefreshStateHeader,因为二者的相似度很高,只需要将箭头修改成动图。
MJRefreshGifHeader
首先设计了两个方法,用来设置不同状态下的图片的数组:
- (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
{
//如果没有传入duration,则根据图片的多少来计算
[self setImages:images duration:images.count * 0.1 forState:state];
}
具体的实现
实现三个模板方法
1.初始化
- (void)prepare
{
[super prepare];
// 初始化间距
self.labelLeftInset = 20;
}
2.设置控件的位置
- (void)placeSubviews
{
[super placeSubviews];
//如果约束存在,就立即返回
if (self.gifView.constraints.count) return;
self.gifView.frame = self.bounds;
if (self.stateLabel.hidden && self.lastUpdatedTimeLabel.hidden) {
//如果stateLabel和lastUpdatedTimeLabel都在隐藏状态,将gif剧中显示
self.gifView.contentMode = UIViewContentModeCenter;
} else {
//如果stateLabel和lastUpdatedTimeLabel中至少一个存在,则根据label的宽度设置gif的位置
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.state根据设置的状态显示图片
- (void)setState:(MJRefreshState)state
{
MJRefreshCheckState
if (state == MJRefreshStatePulling || state == MJRefreshStateRefreshing) {
//1. 如果传进来的状态是可以刷新和正在刷新
NSArray *images = self.stateImages[@(state)];
if (images.count == 0) return;
[self.gifView stopAnimating];
if (images.count == 1) {
//1.1 单张图片
self.gifView.image = [images lastObject];
} else {
//1.2 多张图片
self.gifView.animationImages = images;
self.gifView.animationDuration = [self.stateDurations[@(state)] doubleValue];
[self.gifView startAnimating];
}
} else if (state == MJRefreshStateIdle) {
//2.如果传进来的状态是默认状态
[self.gifView stopAnimating];
}
}
从上面可以看出以后我们想要实现自己的刷新的控件,只需要继承其中的某一个类,在模版方法中实现自己想实现的刷新的动画
网友评论