繼續(xù)閱讀關(guān)于UI方面的比較好的第三方庫MJRefresh

這個庫整體難度不大，但是作者的思路很好很清晰辆毡，核心是使用基類MJRefreshComponent來做一些基本的設(shè)定，然后通過繼承的方式，讓MJRefreshHeader和MJRefreshFooter分別具備下拉刷新和上拉加載的功能，然后你自定義私人定制的話纤泵，那么久繼續(xù)繼承，在此基礎(chǔ)上修改UI和邏輯操作镜粤。

MJRefresh整體框架流程

MJRefreshComponent

代碼邏輯

代碼邏輯非常清晰捏题，自上而下
1.設(shè)置刷新控件的狀態(tài)
2.處理刷新事件的回調(diào)
3.設(shè)置刷新事件的屬性(target,action,block)
4.刷新狀態(tài)控制的函數(shù)
5.交給子類去實現(xiàn)的函數(shù)

設(shè)置刷新控件的狀態(tài)

/** 刷新控件的狀態(tài) */
typedef NS_ENUM(NSInteger, MJRefreshState) {
    /** 普通閑置狀態(tài) */
    MJRefreshStateIdle = 1,
    /** 松開就可以進行刷新的狀態(tài) */
    MJRefreshStatePulling,
    /** 正在刷新中的狀態(tài) */
    MJRefreshStateRefreshing,
    /** 即將刷新的狀態(tài) */
    MJRefreshStateWillRefresh,
    /** 所有數(shù)據(jù)加載完畢，沒有更多的數(shù)據(jù)了 */
    MJRefreshStateNoMoreData
};
代碼規(guī)范要這么寫肉渴，不然外面拿不到提示的

處理刷新事件的回調(diào)

/** 進入刷新狀態(tài)的回調(diào) */
typedef void (^MJRefreshComponentRefreshingBlock)();
/** 開始刷新后的回調(diào)(進入刷新狀態(tài)后的回調(diào)) */
typedef void (^MJRefreshComponentbeginRefreshingCompletionBlock)();
/** 結(jié)束刷新后的回調(diào) */
typedef void (^MJRefreshComponentEndRefreshingCompletionBlock)();

設(shè)置刷新事件的屬性

/** 正在刷新的回調(diào) */
@property (copy, nonatomic) MJRefreshComponentRefreshingBlock refreshingBlock;
/** 開始刷新后的回調(diào)(進入刷新狀態(tài)后的回調(diào)) */
@property (copy, nonatomic) MJRefreshComponentbeginRefreshingCompletionBlock beginRefreshingCompletionBlock;
/** 結(jié)束刷新的回調(diào) */
@property (copy, nonatomic) MJRefreshComponentEndRefreshingCompletionBlock endRefreshingCompletionBlock;

刷新狀態(tài)控制的函數(shù)

/** 進入刷新狀態(tài) */
- (void)beginRefreshing;
- (void)beginRefreshingWithCompletionBlock:(void (^)())completionBlock;
/** 結(jié)束刷新狀態(tài) */
- (void)endRefreshing;
- (void)endRefreshingWithCompletionBlock:(void (^)())completionBlock;
/** 是否正在刷新 */
- (BOOL)isRefreshing;
/** 刷新狀態(tài) 一般交給子類內(nèi)部實現(xiàn) */
@property (assign, nonatomic) MJRefreshState state;

交給子類去實現(xiàn)的函數(shù)

/** 初始化 */
- (void)prepare NS_REQUIRES_SUPER;
/** 擺放子控件frame */
- (void)placeSubviews NS_REQUIRES_SUPER;
/** 當(dāng)scrollView的contentOffset發(fā)生改變的時候調(diào)用 */
- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change NS_REQUIRES_SUPER;
/** 當(dāng)scrollView的contentSize發(fā)生改變的時候調(diào)用 */
- (void)scrollViewContentSizeDidChange:(NSDictionary *)change NS_REQUIRES_SUPER;
/** 當(dāng)scrollView的拖拽狀態(tài)發(fā)生改變的時候調(diào)用 */
- (void)scrollViewPanStateDidChange:(NSDictionary *)change NS_REQUIRES_SUPER;

核心代碼

添加監(jiān)聽

通過監(jiān)聽ContentOffset和ContentSize的改變公荧，以及手勢狀態(tài)的變化，從而來回調(diào)事件同规，交給子類來做一些自定義的處理 
#pragma mark - KVO監(jiān)聽
- (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];
    }
}

- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change{
    NSLog(@"scrollViewContentOffsetDidChange change = %@",change);
}
- (void)scrollViewContentSizeDidChange:(NSDictionary *)change{
    NSLog(@"scrollViewContentSizeDidChange change = %@",change);
}
- (void)scrollViewPanStateDidChange:(NSDictionary *)change{
    NSLog(@"scrollViewPanStateDidChange change = %@",change);
}

