1. 程式人生 > >自定義MJRefresh動畫 , 自定義佈局

自定義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;

}

這裡寫圖片描述