iOS自定义MJRefresh上拉和下拉刷新动画

最近利用MJRefresh做了一个下拉刷新和上拉加载的动画,先上效果图:

refresh.gif

基本思路:
  • 制作下拉动画时我们只需要在MJRefreshMJRefreshGifHeader类中添加我们所需要Gif图片,并隐藏掉提示文字即可。
  • 制作上拉动画同理,需要在MJRefreshMJRefreshBackGifFooter类或者MJRefreshAutoGifFooter类中添加我们所需要Gif图片,并隐藏掉提示文字即可。(MJRefreshBackGifFooterMJRefreshAutoGifFooter的区别是:前者只有上拉才会显示,是默认的上拉控件,而后者则是添加在所需要刷新视图下面,上拉或者点击文字均可触发加载动画)
一、下拉刷新
  • 创建一个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;隐藏掉。

refresh.gif

Demo地址:MJRefresh加载动画

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,027评论 3 119
  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 29,748评论 8 265
  • 本文转载自J_Knight 的MJRefresh源码解析 MJRefresh是李明杰的作品,到现在已经有9800多...
    Detective41阅读 678评论 0 1
  • 很久以前就有了一个想法,就是邀三五志同道合的好友,带上我们的娃一起去外面旅行……因为我的拖延症比较严重,所以...
    小Y妈阅读 261评论 5 1
  • 又见亲王爆头,畅快淋漓。看权力的游戏,想的最多的是每个爆头杀戮的场景如何能够做到如此酣畅,需要多少镜头来完成这些近...
    f3d8dfcc8350阅读 220评论 0 0