刷新的代碼處理

//在這邊都是沒有做任何代碼處理循狰，只是修改了當(dāng)前狀態(tài)和存儲了更新開始和結(jié)束的事件回調(diào)窟社，很顯然這些事情都交給子類去做(這個思想很好，基類只做狀態(tài)存儲和基本數(shù)據(jù)存儲绪钥，自定義的操作 全部由子類來執(zhí)行灿里，代碼也很清晰，思路也很明確昧识，good钠四！)
#pragma mark 進入刷新狀態(tài)
- (void)beginRefreshing
{
    [UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
        self.alpha = 1.0;
    }];
    self.pullingPercent = 1.0;
    // 只要正在刷新，就完全顯示
    if (self.window) {
        self.state = MJRefreshStateRefreshing;
    } else {
        // 預(yù)防正在刷新中時跪楞，調(diào)用本方法使得header inset回置失敗
        if (self.state != MJRefreshStateRefreshing) {
            self.state = MJRefreshStateWillRefresh;
            // 刷新(預(yù)防從另一個控制器回到這個控制器的情況缀去，回來要重新刷新一下)
            [self setNeedsDisplay];
        }
    }
}

- (void)beginRefreshingWithCompletionBlock:(void (^)())completionBlock
{
    self.beginRefreshingCompletionBlock = completionBlock;
    
    [self beginRefreshing];
}

#pragma mark 結(jié)束刷新狀態(tài)
- (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;
}

總結(jié)

MJRefreshComponent真的很基礎(chǔ)，沒有做很多復(fù)雜的操作甸祭，上拉刷新和下拉加載缕碎，其實全部都是由他的子類MJRefreshHeader和MJRefreshFooter來實現(xiàn)

MJRefreshHeader(繼承MJRefreshComponent)

代碼邏輯

代碼邏輯還是很清晰，自上而下
1.創(chuàng)建header的方式(block,action)
2.記錄header的一些屬性(刷新的時間池户，刷新的時間的key,忽略多少scrollView的contentInset的top)
3.通過重寫基類的方法和監(jiān)聽scrollView的變化來實現(xiàn)自定義的效果

創(chuàng)建header的方式

#pragma mark - 構(gòu)造方法
+ (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;
}

覆蓋父類的方法(核心)

- (void)prepare
{
    [super prepare];
    
    // 設(shè)置key
    self.lastUpdatedTimeKey = MJRefreshHeaderLastUpdatedTimeKey;
    
    // 設(shè)置高度
    self.mj_h = MJRefreshHeaderHeight;
}

//調(diào)用后咏雌，會調(diào)用基類的layoutSubviews方法(也就是自己子類先排列好位置，再更新基類的位置)
- (void)placeSubviews
{
    [super placeSubviews];
    
    // 設(shè)置y值(當(dāng)自己的高度發(fā)生改變了校焦，肯定要重新調(diào)整Y值赊抖，所以放到placeSubviews方法中設(shè)置y值)
    self.mj_y = - self.mj_h - self.ignoredScrollViewContentInsetTop;
}

- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change
{
    [super scrollViewContentOffsetDidChange:change];
    
    // 在刷新的refreshing狀態(tài)
    if (self.state == MJRefreshStateRefreshing) {
        if (self.window == nil) return;
        
        // sectionheader停留解決
        //- self.scrollView.mj_offsetY：-（-54-64）= 118 ： 刷新的時候，偏移量是不動的寨典。偏移量 = 狀態(tài)欄 + 導(dǎo)航欄 + header的高度
        //_scrollViewOriginalInset.top：64 （狀態(tài)欄20 + 導(dǎo)航欄44）
        //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;
        //設(shè)置contentInset
        self.scrollView.mj_insetT = insetT;
        // 記錄刷新的時候的偏移量 -54 = 64 - 118
        self.insetTDelta = _scrollViewOriginalInset.top - insetT;
        return;
    }
    
    // 跳轉(zhuǎn)到下一個控制器時氛雪，contentInset可能會變
     _scrollViewOriginalInset = self.scrollView.contentInset;
    
    // 當(dāng)前的contentOffset
    CGFloat offsetY = self.scrollView.mj_offsetY;
    // 頭部控件剛好出現(xiàn)的offsetY(-20 + -44 = -64)
    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) {
            // 轉(zhuǎn)為即將刷新狀態(tài)
            self.state = MJRefreshStatePulling;
        } else if (self.state == MJRefreshStatePulling && offsetY >= normal2pullingOffsetY) {
            // 轉(zhuǎn)為普通狀態(tài)
            self.state = MJRefreshStateIdle;
        }
    } else if (self.state == MJRefreshStatePulling) {// 即將刷新 && 手松開(當(dāng)你手松開耸成，且offsetY < normal2pullingOffsetY的時候报亩，那么你就代表你要刷新了)
        // 開始刷新
        [self beginRefreshing];
    } else if (pullingPercent < 1) {
        //手松開的時候，不更新狀態(tài)(時刻判斷offsetY的取值井氢，然后走上面兩個判斷是否可以刷新)
        self.pullingPercent = pullingPercent;
    }
  //上面的思路依然很聰明弦追，你隨便拉，反正你拖動的時候花竞，我不會去操作是否刷新劲件，我只是時刻標(biāo)記你的狀態(tài)，當(dāng)你停止拖動的時候约急，那個時候寇仓，我才會去判斷你當(dāng)前被標(biāo)記為什么狀態(tài)，從而作出正確的操作烤宙，good！
}

