MJRefresh原始碼解讀

雪山飛狐1發表於2018-12-06

MJRefresh是MJ大神寫的一個實現上拉重新整理和下拉重新整理的第三方庫,這個庫目前在很多有名的應用上都有使用看,下面就來分析一下MJRefresh的原始碼。

1.簡單應用

下面建立一個綠色的UIScrollview,然後在UIScrollview上加上一個紅色的檢視作為子檢視:

    self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
    self.scrollView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:_scrollView];
    
    self.scrollView.mj_header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(refresh)];
    
    self.scrollView.contentInset = UIEdgeInsetsMake(54, 0, 0, 0);
    
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height)];
    view.backgroundColor = [UIColor redColor];
    [self.scrollView addSubview:view];
複製程式碼

然後我們看一下效果:

Dec-06-2018 15-49-18.gif
在這裡我們設定的contentInset.top = 54,54正是這個下拉控制元件的高度,所以整個下拉控制元件是完全可見的。

2.原始碼分析

我們首先看一下MJRefresh的原始碼的類的結構,由於上拉重新整理和下拉重新整理控制元件的原理基本一致,因此這裡我們僅使用下拉重新整理控制元件來分析:

67C65862-0A9A-4C2D-B157-515C1424A70B.png

下面我們從下拉重新整理控制元件的使用開始來探索原始碼:

    self.scrollView.mj_header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(refresh)];
複製程式碼

首先我們的疑問是UIScrollview的mj_header這個屬性是哪裡來的?我們找到UIScrollview+MJRefresh.h這個檔案,這是寫的UIScrollview的一個分類,在這個分類中我們找到了mj_header屬性,mj_footer屬性,但是分類申明屬性是沒有set方法和get方法的,那麼怎麼去賦值和取值呢?這時候就要用到runtime的關聯屬性方法了,我們在UIScrollview+MJRefresh.m檔案中找到- (void)setMj_header:(MJRefreshHeader *)mj_header方法看看是不是像我猜想的那樣:

F69240D7-E35B-4F2D-99F5-F9A1FEBEFC32.png
事實證明確實是這樣,使用關聯屬性來設值和取值。 MJRefreshNormalHeader最終是繼承自MJRefreshComponent,那麼我們就先從MJRefreshComponent來看: 首先在MJRefresh.h檔案中有一個列舉類表示重新整理控制元件的狀態:

/** 重新整理控制元件的狀態 */
typedef NS_ENUM(NSInteger, MJRefreshState) {
    /** 普通閒置狀態 */
    MJRefreshStateIdle = 1,
    /** 鬆開就可以進行重新整理的狀態 */
    MJRefreshStatePulling,
    /** 正在重新整理中的狀態 */
    MJRefreshStateRefreshing,
    /** 即將重新整理的狀態 */
    MJRefreshStateWillRefresh,
    /** 所有資料載入完畢,沒有更多的資料了 */
    MJRefreshStateNoMoreData
};
複製程式碼

其中預設狀態是MJRefreshStateIdle, 當我們拖拽UIScrollview的時候在沒有到達臨界點之前都是這個狀態,當我們拖拽到了臨界點之後就變成了MJRefreshStatePulling狀態,這個狀態就是鬆手就可以重新整理的狀態,當我們在MJRefreshStatePulling狀態下鬆手就變成了MJRefreshStateRefreshing狀態,即正在重新整理狀態。 MJRefreshComponnet中有下列屬性:

  • @property (weak, nonatomic) id refreshingTarget; 這是回撥的物件
  • @property (assign, nonatomic) SEL refreshingAction; 這是回撥的方法
  • @property (assign, nonatomic) MJRefreshState state; 重新整理控制元件的狀態
  • @property (assign, nonatomic, readonly) UIEdgeInsets scrollViewOriginalInset; scrollview剛開始的contentInset
  • @property (assign, nonatomic) CGFloat pullingPercent; 拉拽的百分比,用來控制重新整理控制元件的透明度

MJRefreshComponent.m中的核心方法是:- (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 = -_scrollView.mj_insetL;
        
        // 記錄UIScrollView
        _scrollView = (UIScrollView *)newSuperview;
        // 設定永遠支援垂直彈簧效果
        _scrollView.alwaysBounceVertical = YES;
        // 記錄UIScrollView最開始的contentInset
        _scrollViewOriginalInset = _scrollView.mj_inset;
        
        // 新增監聽
        [self addObservers];
    }
}
複製程式碼

在這個方法裡面設定了self.mj_x,self.mj_w, _scrollViewOriginalInset這三個屬性並且新增了觀察者:

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

監聽了scrollview的contentOffset和contentsize的改變,需要根據contentoffset的改變來變更重新整理控制元件的狀態。

MJRefreshHeader

