俗话说“工欲善其事,必先利其器”一个好的成熟的第三方库,是开发路上的一把利器,可节约很多开发成本。
先简单的介绍下上下拉刷新的原理:大部分的上下拉刷新控件,都是用contentInset实现的。默认情况下,如果一个UIScrollView在导航栏的正下方,那么它的contentInset是64,而contentOffset是-64。继续下拉的话,contentOffset就会越来越小,如果上滑,contentOffset就会增大,直到左上角达到屏幕的左上角时,contentOffset刚好为0。默认情况下,如果下拉一个UIScrollView,在松手之后,会弹回初始的位置(导航栏下方)。而大部分的下拉刷新控件,都是将自己放在UIScrollView的上方,起始y设置成负数,所以平时不会显示出来,只有下拉的时候才会出现,放开又会弹回去。然后在loading的时候,临时把contentInset增大,相当于把UIScrollView往下挤,于是下拉刷新的控件就会显示出来,然后刷新完成后,再把contentIset改回原来的值,实现回弹的效果。基本上,MJRefresh也是这么实现的。
上下拉刷新的方法有系统自带的UIRefreshControl,第三方库MJRefresh,JHRefresh这里就简单的介绍下MJRefresh的使用
1. 导入MJRefresh
pod 'MJRefresh'
2.导入头文件
#import "MJRefresh.h"
3.下拉刷新
默认状态效果
self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
gif动画效果
// 当下拉刷新时会调用loadNewData,在这个方法里用来刷新数据
MJRefreshGifHeader *header = [MJRefreshGifHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
UIImage * image1 = [UIImage imageNamed:@"loading01.png"];
UIImage * image2 = [UIImage imageNamed:@"loading02.png"];
UIImage * image3 = [UIImage imageNamed:@"loading03.png"];
UIImage * image4 = [UIImage imageNamed:@"loading04.png"];
// 设置普通状态的动画图片
NSArray *idleImages = @[image1, image2, image3, image4];
[header setImages:idleImages forState:MJRefreshStateIdle];
// 设置即将刷新状态的动画图片(一松开就会刷新的状态)
NSArray *pullingImages = @[image1, image2, image3, image4];
[header setImages:pullingImages forState:MJRefreshStatePulling];
// 设置正在刷新状态的动画图片
NSArray *refreshingImages = @[image1, image2, image3, image4];
[header setImages:refreshingImages forState:MJRefreshStateRefreshing];
// 设置文字
[header setTitle:@"Pull down to refresh" forState:MJRefreshStateIdle];
[header setTitle:@"Release to refresh" forState:MJRefreshStatePulling];
[header setTitle:@"Loading ..." forState:MJRefreshStateRefreshing];
// 设置字体
header.stateLabel.font = [UIFont systemFontOfSize:15];
header.lastUpdatedTimeLabel.font = [UIFont systemFontOfSize:14];
// 设置颜色
header.stateLabel.textColor = [UIColor redColor];
header.lastUpdatedTimeLabel.textColor = [UIColor blueColor];
// 隐藏时间
header.lastUpdatedTimeLabel.hidden = YES;
// 设置 header
self.tableView.mj_header = header;
loadNewData方法
-(void)loadNewData{
// 这里可以获取数据,获取数据成功后tableView重新加载数据
[self.tableView reloadData];
// 结束刷新
[self.tableView.mj_header endRefreshing];
}
4.上拉刷新
默认状态效果
self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreTopic)];
gif动画效果
MJRefreshAutoGifFooter *footer = [MJRefreshAutoGifFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreTopic)];
// 设置普通状态的动画图片
NSArray *idleImages1 = @[image1, image2, image3, image4];
[footer setImages:idleImages1 forState:MJRefreshStateIdle];
// 设置即将刷新状态的动画图片(一松开就会刷新的状态)
NSArray *pullingImages1 = @[image1, image2, image3, image4];
[footer setImages:pullingImages1 forState:MJRefreshStatePulling];
// 设置正在刷新状态的动画图片
NSArray *refreshingImages1 = @[image1, image2, image3, image4];
[footer setImages:refreshingImages1 forState:MJRefreshStateRefreshing];
// 设置文字
[footer setTitle:@"Click or drag up to refresh" forState:MJRefreshStateIdle];
[footer setTitle:@"Loading more ..." forState:MJRefreshStateRefreshing];
[footer setTitle:@"No more data" forState:MJRefreshStateNoMoreData];
// 设置字体
footer.stateLabel.font = [UIFont systemFontOfSize:17];
// 设置颜色
footer.stateLabel.textColor = [UIColor blueColor];
// 隐藏刷新状态的文字
// footer.refreshingTitleHidden = YES;
// 如果没有上面的方法,就用footer.stateLabel.hidden = YES;
// 设置尾部
self.tableView.mj_footer = footer;
loadMoreTopic方法
-(void)loadMoreTopic{
// 这里获取数据,获取成功后tableView再重新加载数据
[self.tableView reloadData];
// 结束刷新
[self.tableView.mj_footer endRefreshing];
}
网友评论