- (void)setState:(MJRefreshState)state
{
    // 根據(jù)狀態(tài)做事情俭嘁，從其他狀態(tài)回到常規(guī)狀態(tài)
    if (state == MJRefreshStateIdle) {
        if (oldState != MJRefreshStateRefreshing) return;
        
        // 保存刷新時間
        [[NSUserDefaults standardUserDefaults] setObject:[NSDate date] forKey:self.lastUpdatedTimeKey];
        [[NSUserDefaults standardUserDefaults] synchronize];
        
        // 恢復(fù)inset和offset
        [UIView animateWithDuration:MJRefreshSlowAnimationDuration animations:^{
            self.scrollView.mj_insetT += self.insetTDelta;
            
            // 自動調(diào)整透明度
            if (self.isAutomaticallyChangeAlpha) self.alpha = 0.0;
        } completion:^(BOOL finished) {
            self.pullingPercent = 0.0;
            
             //執(zhí)行刷新成功的回調(diào)
            if (self.endRefreshingCompletionBlock) {
                self.endRefreshingCompletionBlock();
            }
        }];
    } else if (state == MJRefreshStateRefreshing) {
          //從其他狀態(tài)到達刷新狀態(tài)
         dispatch_async(dispatch_get_main_queue(), ^{
            [UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
                CGFloat top = self.scrollViewOriginalInset.top + self.mj_h;
                // 增加滾動區(qū)域top(設(shè)置contentInset)
                self.scrollView.mj_insetT = top;
                // 設(shè)置滾動位置(設(shè)置contentOffset)
                [self.scrollView setContentOffset:CGPointMake(0, -top) animated:NO];
            } completion:^(BOOL finished) {
                //執(zhí)行刷新成功的回調(diào)
                [self executeRefreshingCallback];
            }];
         });
    }
}

#pragma mark - 公共方法
- (void)endRefreshing
{
    dispatch_async(dispatch_get_main_queue(), ^{
        self.state = MJRefreshStateIdle;
    });
}

總結(jié)

MJRefreshHeader 整體難度不大躺枕，核心的思想
1.重寫prepare方法，存儲時間搓，以及配置高度
2.重寫placeSubviews方法拐云，更新子控件的UI
3.重寫scrollViewContentOffsetDidChange方法罢猪，從而通過更新State來實現(xiàn)不同的視覺效果
4.更具setState方法來更新UI，實際就是更新scrollView的contentOffset叉瘩，contentInset等(這個是核心函數(shù))
我覺得作者這樣的思想很好膳帕，因為從后面的子類中，你可以看到薇缅，都是統(tǒng)一這樣的思路危彩，prepare做數(shù)據(jù)存儲和配置，placeSubviews更新子視圖控件位置泳桦，scrollViewContentOffsetDidChange代碼處理汤徽，最后在setState更新UI視圖。

MJRefreshFooter(繼承MJRefreshComponent)

代碼邏輯

MJRefreshFooter和MJRefreshComponent一樣 比較抽象灸撰，沒有什么核心操作谒府，沒有監(jiān)聽的處理，只是定義了幾個常規(guī)的footer函數(shù)浮毯，由子類來實現(xiàn)加載的真正實現(xiàn)
1.創(chuàng)建footer的方式(block,action)
2.記錄footer的屬性(忽略多少scrollView的contentInset的bottom,自動根據(jù)有無數(shù)據(jù)來顯示和隱藏（有數(shù)據(jù)就顯示完疫，沒有數(shù)據(jù)隱藏。默認是NO）)
3.配置一些footer狀態(tài)切換函數(shù)

創(chuàng)建footer的方式

#pragma mark - 構(gòu)造方法
+ (instancetype)footerWithRefreshingBlock:(MJRefreshComponentRefreshingBlock)refreshingBlock
{
    MJRefreshFooter *cmp = [[self alloc] init];
    cmp.refreshingBlock = refreshingBlock;
    return cmp;
}
+ (instancetype)footerWithRefreshingTarget:(id)target refreshingAction:(SEL)action
{
    MJRefreshFooter *cmp = [[self alloc] init];
    [cmp setRefreshingTarget:target refreshingAction:action];
    return cmp;
}

