-
链接:http://www.2cto.com/kf/201611/568070.html
MJRefresh代码项目框架
上图为MJRefresh项目的项目结构在MJRefresh中,使用了KVO、runtime、继承、GCD等知识
核心思想
–
MJRefreshComponent是刷新控件的基类,在MJRefreshComponent添加了KVO监听、prepare方法和placeSubviews方法。
当MJRefreshComponent中KVO监听到之后,响应会在MJRefreshHeader和MJRefreshFooter中实现,MJRefreshHeader和MJRefreshFooter其实响应KVO方法,主要就是设置state状态,然后在他们的子类中会分别调用setState方法,根据不同的state状态进行不同的变化
prepare方法和placeSubviews方法。prepare是设置刷新控件,包括文字、gif图片、风格等等;placeSubviews是调整刷新控件的子控件的位置。在MJRefreshComponent的每一个子类中都会先调用父类对应方法,然后根据自身的特点进行不同实现
MJRefresh分析
上一篇分析了MJRefresh的框架结构和核心思想,现在选择最简单的一个分支来进行分析。
MJRefreshNormalHeader -> MJRefreshStateHeader -> MJRefreshHeader -> MJRefreshComponent
一般开始使用MJRefresh的时候,往往都是几行代码就调用了,例如:
MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{ [self reloadData]; [self.tableView.mj_header endRefreshing]; }]; self.tableView.mj_header = header;
现在来看看,上面的几行代码到底经历着怎样的实现?
上面的代码,是创建了一个MJRefreshNormalHeader的对象,然后将它赋给了self.tableView.mj_header,mj_header是什么呢?然后找到UIScrollView+MJRefresh.h文件,可以看到这是一个分类
#import #import "MJRefreshConst.h" @class MJRefreshHeader, MJRefreshFooter; @interface UIScrollView (MJRefresh) /** 下拉刷新控件 */ @property (strong, nonatomic) MJRefreshHeader *mj_header; @property (strong, nonatomic) MJRefreshHeader *header MJRefreshDeprecated("使用mj_header"); /** 上拉刷新控件 */ @property (strong, nonatomic) MJRefreshFooter *mj_footer; @property (strong, nonatomic) MJRefreshFooter *footer MJRefreshDeprecated("使用mj_footer"); #pragma mark - other - (NSInteger)mj_totalDataCount; @property (copy, nonatomic) void (^mj_reloadDataBlock)(NSInteger totalDataCount); @end
作者利用runtime的技巧给这个分类添加了五个属性和一个方法,然后将封装好的刷新控件添加给UIScrollview
- (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 } } - (void)setMj_footer:(MJRefreshFooter *)mj_footer { if (mj_footer != self.mj_footer) { // 删除旧的,添加新的 [self.mj_footer removeFromSuperview]; [self insertSubview:mj_footer atIndex:0]; // 存储新的 [self willChangeValueForKey:@"mj_footer"]; // KVO objc_setAssociatedObject(self, &MJRefreshFooterKey, mj_footer, OBJC_ASSOCIATION_ASSIGN); [self didChangeValueForKey:@"mj_footer"]; // KVO } }
所以其实现在可以理解,self.tableView.mj_header = header;其实就是给tableview添加一个头部的刷新控件.而增加的属性MJRefreshHeader就是刚才创建的MJRefreshNormalHeader的基类。MJRefreshHeader继承于MJRefreshComponent, MJRefreshComponent是整个刷新控件的基类。
创建了MJRefreshNormalHeader的对象,直接调用了一个类方法headerWithRefreshingBlock,这个方法是它父类MJRefreshHeader的一个方法
“MJRefreshHeader.m”文件 + (instancetype)headerWithRefreshingBlock:(MJRefreshComponentRefreshingBlock)refreshingBlock { MJRefreshHeader *cmp = [[self alloc] init]; cmp.refreshingBlock = refreshingBlock; return cmp; }
此方法是为了创建一个MJRefreshHeader对象,在创建对象init的时候,又会调用到MJRefreshHeader的父类MJRefreshComponent的方法
@implementation MJRefreshComponent #pragma mark - 初始化 - (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { // 准备工作 [self prepare]; // 默认是普通状态 self.state = MJRefreshStateIdle; } return self; }
注意:MJRefreshComponent 类中的prepare方法,会被它的子类都进行调用,每个字类的prepare方法,都会调用父类中的prepare方法,然后增加自己特有的执行操作。
执行完init方法,最后会返回一个MJRefreshNormalHeader对象,然后添加给self.scrollview,添加上去后,便会开始执行MJRefreshComponent中的- (void)willMoveToSuperview:(UIView *)newSuperview方法- (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]; } }
监听了三个值,分别是UIScrollView的ContentOffSet、ContentSize、滑动手势的状态
#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]; }
利用KVO监听到之后,都会响应相应的didChange方法,比如下拉刷新,下拉必然会让contentOffSet发生变化,必然会响应对应的方法:
MJRefreshHeader文件 - (void)scrollViewContentOffsetDidChange:(NSDictionary *)change { [super scrollViewContentOffsetDidChange:change]; // 在刷新的refreshing状态 if (self.state == MJRefreshStateRefreshing) { if (self.window == nil) return; // sectionheader停留解决 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; } // 跳转到下一个控制器时,contentInset可能会变 _scrollViewOriginalInset = self.scrollView.contentInset; // 当前的contentOffset CGFloat offsetY = self.scrollView.mj_offsetY; // 头部控件刚好出现的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; } }
上面的其实就是根据拖动的时候,scrollview的contentOffSet的变化进行state的设置:临界点就是scrollView的Inset.top与刷新控件的高度相加的值。进行相应的操作,然后更改state,在每一次更改state的时候,就发生了哪些变化呢,看看下面的方法
MJRefreshHeader文件 - (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) { dispatch_async(dispatch_get_main_queue(), ^{ [UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{ CGFloat top = self.scrollViewOriginalInset.top + self.mj_h; // 增加滚动区域top self.scrollView.mj_insetT = top; // 设置滚动位置 [self.scrollView setContentOffset:CGPointMake(0, -top) animated:NO]; } completion:^(BOOL finished) { [self executeRefreshingCallback]; }]; }); } }
执行setState方法的时候,进行了界面的操作。如果是正常状态的时候,恢复inset和offset;如果是刷新状态,那就设置inset和offset,将scrollview的视图往下挤一点。
再看看MJRefreshNormalHeader文件的实现
MJRefreshNormalHeader文件 #pragma mark - 重写父类的方法 - (void)prepare { [super prepare]; self.activityIndicatorViewStyle = UIActivityIndicatorViewStyleGray; } - (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; } - (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) { // 如果执行完动画发现不是idle状态,就直接返回,进入其他状态 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; // 防止refreshing -> idle的动画完毕动作没有被执行 [self.loadingView startAnimating]; self.arrowView.hidden = YES; } }
上面的placeSubviews方法设置了刷新控件的子控件的位置以及大小,然后setState方法就是更加具体的根据不同state来进行界面的变换:当state由刷新变为正常时,停止loadingView的动画,显示箭头;当state状态为Pulling的时候,箭头会发生变化,转个方向;当state为刷新时,loadingView开始动画,隐藏箭头。
iOS: MJRefresh源码分析
最新推荐文章于 2022-07-11 10:22:54 发布