MJRefresh是李明杰老師的作品，對于iOS的開發者來說，一定非常熟悉這個簡單實用，功能強大的下拉加載，上拉刷新的控件，有很好的可定制性，幾乎能滿足大部分刷新的需求，非常值得鉆研學習。
這個框架的結構設計非常清晰，非常能夠體現面向對象的設計原則，一般我總結為各行其是，基類MJRefreshComponent繼承自UIView，并承載著整個框架的基礎設置，然后MJRefreshHeader和MJRefreshFooter繼承了MJRefreshComponent，擴展了下拉刷新和上拉加載的功能，下面的腦圖很好的說明了整個框架的繼承關系：
實現原理：
MJRefresh的實現原理是擴展了UIScrollView，添加了mj_header和mj_footer兩個控件，通過KVO機制，監聽了scrollView的contentOffset的變化，人為的將刷新這件事情劃分成了五種不同的狀態，當狀態變化的時候，向外暴露出調用鉤子，用戶可以利用這些鉤子來執行刷新和加載的動作。
說完了原理，來看一下怎么實現的。
MJRefreshComponent
這是所有刷新加載控件的基類，主要做的以下幾件事：
- 聲明控件的所有狀態。
- 聲明控件的回調函數。
- 添加監聽機制。
- 提供了刷新，停止刷新的接口。
- 提供子類需要實現的方法。
1.聲明控件的所有狀態
/** 刷新控件的狀態 */
typedef NS_ENUM(NSInteger, MJRefreshState) {
/** 普通閑置狀態 */
MJRefreshStateIdle = 1,
/** 松開就可以進行刷新的狀態 */
MJRefreshStatePulling,
/** 正在刷新中的狀態 */
MJRefreshStateRefreshing,
/** 即將刷新的狀態 */
MJRefreshStateWillRefresh,
/** 所有數據加載完畢，沒有更多的數據了 */
MJRefreshStateNoMoreData
};
2.各種狀態的回調Block
/** 進入刷新狀態的回調 */
typedef void (^MJRefreshComponentRefreshingBlock)();
/** 開始刷新后的回調(進入刷新狀態后的回調) */
typedef void (^MJRefreshComponentbeginRefreshingCompletionBlock)();
/** 結束刷新后的回調 */
typedef void (^MJRefreshComponentEndRefreshingCompletionBlock)();
3.添加監聽
#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];
}
處理監聽：
- (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;
- (void)beginRefreshingWithCompletionBlock:(void (^)())completionBlock;
/** 結束刷新狀態 */
- (void)endRefreshing;
- (void)endRefreshingWithCompletionBlock:(void (^)())completionBlock;
/** 是否正在刷新 */
- (BOOL)isRefreshing;
5.提供子類需要實現的方法
#pragma mark - 交給子類們去實現
/** 初始化 */
- (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
這個基類其實能夠表明刷新加載的實現原理，下面的子類在這個基礎上進行了各種情形下的擴展，下面沿著MJRfreshHeader這個分支向下面展開：
MJRefreshHeader
MJRefreshHeader繼承自MJRefreshComponent，實現了下面幾個功能：
- 初始化。
- 設置Header的高度。
- 重新調整Y值。
- 根據contentOffset的變化，來切換狀態（默認狀態，可以刷新的狀態，正在刷新的狀態），實現方法是：scrollViewContentOffsetDidChange:。
- 在切換狀態時，執行相應的操作。實現方法是：setState:。
1.初始化方法
提供了兩個便利初始化方法,通過refreshingBlock來初始化，通過target-action來初始化：
+ (instancetype)headerWithRefreshingBlock:(MJRefreshComponentRefreshingBlock)refreshingBlock
{
MJRefreshHeader *cmp = [[self alloc] init];
//傳入block
cmp.refreshingBlock = refreshingBlock;
return cmp;
}
+ (instancetype)headerWithRefreshingTarget:(id)target refreshingAction:(SEL)action
{
MJRefreshHeader *cmp = [[self alloc] init];
//設置self.refreshingTarget 和 self.refreshingAction
[cmp setRefreshingTarget:target refreshingAction:action];
return cmp;
}
2.設置header的高度
重寫prepare方法，來設置header的高度：
- (void)prepare
{
[super prepare];
// 設置用于在NSUserDefaults里存儲時間的key
self.lastUpdatedTimeKey = MJRefreshHeaderLastUpdatedTimeKey;
// 設置header的高度
self.mj_h = MJRefreshHeaderHeight;
}
3.重新調整y值
重寫placeSubviews方法來調整y值：
- (void)placeSubviews
{
[super placeSubviews];
// 設置y值(當自己的高度發生改變了，肯定要重新調整Y值，所以放到placeSubviews方法中設置y值)
self.mj_y = - self.mj_h - self.ignoredScrollViewContentInsetTop;
//self.ignoredScrollViewContentInsetTop 如果是10，那么就向上移動10
}
4.狀態切換
- (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;
}
}
做三點說明：
- 三種狀態：默認狀態（MJRefreshStateIdle），可以刷新狀態（MJRefreshStatePulling），正在刷新狀態（MJRefreshStateRefreshing）。
- 兩種因素：一個是下拉的距離是否超過臨界值，另一個是 手指是否離開屏幕。這是狀態切換的觸發因素。
- 一點注意：可以刷新的狀態和正在刷新的狀態是不同的。因為在手指還貼在屏幕的時候是不能進行刷新的。所以即使在下拉的距離超過了臨界距離（狀態欄 + 導航欄 + header高度），如果手指沒有離開屏幕，那么也不能馬上進行刷新，而是將狀態切換為：可以刷新。一旦手指離開了屏幕，馬上將狀態切換為正在刷新。
5.狀態切換的相應操作
- (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];
}];
});
}
兩點說明:
- 這里是重寫MJRefreshState的set方法，在狀態變更成MJRefreshStateIdle和MJRefreshStateRefreshing時候，觸發的相應的操作，也是針對開始刷新和結束刷新這兩個狀態切換點來進行相應的觸發。
- 結束刷新的時候會記錄下當前的系統時間，因為header里面有個磨人的label來顯示上次刷新的時間。
MJRefreshStateHeader
這個是MJRefreshHeader的子類，實現了兩個功能：
- 簡單布局了子控件stateLabel和lastUpdateTimeLabel。
- 根據刷新狀態，實現了這兩個label的顯示狀態的切換。
1.布局子控件
重寫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];
這個方法供調用來自定義設置不同狀態下的顯示文本。
#pragma mark - 公共方法
- (void)setTitle:(NSString *)title forState:(MJRefreshState)state
以刷新狀態為Key，以顯示的title為值，來儲存不同狀態的文本信息。
placeSubviews方法，負責對子控件進行布局，如果更新時間label是隱藏的，則讓狀態label撐滿整個header，如果更新時間label不是隱藏的，根據約束設置更新時間label和狀態label（高度各占一半）。
重寫setState方法，根據傳入的state不同，在stateLabel和lastUpdateTimeLabel里切換相應的文字，stateLabel里的文字直接從stateTitles字典里取出，lastUpdateTimeLabel里的文字需要通過一個方法來取出。
- (void)setState:(MJRefreshState)state
{
MJRefreshCheckState
// 設置狀態文字
self.stateLabel.text = self.stateTitles[@(state)];
// 重新設置key（重新顯示時間）
self.lastUpdatedTimeKey = self.lastUpdatedTimeKey;
}
MJRefreshNormalHeader
MJRefreshNormalHeader 繼承于 MJRefreshStateHeader，它主要做了兩件事:
- 在MJRefreshStateHeader上添加arrowView和loadingView兩個指示控件。
- 改變這兩個控件顯示的樣式。
1.重寫prepare方法
給indicatorView定義一個初始樣式。
self.activityIndicatorViewStyle = UIActivityIndicatorViewStyleGray;
2.重寫placeSubviews方法
要注意的點是,因為stateLabel和lastUpdatedTimeLabel是上下并排分布的，而arrowView或loadingView是在這二者的左邊，所以為了避免這兩組重合，在計算arrowView或loadingView的center的時候，需要獲取stateLabel和lastUpdatedTimeLabel兩個控件的寬度并比較大小，將較大的一個作為兩個label的‘最寬距離’，再計算center，這樣一來就不會重合了。
作者對于文本寬度計算的封裝，也可以用在自己的項目中：
- (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;
}
主要是不同版本的api有變化。
setState方法
根據不同的狀態修改箭頭的transfrom屬性，控制indicatorView的顯示樣式和是否要顯示。
- (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;
}
}
這樣我們就從上到下，從基礎api到完整功能的實現來看了一遍這個框架，注意到三個貫穿基類和子類的方法prepare，placeSubviews，setState，分別在各層實現自己這一層的功能。
MJRefreshHeader：負責header的高度設置和調整header在scrollView中的位置。
MJRefreshStateHeader：負責header內部stateLabel和lastUpdateTimeLabel的布局和不同狀態下內部文字的顯示。
MJRefreshNormalHeader：負責header內部子控件loadingView和arrowView的布局和不同狀態下的顯示。
這樣就非常好的實現了軟件架構思維中的分層解耦，各層互不影響，如果某一天我們要給MJRefresh添加一個新的樣式，我們就只需要在一層上面做文章，而不用牽一發而動全身。例如框架里面提供的MJRefreshGifHeader和MJRefreshNormalHeader處于同一層，二者具有相同的stateLabel和lastUpdateTimeLabel，這是左側的顯示狀態不同：
- MJRefreshNormalHeader左側是箭頭和indicatorView；
- MJRefreshGifHeader左側是一個gif動畫。
來看一下是怎么實現的：
MJRefreshGifHeader的左側是一個imageView，并提供了兩個設置圖片數組對的接口：
/** 設置state狀態下的動畫圖片images 動畫持續時間duration*/
- (void)setImages:(NSArray *)images duration:(NSTimeInterval)duration forState:(MJRefreshState)state;
- (void)setImages:(NSArray *)images forState:(MJRefreshState)state;
然而MJRefreshGifHeader只需要和MJRefreshNormalHeader一樣，重寫基類提供的三個方法來實現顯示gif圖片的功能。
1. 初始化和右側label的間距
- (void)prepare
{
[super prepare];
// 初始化間距
self.labelLeftInset = 20;
}
2.設置承載gif的imageView的位置
- (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.設置圖片數組動畫
- (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];
}
}
總結
這樣就沿著一條線把MJRefresh的實現思路和方法解讀了一遍，總之這個框架的設計非常優美，通過一個基類來定義一些狀態和一些需要子類實現的接口。通過一層一層地繼承，讓每一層的子類各司其職，只完成真正屬于自己的任務，提高了框架的可定制性，而且對于功能的擴展和bug的追蹤也很有幫助，非常值得我們參考與借鑒。