配置footer狀態(tài)切換的函數(shù)

#pragma mark - 公共方法
- (void)endRefreshingWithNoMoreData
{
    self.state = MJRefreshStateNoMoreData;
}

- (void)noticeNoMoreData
{
    [self endRefreshingWithNoMoreData];
}

- (void)resetNoMoreData
{
    self.state = MJRefreshStateIdle;
}

覆蓋父類的方法(核心)

- (void)prepare
{
    [super prepare];
    
    // 設(shè)置自己的高度
    self.mj_h = MJRefreshFooterHeight;
    
    // 默認不會自動隱藏
    self.automaticallyHidden = NO;
}

- (void)willMoveToSuperview:(UIView *)newSuperview
{
    [super willMoveToSuperview:newSuperview];
    
    if (newSuperview) {
        // 監(jiān)聽scrollView數(shù)據(jù)的變化
        if ([self.scrollView isKindOfClass:[UITableView class]] || [self.scrollView isKindOfClass:[UICollectionView class]]) {
            [self.scrollView setMj_reloadDataBlock:^(NSInteger totalDataCount) {
                //通過獲取行數(shù)的大小來判斷是否要隱藏footer(這個想法很好债蓝，要學(xué)習(xí)壳鹤，good！)
                if (self.isAutomaticallyHidden) {
                    self.hidden = (totalDataCount == 0);
                }
            }];
        }
    }
}

總結(jié)

MJRefreshFooter 沒有做什么核心的邏輯操作惦蚊，核心的思想
1.覆蓋父類的方法來配置高度和根據(jù)scrollView的總體個數(shù)來判斷footer是否要顯示器虾。
2.配置了一些切換加載更多的狀態(tài)，

MJRefreshStateHeader(繼承MJRefreshHeader)

代碼邏輯

MJRefreshStateHeader主要是stateLabel和lastUpdatedTimeLabel的展示蹦锋，根據(jù)state的狀態(tài)改變兆沙，再改變stateLabel和lastUpdatedTimeLabel的顯示。

配置stateLabel和lastUpdatedTimeLabel

#pragma mark - 日歷獲取在9.x之后的系統(tǒng)使用currentCalendar會出異常莉掂。在8.0之后使用系統(tǒng)新API葛圃。(這里的適配，我們要學(xué)習(xí)憎妙，以后在項目中使用)
- (NSCalendar *)currentCalendar {
    if ([NSCalendar respondsToSelector:@selector(calendarWithIdentifier:)]) {
        return [NSCalendar calendarWithIdentifier:NSCalendarIdentifierGregorian];
    }
    return [NSCalendar currentCalendar];
}

#pragma mark key的處理
- (void)setLastUpdatedTimeKey:(NSString *)lastUpdatedTimeKey
{
    [super setLastUpdatedTimeKey:lastUpdatedTimeKey];
    
    // 如果label隱藏了库正，就不用再處理
    if (self.lastUpdatedTimeLabel.hidden) return;
    
    NSDate *lastUpdatedTime = [[NSUserDefaults standardUserDefaults] objectForKey:lastUpdatedTimeKey];
    
    // 如果有block
    if (self.lastUpdatedTimeText) {
        self.lastUpdatedTimeLabel.text = self.lastUpdatedTimeText(lastUpdatedTime);
        return;
    }
    
    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]];
    }
}

#pragma mark - 覆蓋父類的方法
- (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];
}

- (void)placeSubviews
{
    [super placeSubviews];
    
    if (self.stateLabel.hidden) return;
    
    BOOL noConstrainsOnStatusLabel = self.stateLabel.constraints.count == 0;
    
    if (self.lastUpdatedTimeLabel.hidden) {
        // 狀態(tài)
        if (noConstrainsOnStatusLabel) self.stateLabel.frame = self.bounds;
    } else {
        CGFloat stateLabelH = self.mj_h * 0.5;
        // 狀態(tài)
        if (noConstrainsOnStatusLabel) {
            self.stateLabel.mj_x = 0;
            self.stateLabel.mj_y = 0;
            self.stateLabel.mj_w = self.mj_w;
            self.stateLabel.mj_h = stateLabelH;
        }
        
        // 更新時間
        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;
        }
    }
}

- (void)setState:(MJRefreshState)state
{
    MJRefreshCheckState
    
    // 設(shè)置狀態(tài)文字
    self.stateLabel.text = self.stateTitles[@(state)];
    
    // 重新設(shè)置key（重新顯示時間），在這里觸發(fā)setLastUpdatedTimeKey從而更新顯示內(nèi)容
    self.lastUpdatedTimeKey = self.lastUpdatedTimeKey;
}

