MJRefresh 源碼解析

時間 2019-11-06

標籤 mjrefresh 源碼解析简体版

原文原文鏈接

MJRefresh是李明傑老師的做品，到如今已經有11000多顆star了，是一個簡單實用，功能強大的iOS下拉刷新（也支持上拉加載更多）控件。它的可定製性很高，幾乎能夠知足大部分下拉刷新的設計需求，值得學習。git

該框架的結構設計得很清晰，使用一個基類MJRefreshComponent來作一些基本的設定，而後經過繼承的方式，讓MJRefreshHeader和MJRefreshFooter分別具有下拉刷新和上拉加載的功能。從繼承機構來看能夠分爲三層，具體能夠從下面的圖裏看出來：程序員

首先來看一下該控件的基類：MJRefreshComponent：github

MJRefreshComponent

這個類做爲該控件的基類，涵蓋了基類所具有的一些：狀態，回調block等，大體分紅下面這5種職能：編程

有哪些職能?

聲明控件的全部狀態。
聲明控件的回調函數。
添加監聽。
提供刷新，中止刷新接口。
提供子類須要實現的方法。

職能如何實現？

1. 聲明控件的全部狀態

/** 刷新控件的狀態 */
typedef NS_ENUM(NSInteger, MJRefreshState) {
    /** 普通閒置狀態 */
    MJRefreshStateIdle = 1,
    /** 鬆開就能夠進行刷新的狀態 */
    MJRefreshStatePulling,
    /** 正在刷新中的狀態 */
    MJRefreshStateRefreshing,
    /** 即將刷新的狀態 */
    MJRefreshStateWillRefresh,
    /** 全部數據加載完畢，沒有更多的數據了 */
    MJRefreshStateNoMoreData
};
複製代碼

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];//contentOffset屬性
    [self.scrollView addObserver:self forKeyPath:MJRefreshKeyPathContentSize options:options context:nil];//contentSize屬性
    self.pan = self.scrollView.panGestureRecognizer;
    [self.pan addObserver:self forKeyPath:MJRefreshKeyPathPanState options:options context:nil];//UIPanGestureRecognizer 的state屬性
}
複製代碼

對於監聽的處理：app

- (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)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 {
        // 預防正在刷新中時，調用本方法使得header inset回置失敗
        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;
}

複製代碼

交給子類實現的方法：框架

- (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;
複製代碼

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;
複製代碼

從上面等結構圖能夠看出，緊接着這個基類，下面分爲MJRefreshHeader和MJRefreshFooter,這裏順着MJRefreshHeader這個分支向下展開：async

MJRefreshHeader

MJRefreshHeader繼承於MJRefreshComponent，它作了這幾件事：函數

有哪些職能？

初始化。
設置header高度。
從新調整y值。
根據contentOffset的變化，來切換狀態（默認狀態，能夠刷新的狀態，正在刷新的狀態），實現方法是：scrollViewContentOffsetDidChange:。
在切換狀態時，執行相應的操做。實現方法是：setState:。

職能如何實現？

####1. 初始化佈局

初始化有兩種方法：

+ (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];
    
    // 正在刷新的狀態
    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;        
    }
}

複製代碼

須要注意三點：

這裏的狀態有三種：默認狀態（MJRefreshStateIdle），能夠刷新的狀態（MJRefreshStatePulling）以及正在刷新的狀態（MJRefreshStateRefreshing）。

狀態切換的因素有兩個：一個是下拉的距離是否超過臨界值，另外一個是手指是否離開屏幕。

注意:能夠刷新的狀態和正在刷新的狀態是不一樣的。由於在手指還貼在屏幕的時候是不能進行刷新的。因此即便在下拉的距離超過了臨界距離（狀態欄 + 導航欄 + 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];
            }];
         });
    }
}

複製代碼

這裏須要注意兩點：

這裏狀態的切換，主要圍繞着兩種：默認狀態和正在刷新狀態。也就是針對開始刷新和結束刷新這兩個切換點。

從正在刷新狀態狀態切換爲默認狀態時（結束刷新），須要記錄刷新結束的時間。由於header裏面有一個默認的label是用來顯示上次刷新的時間的。

MJRefreshStateHeader

這個類是MJRefreshHeader類的子類，它作了兩件事：

有哪些職能？

簡單佈局了stateLabel和lastUpdatedTimeLabel。
根據控件狀態的切換（默認狀態，正在刷新狀態），實現了這兩個label顯示的文字的切換。

給一張圖，讓你們直觀感覺一下這兩個控件：

職能如何實現？

這個類經過覆蓋父類三個方法來實現上述兩個實現：

