MJRefresh实现动画下拉刷新

关注

原创最新推荐文章于 2026-09-10 20:27:41 发布 1.9k 阅读 AI 写同款· GEO 优化 ›

UI - 自定义MJRefresh动画 , 自定义布局 MJRefresh框架在大部分中的项目中都能见到 , 但是随时用户体验意识的增强 , 越来越多的需求被提出 . 已不完全满足于在上拉或者下拉提示简单的文字了 . 经常我们看见越来越多的App用到加载动画 .而以上的需求 , 在github上已经有全面的使用说明了 , 而唯一缺少的是自定义布局动画效果, 直接上代码吧查看框架类 —>MJRefreshGifHeader , 继续查看继承关系 , 阅读详情

项目中需要使用下拉的动画效果，MJ上的是图片在左，文字在右（而且没有样式选择），我们需要的是图片在上文字在下，我们只需要继承MJRefreshGifHeader，即可修改样式。
gif

代码：

-(void)prepare{
    [super prepare];

    // 设置普通状态的动画图片
    NSMutableArray *idleImages = [NSMutableArray array];
    for (NSUInteger i = 1; i<=60; i++) {
        UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_anim__000%zd", i]];
        [idleImages addObject:image];
    }
    [self setImages:idleImages forState:MJRefreshStateIdle];

    // 设置即将刷新状态的动画图片（一松开就会刷新的状态）
    NSMutableArray *refreshingImages = [NSMutableArray array];
    for (NSUInteger i = 1; i<=3; i++) {
        UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_loading_0%zd", i]];
        [refreshingImages addObject:image];
    }
    [self setImages:refreshingImages forState:MJRefreshStatePulling];
    [self setImages:refreshingImages forState:MJRefreshStateRefreshing];


    self.lastUpdatedTimeLabel.hidden = YES;
        self.stateLabel.hidden = NO;
    self.stateLabel.textColor = [UIColor blackColor];
    self.mj_h = 80;
}

//在这修改图片和label的位置
- (void)placeSubviews
{
    [super placeSubviews];
    self.gifView.contentMode = UIViewContentModeCenter;

    //调整图片的位置
    CGRect labelframe = self.stateLabel.frame;
    labelframe.size.height = 15;
    labelframe.origin.y = self.bounds.size.height - 20;
    self.stateLabel.frame = labelframe;
    CGPoint center = self.center;
    center.y = CGRectGetMinY(self.stateLabel.frame) - self.gifView.mj_h / 2.0;
    self.gifView.center = center;
}