iOS MJRefresh 自定义刷新动画

Posted 2022-11-21 长沙火山

前言

项目开发中用了MJRefres 刷新控件，但是MJRefresh默认的加载样式感觉比较丑，产品觉得需要换个样式，弄的简洁一点。于是着手看了一下MJRefresh的源码，发现其提供了修改样式的方法。

从MJRefresh的继承图谱来看，带动画的下拉刷新类为：MJRefreshGifHeader，带动画的上拉刷新类为：MJRefreshBackGifFooter。我们只需要分别继承这两个类，然后把加载动画的功能重写一下就可以实现了。

一、自定义下拉刷新动画

自己重新创建一个类：HSRefreshGifHeader，继承 MJRefreshGifHeader。具体代码如下：

#import "MJRefreshGifHeader.h"

@interface HSRefreshGifHeader : MJRefreshGifHeader

@end

#import "HSRefreshGifHeader.h"

@implementation HSRefreshGifHeader

#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];


- (void)placeSubviews 
    [super placeSubviews];
    //隐藏状态显示文字
    self.stateLabel.hidden = YES;
    //隐藏更新时间文字
    self.lastUpdatedTimeLabel.hidden = YES;


#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;


@end

二、自定义上拉刷新动画

自己重新创建一个类：HSRefreshGifFooter，继承 MJRefreshBackGifFooter。具体代码如下：

#import "MJRefreshBackGifFooter.h"

@interface HSRefreshGifFooter : MJRefreshBackGifFooter

@end

#import "HSRefreshGifFooter.h"

@interface HSRefreshGifFooter ()

@end

@implementation HSRefreshGifFooter

#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];


- (void)placeSubviews 
    [super placeSubviews];
    
    self.stateLabel.hidden = self.state != MJRefreshStateNoMoreData;


- (void)scrollViewContentSizeDidChange:(NSDictionary *)change

    [super scrollViewContentSizeDidChange:change];
    
    // 内容的高度
    CGFloat contentHeight = self.scrollView.mj_contentH + self.ignoredScrollViewContentInsetBottom;
    // 表格的高度
    CGFloat scrollHeight = self.scrollView.mj_h - self.scrollViewOriginalInset.top - self.scrollViewOriginalInset.bottom + self.ignoredScrollViewContentInsetBottom;
    // 设置位置和尺寸
    self.mj_y = MAX(contentHeight, scrollHeight);
    


#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;


@end

三、如何使用

//导入相关头文件
#import "HSRefreshGifHeader.h"
#import "HSRefreshGifFooter.h"

 //下拉刷新
 self.tableView.mj_header = [HSRefreshGifHeader headerWithRefreshingBlock:^
     self.page = 1;
     [self.arrData removeAllObjects];
     [self requestData];
 ];
    
 //上拉加载更多
 self.tableView.mj_footer = [HSRefreshGifFooter footerWithRefreshingBlock:^
     self.page ++;
     [self requestData];
 ];

自己准备好动画图片：

资源下载：https://download.csdn.net/download/u010545480/86018815