接着上一章,我们继续了解MJRefresh。上一篇文章中我们了解了MJRefresh的主要类,以及他们之间的关系,了解了Header的各种使用方法。这一篇文章中,我们继续一起学习Footer的各种类型以及用法。
先来看下有几种footer
base中有三种:
custom中有六种
他们之间的关系如下:
下面我们一起来看下,这么多Footer类,都是做什么的。
1、MJRefreshFooter
效果:没有效果,也不会刷新
用法:
//没有效果,也不会刷新
-(void)refreshNone{
__weak UpRefreshController * weakSelf = self;
self.tableView.mj_footer = [MJRefreshFooter footerWithRefreshingBlock:^{
[weakSelf loadDataMore];
[weakSelf.tableView reloadData];
[weakSelf endRefresh];
}];
}
2、MJRefreshBackFooter
效果:
没有任何刷新的UI,但是有刷新效果。
用法:
//没有任何刷新的UI,但是有刷新效果
-(void)refreshBack{
__weak UpRefreshController * weakSelf = self;
self.tableView.mj_footer = [MJRefreshBackFooter footerWithRefreshingBlock:^{
[weakSelf loadDataMore];
[weakSelf.tableView reloadData];
[weakSelf endRefresh];
}];
}
运行效果:
3、MJRefreshBackGifFooter
效果:有文字刷新状态,有刷新效果
用法:
//有文字刷新状态,有刷新效果
-(void)refreshBackGif{
__weak UpRefreshController * weakSelf = self;
self.tableView.mj_footer = [MJRefreshBackGifFooter footerWithRefreshingBlock:^{
[weakSelf loadDataMore];
[weakSelf.tableView reloadData];
[weakSelf endRefresh];
}];
}
运行效果:
4、MJRefreshBackStateFooter
效果:和MJRefreshBackGifFooter 一样 只有文字刷新状态,有刷新效果。
用法:
//和MJRefreshBackGifFooter 一样 只有文字刷新状态,有刷新效果
-(void)refreshBackState{
__weak UpRefreshController * weakSelf = self;
self.tableView.mj_footer = [MJRefreshBackStateFooter footerWithRefreshingBlock:^{
[weakSelf loadDataMore];
[weakSelf.tableView reloadData];
[weakSelf endRefresh];
}];
}
运行效果:
5、MJRefreshBackNormalFooter
效果:有文字状态也有图片,有刷新效果
用法:
//有文字状态也有图片,有刷新效果
-(void)refreshBackNormal{
__weak UpRefreshController * weakSelf = self;
self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingBlock:^{
[weakSelf loadDataMore];
[weakSelf.tableView reloadData];
[weakSelf endRefresh];
}];
}
运行效果:
6、MJRefreshAutoFooter
效果:没有任何UI,但是有刷新效果,和MJRefreshBackFooter一样。
用法:
//没有任何UI,但是有刷新效果
-(void)refreshAuto{
__weak UpRefreshController * weakSelf = self;
self.tableView.mj_footer = [MJRefreshAutoFooter footerWithRefreshingBlock:^{
[weakSelf loadDataMore];
[weakSelf.tableView reloadData];
[weakSelf endRefresh];
}];
}
运行效果:
参见 2、MJRefreshBackFooter
7、MJRefreshAutoGifFooter
效果:有文字,有刷新效果。和MJRefreshBackGifFooter类似,但是和MJRefreshBackGifFooter的位置不一样。
用法:
//有文字,有效果,注意:这个文字是紧跟最后一个有数据的cell的位置,并不是隐藏起来的
-(void)refreshAutoGif{
__weak UpRefreshController * weakSelf = self;
self.tableView.mj_footer = [MJRefreshAutoGifFooter footerWithRefreshingBlock:^{
[weakSelf loadDataMore];
[weakSelf.tableView reloadData];
[weakSelf endRefresh];
}];
}
运行效果:
8、MJRefreshAutoStateFooter
效果:有文字,有效果,和MJRefreshAutoGifFooter一个效果。
用法:
//有文字,有效果,和MJRefreshAutoGifFooter一个效果
-(void)refreshAutoState{
__weak UpRefreshController * weakSelf = self;
self.tableView.mj_footer = [MJRefreshAutoStateFooter footerWithRefreshingBlock:^{
[weakSelf loadDataMore];
[weakSelf.tableView reloadData];
[weakSelf endRefresh];
}];
}
运行效果:
参见MJRefreshAutoGifFooter。
9、MJRefreshAutoNormalFooter
效果:有文字,刷新时候有小菊花图片,有刷新效果。
用法:
//有文字,刷新有图片,有刷新效果。
-(void)refreshAutoNormal{
__weak UpRefreshController * weakSelf = self;
self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
[weakSelf loadDataMore];
[weakSelf.tableView reloadData];
[weakSelf endRefresh];
}];
}
运行效果:
看到了吗?多了个小菊花。
10、带动图的刷新
直接看图吧:
用法:
-(void)refreshAnimationGif{
__weak UpRefreshController * weakSelf = self;
MJRefreshAutoGifFooter * footer = [MJRefreshAutoGifFooter footerWithRefreshingBlock:^{
[weakSelf loadDataMore];
[weakSelf.tableView reloadData];
[weakSelf endRefresh];
}];
//设置正在刷新状态的动画图片
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];
}
[footer setImages:refreshingImages forState:MJRefreshStateRefreshing];
self.tableView.mj_footer = footer;
}
总结:
1.MJRefreshAutoFooter系列和MJRefreshBackFooter系列的区别就是刷新控件的位置不同,一个是在底部,一个是紧挨着cell。
我们了解了MJRefresh的header和Footer的基本类以及用法。之后,我们会逐步的了解它的实现原理以及源码,看看到底是如何实现的这些效果。我们自己是否也能实现呢?