- (UILabel *)stateLabel
{
    if (!_stateLabel) {
        [self addSubview:_stateLabel = [UILabel mj_label]];
    }
    return _stateLabel;
}

- (UILabel *)lastUpdatedTimeLabel
{
    if (!_lastUpdatedTimeLabel) {
        [self addSubview:_lastUpdatedTimeLabel = [UILabel mj_label]];
    }
    return _lastUpdatedTimeLabel;
}

MJRefreshStateHeader

總結(jié)

MJRefreshStateHeader的部分其實不難厘唾，只是根據(jù)state更新兩個label的文本褥符。
1.依然還是在prepare做好初始數(shù)據(jù)的配置，兩個label已經(jīng)做好了懶加載抚垃，使用到的時候就會添加上視圖喷楣。
2.然后在placeSubviews的時候做好視圖的更新
3.依舊是在setState的時候更改文本內(nèi)容

MJRefreshNormalHeader(繼承MJRefreshStateHeader)

代碼邏輯

MJRefreshNormalHeader是在MJRefreshStateHeader兩個label的基礎(chǔ)上趟大，加上了arrowView和loadingView
從代碼的角度，只是在MJRefreshStateHeader的基礎(chǔ)上加上了兩個UI控件而已铣焊，其他基本沒有發(fā)生大的變化逊朽，在setState的時候設(shè)置loadingView和arrowView的顯示

配置_arrowView和loadingView

#pragma mark - 重寫父類的方法
- (void)prepare
{
    [super prepare];
    
    self.activityIndicatorViewStyle = UIActivityIndicatorViewStyleGray;
}

- (void)placeSubviews
{
    [super placeSubviews];
    
    // 箭頭的中心點
    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;
        }
        CGFloat textWidth = MAX(stateWidth, timeWidth);
        arrowCenterX -= textWidth / 2 + self.labelLeftInset;
    }
    CGFloat arrowCenterY = self.mj_h * 0.5;
    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;
    }
    
    self.arrowView.tintColor = self.stateLabel.textColor;
}

- (void)setState:(MJRefreshState)state
{
    MJRefreshCheckState
    
    // 根據(jù)狀態(tài)做事情
    if (state == MJRefreshStateIdle) {
        if (oldState == MJRefreshStateRefreshing) {
            //從刷新中，轉(zhuǎn)到常規(guī)狀態(tài)曲伊，對于arrowView設(shè)置transform為初始值就可以了
            self.arrowView.transform = CGAffineTransformIdentity;
            
           //同時做透明度動畫叽讳，隱藏菊花
            [UIView animateWithDuration:MJRefreshSlowAnimationDuration animations:^{
                self.loadingView.alpha = 0.0;
            } completion:^(BOOL finished) {
                // 如果執(zhí)行完動畫發(fā)現(xiàn)不是idle狀態(tài)，就直接返回坟募，進入其他狀態(tài)
                if (self.state != MJRefreshStateIdle) return;
                
                self.loadingView.alpha = 1.0;
                [self.loadingView stopAnimating];
                self.arrowView.hidden = NO;
            }];
        } else {
             //即是說恢復(fù)成常規(guī)狀態(tài)(只要不是在刷新的狀態(tài)岛蚤，那么菊花停止動畫就可以了，同時讓arrowView恢復(fù)到初始值就可以了)
            [self.loadingView stopAnimating];
            self.arrowView.hidden = NO;
            [UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
                self.arrowView.transform = CGAffineTransformIdentity;
            }];
        }
    } else if (state == MJRefreshStatePulling) {
      //即是說恢復(fù)成正在拉取狀態(tài)(菊花停止動畫婿屹，同時讓arrowView旋轉(zhuǎn)180度就可以了)
        [self.loadingView stopAnimating];
        self.arrowView.hidden = NO;
        [UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
            self.arrowView.transform = CGAffineTransformMakeRotation(0.000001 - M_PI);
        }];
    } else if (state == MJRefreshStateRefreshing) {
        //即是說刷新狀態(tài)(菊花開始動畫灭美，同時隱藏arrowView)
        self.loadingView.alpha = 1.0; // 防止refreshing -> idle的動畫完畢動作沒有被執(zhí)行
        [self.loadingView startAnimating];
        self.arrowView.hidden = YES;
    }
}

#pragma mark - 懶加載子控件
- (UIImageView *)arrowView
{
    if (!_arrowView) {
        UIImageView *arrowView = [[UIImageView alloc] initWithImage:[NSBundle mj_arrowImage]];
        [self addSubview:_arrowView = arrowView];
    }
    return _arrowView;
}

- (UIActivityIndicatorView *)loadingView
{
    if (!_loadingView) {
        UIActivityIndicatorView *loadingView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:self.activityIndicatorViewStyle];
        loadingView.hidesWhenStopped = YES;
        [self addSubview:_loadingView = loadingView];
    }
    return _loadingView;
}