方法1：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];
}
複製代碼

在這裏，將每個狀態對應的提示文字放入一個字典裏面,key是狀態的NSNumber形式

- (void)setTitle:(NSString *)title forState:(MJRefreshState)state
{
    if (title == nil) return;
    self.stateTitles[@(state)] = title;
    self.stateLabel.text = self.stateTitles[@(self.state)];
}
複製代碼

方法2：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隱藏的狀況。

方法3: setState:方法

- (void)setState:(MJRefreshState)state
{
    MJRefreshCheckState
    
    // 設置狀態文字
    self.stateLabel.text = self.stateTitles[@(state)];
    
    // 從新設置key（從新顯示時間）
    self.lastUpdatedTimeKey = self.lastUpdatedTimeKey;
}

複製代碼

在這裏，根據傳入的state的不一樣，在stateLabel和lastUpdatedTimeLabel裏切換相應的文字。

stateLabel裏的文字直接從stateTitles字典裏取出便可。

lastUpdatedTimeLabel裏的文字須要經過一個方法來取出便可：

- (void)setLastUpdatedTimeKey:(NSString *)lastUpdatedTimeKey
{
    [super setLastUpdatedTimeKey:lastUpdatedTimeKey];
    
    // 若是label隱藏了，就不用再處理
    if (self.lastUpdatedTimeLabel.hidden) return;
    
    //根據key，從NSUserDefaults獲取對應的NSData型時間
    NSDate *lastUpdatedTime = [[NSUserDefaults standardUserDefaults] objectForKey:lastUpdatedTimeKey];
    
    // 若是有block，從block裏拿來時間，這應該是用戶自定義顯示時間格式的渠道
    if (self.lastUpdatedTimeText) {
        self.lastUpdatedTimeLabel.text = self.lastUpdatedTimeText(lastUpdatedTime);
        return;
    }
    
    //若是沒有block，就按照下面的默認方法顯示時間格式
    if (lastUpdatedTime) {
        
        // 得到了上次更新時間
        // 1.得到年月日
        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]];
        
        // 2.格式化日期
        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];
        
        // 3.顯示日期
        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

有哪些職能？

MJRefreshNormalHeader 繼承於 MJRefreshStateHeader，它主要作了兩件事：

它在MJRefreshStateHeader上添加了_arrowView和loadingView。
佈局了這兩個view並在Refresh控件的狀態切換的時候改變這兩個view的樣式。

仍是給一張圖來直觀感覺一下這兩個view：

職能如何實現？

同MJRefreshStateHeader同樣，也是重寫了父類的三個方法：

方法1：prepare

- (void)prepare
{
    [super prepare];
    
    self.activityIndicatorViewStyle = UIActivityIndicatorViewStyleGray;
}
複製代碼

方法2：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;
}
複製代碼

在這裏注意一點：由於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;
}
複製代碼

方法3: 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;
    }
}
複製代碼

到此爲止，咱們已經從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動畫。

仍是提供一張圖來直觀感覺一下：

下面咱們來看一下的實現：

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]; 
}
複製代碼

有哪些職能？

而後，和MJRefreshNormalHeader同樣，它也重寫了基類提供的三個方法來實現顯示gif圖片的職能。

職能如何實現？

####1. 初始化和label的間距

- (void)prepare
{
    [super prepare];
    
    // 初始化間距
    self.labelLeftInset = 20;
}
複製代碼

####2. 根據label的寬度和存在與否設置gif的位置

- (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];
    }
}
複製代碼

Footer類是用來處理上拉加載的，實現原理和下拉刷新很相似，在這裏先不介紹了～

總的來講，該框架設計得很是工整：經過一個基類來定義一些狀態和一些須要子類實現的接口。經過一層一層地繼承，讓每一層的子類各司其職，只完成真正屬於本身的任務，提升了框架的可定製性，並且對於功能的擴展和bug的追蹤也頗有幫助，很是值得咱們參考與借鑑。

本篇文章已經同步到我我的博客：J_Knight MJRefresh 源碼解析

---------------------------- 2018年7月17日更新 ----------------------------

注意注意！！！

筆者在近期開通了我的公衆號，主要分享編程，讀書筆記，思考類的文章。

編程類文章：包括筆者之前發佈的精選技術文章，以及後續發佈的技術文章（以原創爲主），而且逐漸脫離 iOS 的內容，將側重點會轉移到提升編程能力的方向上。
讀書筆記類文章：分享編程類，思考類，心理類，職場類書籍的讀書筆記。
思考類文章：分享筆者平時在技術上，生活上的思考。