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