iOS自定義MJRefresh上拉和下拉重新整理動畫

最近利用MJRefresh做了一個下拉重新整理和上拉載入的動畫，先上效果圖：

基本思路：

• 製作下拉動畫時我們只需要在MJRefresh的MJRefreshGifHeader類中新增我們所需要Gif圖片，並隱藏掉提示文字即可。
• 製作上拉動畫同理，需要在MJRefresh的MJRefreshBackGifFooter類或者MJRefreshAutoGifFooter類中新增我們所需要Gif圖片，並隱藏掉提示文字即可。（MJRefreshBackGifFooter和MJRefreshAutoGifFooter的區別是：前者只有上拉才會顯示，是預設的上拉控制元件，而後者則是新增在所需要重新整理檢視下面，上拉或者點選文字均可觸發載入動畫）

一、下拉重新整理

• 建立一個gif類CustomGifHeader繼承自MJRefreshGifHeader。

@interface CustomGifHeader : MJRefreshGifHeader

• 重寫父類方法- (void)prepare NS_REQUIRES_SUPER;，在方法中新增gif圖片，並設定普通閒置狀態MJRefreshStateIdle、即將重新整理狀態MJRefreshStatePulling和正在重新整理狀態MJRefreshStateRefreshing下對應載入的gif動畫。

#pragma mark - 實現父類的方法
- (void)prepare {
    [super prepare];
    //GIF資料
    NSArray * idleImages = [self getRefreshingImageArrayWithStartIndex:1 endIndex:8];
    NSArray * refreshingImages = [self getRefreshingImageArrayWithStartIndex:1 endIndex:8];
    //普通狀態
    [self setImages:idleImages forState:MJRefreshStateIdle];
    //即將重新整理狀態
    [self setImages:refreshingImages forState:MJRefreshStatePulling];
    //正在重新整理狀態
    [self setImages:refreshingImages forState:MJRefreshStateRefreshing];
}

#pragma mark - 獲取資源圖片
- (NSArray *)getRefreshingImageArrayWithStartIndex:(NSInteger)startIndex endIndex:(NSInteger)endIndex {
    NSMutableArray * imageArray = [NSMutableArray array];
    for (NSUInteger i = startIndex; i <= endIndex; i++) {
        UIImage * image = [UIImage imageNamed:[NSString stringWithFormat:@"Loading_%zd.tiff",i]];
        if (image) {
            [imageArray addObject:image];
        }
    }
    return imageArray;
}

• 重寫控制子控制元件frame方法- (void)placeSubviews NS_REQUIRES_SUPER;隱藏對應的文字顯示。

#pragma mark - 實現父類的方法
- (void)placeSubviews {
    [super placeSubviews];
    //隱藏狀態顯示文字
    self.stateLabel.hidden = YES;
    //隱藏更新時間文字
    self.lastUpdatedTimeLabel.hidden = YES;
}

• 在控制器中建立重新整理gifHeader。

- (CustomGifHeader *)gifHeader {
    if (!_gifHeader) {
        _gifHeader = [CustomGifHeader headerWithRefreshingBlock:^{
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                [self.tableView.mj_header endRefreshing];
            });
        }];
    }
    return _gifHeader;
}

• tableView新增重新整理gifHeader。

_tableView.mj_header = self.gifHeader;

二、上拉載入

• 建立一個gif類CustomGifFooter繼承自MJRefreshBackGifFooter。（這裡預設以繼承MJRefreshBackGifFooter為例，如果繼承自MJRefreshAutoGifFooter，則和該過程類似）

@interface CustomGifFooter : MJRefreshBackGifFooter

• 重寫父類方法- (void)prepare NS_REQUIRES_SUPER;（和下拉重新整理一樣）。
• 重寫控制子控制元件frame方法- (void)placeSubviews NS_REQUIRES_SUPER;隱藏對應的文字顯示。

- (void)placeSubviews {
    [super placeSubviews];
    //隱藏狀態顯示文字
    self.stateLabel.hidden = YES;
}

如果該類繼承自MJRefreshAutoGifFooter類，則父類方法- (void)placeSubviews NS_REQUIRES_SUPER;實現如下：

- (void)placeSubviews{
    [super placeSubviews];
    //隱藏狀態顯示文字
//    self.stateLabel.hidden = YES;
    //隱藏重新整理狀態的文字
    self.refreshingTitleHidden = YES;
}

• 在控制器中建立重新整理gifFooter。

- (CustomGifFooter *)gifFooter {
    if (!_gifFooter) {
        _gifFooter = [CustomGifFooter footerWithRefreshingBlock:^{
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                [self.tableView.mj_footer endRefreshing];
            });
        }];
    }
    return _gifFooter;
}

• tableView新增重新整理gifFooter。

_tableView.mj_footer = self.gifFooter;

如果建立的上拉載入gif類繼承自MJRefreshAutoGifFooter，則載入效果如下，其中的文字提示可以通過重寫父類方法- (void)placeSubviews NS_REQUIRES_SUPER;設定self.stateLabel.hidden = YES;隱藏掉。

Demo地址：MJRefresh載入動畫