MJRefreshNormalHeader

總結(jié)

MJRefreshNormalHeader和MJRefreshStateHeader基本一樣，代碼格式也差不多的昂利，所以也是prepare設(shè)置初始數(shù)據(jù)届腐，placeSubviews更新控件位置，setState更新菊花和arrowView的顯示

MJRefreshGifHeader(繼承MJRefreshStateHeader)

代碼邏輯

MJRefreshGifHeader和MJRefreshNormalHeader的區(qū)別只是把菊花和arrowView換成了gifView蜂奸，其他的代碼邏輯基本一樣

配置gifView

#pragma mark - 懶加載
- (UIImageView *)gifView
{
    if (!_gifView) { 
        UIImageView *gifView = [[UIImageView alloc] init]; 
        [self addSubview:_gifView = gifView]; 
    } 
    return _gifView; 
}

#pragma mark - 公共方法
- (void)setImages:(NSArray *)images duration:(NSTimeInterval)duration forState:(MJRefreshState)state 
{ 
    if (images == nil) return; 
    
    self.stateImages[@(state)] = images; 
    self.stateDurations[@(state)] = @(duration); 
    
    /* 根據(jù)圖片設(shè)置控件的高度 */ 
    UIImage *image = [images firstObject]; 
    if (image.size.height > self.mj_h) { 
        //如果圖片太大犁苏，就更新header的高度
        self.mj_h = image.size.height; 
    } 
}

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

#pragma mark - 實現(xiàn)父類的方法
- (void)prepare
{
    [super prepare];
    
    // 初始化間距
    self.labelLeftInset = 20;
}

- (void)setPullingPercent:(CGFloat)pullingPercent
{
    [super setPullingPercent:pullingPercent];
    NSArray *images = self.stateImages[@(MJRefreshStateIdle)];
    if (self.state != MJRefreshStateIdle || images.count == 0) return;
    // 停止動畫
    [self.gifView stopAnimating];
    // 設(shè)置當(dāng)前需要顯示的圖片
    NSUInteger index =  images.count * pullingPercent;
    if (index >= images.count) index = images.count - 1;
    self.gifView.image = images[index];
}

- (void)placeSubviews
{
    [super placeSubviews];
    
    if (self.gifView.constraints.count) return;
    
    self.gifView.frame = self.bounds;
    if (self.stateLabel.hidden && self.lastUpdatedTimeLabel.hidden) {
        self.gifView.contentMode = UIViewContentModeCenter;
    } else {
        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;
    }
}

- (void)setState:(MJRefreshState)state
{
    MJRefreshCheckState
    
    // 根據(jù)狀態(tài)做事情
    if (state == MJRefreshStatePulling || state == MJRefreshStateRefreshing) {
        NSArray *images = self.stateImages[@(state)];
        if (images.count == 0) return;
        //重置播放，重新播放gif圖片
        [self.gifView stopAnimating];
        if (images.count == 1) { // 單張圖片
            self.gifView.image = [images lastObject];
        } else { // 多張圖片
            self.gifView.animationImages = images;
            self.gifView.animationDuration = [self.stateDurations[@(state)] doubleValue];
            [self.gifView startAnimating];
        }
    } else if (state == MJRefreshStateIdle) {
        //原始狀態(tài)的時候扩所，隱藏動畫
        [self.gifView stopAnimating];
    }
}

MJRefreshGifHeader

總結(jié)

MJRefreshGifHeader和MJRefreshNormalHeader差不多围详，比較新穎的就是使用了UIImageView的animationImages和animationDuration屬性來實現(xiàn)gif動畫的效果

MJRefreshAutoFooter(繼承MJRefreshFooter)

代碼邏輯

整體難度不大，核心就是通過監(jiān)聽contentOffset的改變祖屏，當(dāng)達到底部的時候助赞，自動調(diào)用beginRefreshing，更新State袁勺，然后在更新完成后雹食，更新hidden從而修改UIScrollView的contentInset和footer的位置來實現(xiàn)加載完畢后隱藏尾部

配置footer的核心操作

#pragma mark - 實現(xiàn)父類的方法
- (void)prepare
{
    [super prepare];
    
    // 默認底部控件100%出現(xiàn)時才會自動刷新
    self.triggerAutomaticallyRefreshPercent = 1.0;
    
    // 設(shè)置為默認狀態(tài)
    self.automaticallyRefresh = YES;
}

- (void)scrollViewContentSizeDidChange:(NSDictionary *)change
{
    [super scrollViewContentSizeDidChange:change];
    
    // 設(shè)置位置,將尾部放在scrollView的底部，即contentSize的height處
    self.mj_y = self.scrollView.mj_contentH;
}

- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change
{
    [super scrollViewContentOffsetDidChange:change];
    //也就是說當(dāng)state不等于空閑狀態(tài)期丰，并且不是自動更新群叶，并且scrollView沒有生成的時候，都停止下面的判斷自動更新的操作钝荡。(這個思路很好街立，不管后面會不會走到，但是邏輯上不應(yīng)該走埠通，就要杜絕)
    if (self.state != MJRefreshStateIdle || !self.automaticallyRefresh || self.mj_y == 0) return;
    // 內(nèi)容超過一個屏幕
    if (_scrollView.mj_insetT + _scrollView.mj_contentH > _scrollView.mj_h) { 
        // 這里的_scrollView.mj_contentH替換掉self.mj_y更為合理
        if (_scrollView.mj_offsetY >= _scrollView.mj_contentH - _scrollView.mj_h + self.mj_h * self.triggerAutomaticallyRefreshPercent + _scrollView.mj_insetB - self.mj_h) {
            // 防止手松開時連續(xù)調(diào)用
            CGPoint old = [change[@"old"] CGPointValue];
            CGPoint new = [change[@"new"] CGPointValue];
            if (new.y <= old.y) return;
            
            // 當(dāng)?shù)撞克⑿驴丶耆霈F(xiàn)時赎离，才刷新
            [self beginRefreshing];
        }
    }
}

- (void)scrollViewPanStateDidChange:(NSDictionary *)change
{
    [super scrollViewPanStateDidChange:change];
    
    if (self.state != MJRefreshStateIdle) return;
    // 手松開
    if (_scrollView.panGestureRecognizer.state == UIGestureRecognizerStateEnded) {
        //當(dāng)手拉開的時候，兩種情況端辱，一種本身scrollView自身就沒有屏幕高梁剔，而且你還在向上拉圾浅，那么觸發(fā)自動加載更多，另一種就是scrollView比屏幕還高(大部分都是這樣),并且你拉的區(qū)域比mj_contentH + 底部的contentInset的bottom - scrollView的frame的高憾朴，證明你當(dāng)前已經(jīng)拉到底部，那么當(dāng)然也要加載更多喷鸽。
        // 不夠一個屏幕
        if (_scrollView.mj_insetT + _scrollView.mj_contentH <= _scrollView.mj_h) {  
            // 向上拽
            if (_scrollView.mj_offsetY >= - _scrollView.mj_insetT) { 
                [self beginRefreshing];
            }
        } else { // 超出一個屏幕
            if (_scrollView.mj_offsetY >= _scrollView.mj_contentH + _scrollView.mj_insetB - _scrollView.mj_h) {
                [self beginRefreshing];
            }
        }
    }
}

- (void)setState:(MJRefreshState)state
{
    MJRefreshCheckState
    
    if (state == MJRefreshStateRefreshing) {
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [self executeRefreshingCallback];
        });
    } else if (state == MJRefreshStateNoMoreData || state == MJRefreshStateIdle) {
        if (MJRefreshStateRefreshing == oldState) {
            if (self.endRefreshingCompletionBlock) {
                self.endRefreshingCompletionBlock();
            }
        }
    }
}

- (void)setHidden:(BOOL)hidden
{
    BOOL lastHidden = self.isHidden;
    
    [super setHidden:hidden];
    
    if (!lastHidden && hidden) {
        self.state = MJRefreshStateIdle;
        
        self.scrollView.mj_insetB -= self.mj_h;
    } else if (lastHidden && !hidden) {
        self.scrollView.mj_insetB += self.mj_h;
        
        // 設(shè)置位置
        self.mj_y = _scrollView.mj_contentH;
    }
}

總結(jié)

MJRefreshAutoFooter的想法也是很好众雷，通過監(jiān)聽contentOffset的變化，然后根據(jù)contentInset做祝，scrollView自身的frame一起結(jié)合起來判斷scrollView當(dāng)前滾動的狀態(tài)砾省，從而來判斷是否加載更多

MJRefreshBackFooter(繼承MJRefreshFooter)

代碼邏輯

整體難度不大，核心就是通過監(jiān)聽contentOffset的改變混槐，當(dāng)達到底部的時候编兄，自動調(diào)用beginRefreshing，更新State声登，然后在更新完成后狠鸳，修改UIScrollView的contentInset和footer的位置來實現(xiàn)加載完畢后出現(xiàn)回彈效果

配置footer核心操作

