UI - 自定义MJRefresh动画 , 自定义布局

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

---

查看框架类 —>MJRefreshGifHeader , 继续查看继承关系 , 可以找到最终的类为 MJRefreshComponent .
观察MJRefresh中每个类 , 从每个类中不难看出 , 从复杂的动画下拉刷新 , 到简单的下拉上拉文字提醒 , 每一个子类都重写了父类的 prepare 和 placeSubviews 方法 , 前者在 MJRefreshComponent 类中的重写initWithFrame方法中 , 用于创建刷新控件 , placeSubviews 在MJRefreshComponent类中的重写layoutSubviews方法中 ,用于刷新控件的布局 .
所以 , 当我们想要对刷新控件进行重新布局 , 只需要继承MJRefreshGifHeader , 然后重写placeSubviews方法即可.

---

<.h>

@interface MYCustomGifHeader ()

//记录header的高度
@property (nonatomic, assign) CGSize imageSize;

@end

MJRefreshGifHeader 类中的布局方法

- (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;
    }
}

---

//重写父类MJRefreshGifHeader布局
- (void)placeSubviews
{

    [super placeSubviews];
    self.lastUpdatedTimeLabel.hidden = YES;
    //stateLabel , gifView重新布局
    self.gifView.mj_origin = CGPointMake((self.bounds.size.width - self.imageSize.width)* 0.5, 5);
    self.gifView.mj_size = CGSizeMake(50, 50);
    self.stateLabel.mj_y = CGRectGetMaxY(self.gifView.frame)+2.f;
    self.stateLabel.mj_h = 30;
}

---

重写居中布局

- (void)prepare
{
    [super prepare];

    self.stateLabel.textAlignment = NSTextAlignmentCenter;
    self.gifView.contentMode = UIViewContentModeCenter;
}

---

重写- (void)setImages:(NSArray *)images duration:(NSTimeInterval)duration forState:(MJRefreshState)state , 并调用下父类 , 获取照片宽高 , 并记录

- (void)setImages:(NSArray *)images duration:(NSTimeInterval)duration forState:(MJRefreshState)state
{
    [super setImages:images duration:duration forState:state]; //调用一下父类方法

    //取出第一张照片,求高度
    UIImage *image = images.firstObject;
    //记录照片size
    self.imageSize = image.size;
    self.mj_h = image.size.height + 30;

}

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

---

viewDidLoad

- (void)viewDidLoad {
    [super viewDidLoad];

    [self.view addSubview:self.testTableView];

    MYCustomGifHeader *header = [MYCustomGifHeader headerWithRefreshingBlock:^{

        [self loadData];

    }];

    NSMutableArray *arr = [NSMutableArray array];
    for (NSInteger index = 0; index < 10; index ++) {

        UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"JY_MJheadGif_%li",index+1]];

        [arr addObject:image];
    }

    [header setImages:arr forState:MJRefreshStatePulling];
    [header setTitle:@"拖动以刷新" forState:MJRefreshStateIdle];
    [header setTitle:@"再拖我就刷新了" forState:MJRefreshStatePulling];
    [header setTitle:@"正在刷新页面" forState:MJRefreshStateRefreshing];
    [header setTitle:@"即将刷新" forState:MJRefreshStateWillRefresh];
    self.testTableView.mj_header = header;

}