MJRefresh原始碼解讀
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]; 複製程式碼
然後我們看一下效果：
在這裡我們設定的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 方法看看是不是像我猜想的那樣：
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; @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產生的呼叫，
- (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檢視的佈局：
根據狀態變化顯示不同的GIF檢視：