#pragma mark - 實現(xiàn)父類的方法
- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change
{
    [super scrollViewContentOffsetDidChange:change];
    
    // 如果正在刷新，直接返回
    if (self.state == MJRefreshStateRefreshing) return;
    
    _scrollViewOriginalInset = self.scrollView.contentInset;
    
    // 當(dāng)前的contentOffset
    CGFloat currentOffsetY = self.scrollView.mj_offsetY;
    // 尾部控件剛好出現(xiàn)的offsetY
    CGFloat happenOffsetY = [self happenOffsetY];
    // 如果是向下滾動到看不見尾部控件悯嗓，直接返回
    if (currentOffsetY <= happenOffsetY) return;
    
    CGFloat pullingPercent = (currentOffsetY - happenOffsetY) / self.mj_h;
    
    // 如果已全部加載件舵，僅設(shè)置pullingPercent，然后返回
    if (self.state == MJRefreshStateNoMoreData) {
        self.pullingPercent = pullingPercent;
        return;
    }
    
    if (self.scrollView.isDragging) {
        self.pullingPercent = pullingPercent;
        // 普通 和 即將刷新 的臨界點
        CGFloat normal2pullingOffsetY = happenOffsetY + self.mj_h;
        
        if (self.state == MJRefreshStateIdle && currentOffsetY > normal2pullingOffsetY) {
            // 轉(zhuǎn)為即將刷新狀態(tài)
            self.state = MJRefreshStatePulling;
        } else if (self.state == MJRefreshStatePulling && currentOffsetY <= normal2pullingOffsetY) {
            // 轉(zhuǎn)為普通狀態(tài)
            self.state = MJRefreshStateIdle;
        }
    } else if (self.state == MJRefreshStatePulling) {// 即將刷新 && 手松開
        // 開始刷新
        [self beginRefreshing];
    } else if (pullingPercent < 1) {
        self.pullingPercent = pullingPercent;
    }
}

- (void)scrollViewContentSizeDidChange:(NSDictionary *)change
{
    [super scrollViewContentSizeDidChange:change];
    
    // 內(nèi)容的高度
    CGFloat contentHeight = self.scrollView.mj_contentH + self.ignoredScrollViewContentInsetBottom;
    // 表格的高度
    CGFloat scrollHeight = self.scrollView.mj_h - self.scrollViewOriginalInset.top - self.scrollViewOriginalInset.bottom + self.ignoredScrollViewContentInsetBottom;
    // 設(shè)置位置和尺寸
    self.mj_y = MAX(contentHeight, scrollHeight);
}

- (void)setState:(MJRefreshState)state
{
    MJRefreshCheckState
    
    // 根據(jù)狀態(tài)來設(shè)置屬性
    if (state == MJRefreshStateNoMoreData || state == MJRefreshStateIdle) {
        // 刷新完畢
        if (MJRefreshStateRefreshing == oldState) {
            [UIView animateWithDuration:MJRefreshSlowAnimationDuration animations:^{
                self.scrollView.mj_insetB -= self.lastBottomDelta;
                
                // 自動調(diào)整透明度
                if (self.isAutomaticallyChangeAlpha) self.alpha = 0.0;
            } completion:^(BOOL finished) {
                self.pullingPercent = 0.0;
                
                if (self.endRefreshingCompletionBlock) {
                    self.endRefreshingCompletionBlock();
                }
            }];
        }
        
        CGFloat deltaH = [self heightForContentBreakView];
        // 剛刷新完畢
        if (MJRefreshStateRefreshing == oldState && deltaH > 0 && self.scrollView.mj_totalDataCount != self.lastRefreshCount) {
            self.scrollView.mj_offsetY = self.scrollView.mj_offsetY;
        }
    } else if (state == MJRefreshStateRefreshing) {
        // 記錄刷新前的數(shù)量
        self.lastRefreshCount = self.scrollView.mj_totalDataCount;
        
        [UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
            CGFloat bottom = self.mj_h + self.scrollViewOriginalInset.bottom;
            CGFloat deltaH = [self heightForContentBreakView];
            if (deltaH < 0) { // 如果內(nèi)容高度小于view的高度
                bottom -= deltaH;
            }
            self.lastBottomDelta = bottom - self.scrollView.mj_insetB;
            self.scrollView.mj_insetB = bottom;
            self.scrollView.mj_offsetY = [self happenOffsetY] + self.mj_h;
        } completion:^(BOOL finished) {
            [self executeRefreshingCallback];
        }];
    }
}

- (void)endRefreshing
{
    dispatch_async(dispatch_get_main_queue(), ^{
        self.state = MJRefreshStateIdle;
    });
}

- (void)endRefreshingWithNoMoreData
{
    dispatch_async(dispatch_get_main_queue(), ^{
        self.state = MJRefreshStateNoMoreData;
    });
}

總結(jié)

MJRefreshBackFooter的想法也是很好脯厨，通過監(jiān)聽contentOffset的變化铅祸，然后根據(jù)contentInset，scrollView自身的frame一起結(jié)合起來判斷scrollView當(dāng)前滾動的狀態(tài)合武，從而來判斷是否加載更多,并且在加載完成后临梗，更新UI視圖，從而實現(xiàn)收起來的視覺效果