接下來再來分析一下MJRefreshComponnet的子類MJRefreshHeader這個類,這個類是基礎的下拉重新整理控制元件類: 這個類的標頭檔案中多了兩個方法,這兩個方法都是用來建立下拉重新整理控制元件的,不同的是一個的回撥是block,另一個的回撥是@selector:

+ (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;
}
複製程式碼

在這個類中確定了上拉重新整理控制元件的mj_y屬性:

- (void)placeSubviews
{
    [super placeSubviews];
    
    // 設定y值(當自己的高度發生改變了,肯定要重新調整Y值,所以放到placeSubviews方法中設定y值)
    self.mj_y = - self.mj_h - self.ignoredScrollViewContentInsetTop;
}
複製程式碼

由於self.ignoredScrollViewContentInsetTop一般是0,所以一般情況下就有:

self.mj_y = -self.mj_h;
複製程式碼

然後我們再來看一下一個最核心的方法:- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change,這個方法是contentoffset發生變化時KVO產生的呼叫,

1D9381DB-72F7-47B1-A3DA-CD1EC182D67D.png
上面這個方法主要是根據contentoffset進行了一系列判斷然後進行了狀態的變化,那麼在這個類裡面還有一個很重要的方法,就是- (void)setState:(MJRefreshState)state,我們看看這個方法裡面做了什麼:

3E652B04-896E-47EF-8909-1138807859F6.png

總結一下MJRefreshHeader這個類,這個類實現了兩個非常重要的方法,一個是- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change,這個方法是在用手拖拽scrollview導致contentoffset變化的時候呼叫的,在這個方法中會根據contentoffset的值來改變下拉重新整理控制元件的狀態。這個類實現的另一個很重要的方法是- (void)setState:(MJRefreshState)state,在- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change中改變屬性,在- (void)setState:(MJRefreshState)state中根據屬性的改變來做具體的事。 #####MJRefreshStateHeader **MJRefreshStateHeader繼承自MJRefreshHeader,這個類是帶有狀態文字的重新整理控制元件,沒有箭頭和菊花。這個類比較簡單,主要是對狀態label和最近重新整理時間label進行佈局:

920A7894-46D5-4E6E-9DC2-3DBF46196AE6.png

MJRefreshNoramlHeaderMJRefreshStateHeader的子類,它是預設的下拉重新整理控制元件類,我們例項中用的就是這種,這種重新整理控制元件是在拖拽的時候顯示箭頭,當開始重新整理的時候箭頭小時,顯示菊花。

MJRefreshNoramlHeader這個類做了兩件事,一件事是佈局上面說到的箭頭檢視和菊花檢視,另外一件事是處理在拖拽過程中箭頭和菊花的變化。

  • 佈局菊花和箭頭:
    C88D7D21-C81A-4ED7-8AED-44ABF744559F.png
  • 處理拖拽過程中箭頭和菊花的變化
    195CF5CF-449C-4514-83DB-5F21BD0D75AF.png
MJRefreshGifHeader

MJRefreshGifHeader這個類也是繼承自MJRefreshStateHeader,它是帶GIF的下拉重新整理控制元件,就是把MJRefreshNormalHeader的箭頭和菊花變成GIF,下面我們先看一下MJRefreshNormal的簡單使用:

MJRefreshGifHeader *header = [MJRefreshGifHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
// Set the ordinary state of animated images
[header setImages:idleImages forState:MJRefreshStateIdle];
// Set the pulling state of animated images(Enter the status of refreshing as soon as loosen)
[header setImages:pullingImages forState:MJRefreshStatePulling];
// Set the refreshing state of animated images
[header setImages:refreshingImages forState:MJRefreshStateRefreshing];
// Set header
self.tableView.mj_header = header;
複製程式碼

下面我們就從- (void)setImages:(NSArray *)images forState:(MJRefreshState)state這個方法下手來看看具體實現:

- (void)setImages:(NSArray *)images forState:(MJRefreshState)state 
{ 
    [self setImages:images duration:images.count * 0.1 forState:state]; 
}
複製程式碼

這個方法還是主要呼叫- (void)setImages:(NSArray *)images duration:(NSTimeInterval)duration forState:(MJRefreshState)state這個方法:

- (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; 
    } 
}
複製程式碼

在這個方法中,使用了兩個字典,一個字典用來存放各種狀態下的圖片陣列,因為GIF本質上也就是多張圖片迴圈播放嘛,另一個字典用來存放各種狀態下GIF動畫的週期。並且如果GIF圖片的高度大於重新整理控制元件的高度,那麼就調整重新整理控制元件的高度為GIF圖片的高度。 我們再來看一下GIF檢視的佈局:

1CF63EF8-955D-4A2C-97B3-CFDD54DA3B88.png
根據狀態變化顯示不同的GIF檢視:
3ED6ABA6-8BFB-458A-9ACD-55D670A78572.png
這篇文章在簡書的地址:MJRefresh原始碼解讀

相關文章