自定義MJRefresh動畫 , 自定義佈局
阿新 • • 發佈:2019-01-21
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;
}