MJRefresh源碼解讀

時間 2019-11-16

標籤 mjrefresh 源碼解讀简体版

原文原文鏈接

MJRefresh是MJ大神寫的一個實現上拉刷新和下拉刷新的第三方庫，這個庫目前在不少有名的應用上都有使用看，下面就來分析一下MJRefresh的源碼。數組

1.簡單應用

下面建立一個綠色的UIScrollview，而後在UIScrollview上加上一個紅色的視圖做爲子視圖：bash

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

而後咱們看一下效果：源碼分析

在這裏咱們設置的contentInset.top = 54，54正是這個下拉控件的高度，因此整個下拉控件是徹底可見的。

2.源碼分析

咱們首先看一下MJRefresh的源碼的類的結構，因爲上拉刷新和下拉刷新控件的原理基本一致，所以這裏咱們僅使用下拉刷新控件來分析：佈局

下面咱們從下拉刷新控件的使用開始來探索源碼：動畫

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方法看看是否是像我猜測的那樣：ui

事實證實確實是這樣，使用關聯屬性來設值和取值。 MJRefreshNormalHeader最終是繼承自 MJRefreshComponent，那麼咱們就先從 MJRefreshComponent來看：首先在MJRefresh.h文件中有一個枚舉類表示刷新控件的狀態：

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

其中默認狀態是MJRefreshStateIdle，當咱們拖拽UIScrollview的時候在沒有到達臨界點以前都是這個狀態，當咱們拖拽到了臨界點以後就變成了MJRefreshStatePulling狀態，這個狀態就是鬆手就能夠刷新的狀態，當咱們在MJRefreshStatePulling狀態下鬆手就變成了MJRefreshStateRefreshing狀態，即正在刷新狀態。 MJRefreshComponnet中有下列屬性：atom

@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，這個方法是在視圖加入父視圖或者改變父視圖的時候調用：spa

- (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這三個屬性而且添加了觀察者：code

- (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的改變來變動刷新控件的狀態。orm

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產生的調用，

上面這個方法主要是根據contentoffset進行了一系列判斷而後進行了狀態的變化，那麼在這個類裏面還有一個很重要的方法，就是 - (void)setState:(MJRefreshState)state，咱們看看這個方法裏面作了什麼：

總結一下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進行佈局：

MJRefreshNoramlHeader是MJRefreshStateHeader的子類，它是默認的下拉刷新控件類，咱們實例中用的就是這種，這種刷新控件是在拖拽的時候顯示箭頭，當開始刷新的時候箭頭小時，顯示菊花。

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

佈局菊花和箭頭：
處理拖拽過程當中箭頭和菊花的變化

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視圖的佈局：