一、简介
MJRefresh是一款强大可定制的刷新控件，支持UIScrollView、UITableView、UICollectionView、UIWebView这四类滚动视图控件
二、框架图
注意：无论是上拉加载还是下拉刷新，不需要完全自定义的话，用分支最后面的类
三、使用
1、通用方法
/*
__unsafe_unretained __typeof(self) weakSelf = self;
// 下拉刷新
self.tableView.mj_header= [MJRefreshNormalHeader headerWithRefreshingBlock:^{
// 模拟延迟加载数据，因此2秒后才调用（真实开发中，可以移除这段gcd代码）
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
// 结束刷新
[weakSelf.tableView.mj_header endRefreshing];
});
}];
// 马上进入刷新状态
[self.tableView.mj_header beginRefreshing];
// 设置自动切换透明度(在导航栏下面自动隐藏)
self.tableView.mj_header.automaticallyChangeAlpha = YES;
// 上拉刷新
self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingBlock:^{
// 模拟延迟加载数据，因此2秒后才调用（真实开发中，可以移除这段gcd代码）
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
// 结束刷新
[ self.tableView.mj_footer endRefreshing];
});
}];
*/
2、下拉刷新
/***********************************GIF******************************************/
/*
1. 继承与MJRefreshGifHeader
2. 重写- (void)prepare 方法 设置动画图片
*/
/*
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadNewData方法）
self.tableView.mj_header = [MSHChiBaoZiHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
// 马上进入刷新状态
[self.tableView.mj_header beginRefreshing];
*/
/***********************************隐藏时间******************************************/
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadNewData方法）
/*
MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
// 设置自动切换透明度(在导航栏下面自动隐藏)
header.automaticallyChangeAlpha = YES;
// 隐藏时间
header.lastUpdatedTimeLabel.hidden = YES;
// 马上进入刷新状态
[header beginRefreshing];
// 设置header
self.tableView.mj_header = header;
*/
/***********************************隐藏时间******************************************/
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadNewData方法）
/*
MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
// 隐藏时间
header.lastUpdatedTimeLabel.hidden = YES;
// 隐藏状态
header.stateLabel.hidden = YES;
// 马上进入刷新状态
[header beginRefreshing];
// 设置header
self.tableView.mj_header = header;
*/
/***********************************自定义文字******************************************/
/*
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadNewData方法）
MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
// 设置文字
[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 yellowColor];
// 时间字体的颜色
header.lastUpdatedTimeLabel.textColor = [UIColor blueColor];
// 马上进入刷新状态
[header beginRefreshing];
// 设置刷新控件
self.tableView.mj_header = header;
*/
/**********************************自定义刷新控件******************************************/
/* : MSHDIYHeader
1. 继承与MJRefreshHeader
2. 重写- (void)prepare 方法 设置内部控件 设置尺寸
*/
/*
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadNewData方法）
self.tableView.mj_header = [MSHDIYHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
self.tableView.mj_header.backgroundColor = [UIColor greenColor];
[self.tableView.mj_header beginRefreshing];
*/
3、上拉刷新
/**********************************下拉刷新 默认******************************************/
/*
__unsafe_unretained __typeof(self) weakSelf = self;
// 设置回调（一旦进入刷新状态就会调用这个refreshingBlock）
self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
[weakSelf loadOnceData];
}];
*/
/**********************************上拉刷新 动画图片******************************************/
// 继承与 MJRefreshAutoGifFooter
// 重写 - (void)prepare
/*
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadMoreData方法）
self.tableView.mj_footer = [MSHChiBaoZiFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
*/
/**********************************上拉刷新 隐藏刷新状态的文字******************************************/
/*
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadMoreData方法）
MSHChiBaoZiFooter *footer = [MSHChiBaoZiFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
// 当上拉刷新控件出现50%时（出现一半），就会自动刷新。这个值默认是1.0（也就是上拉刷新100%出现时，才会自动刷新）
// footer.triggerAutomaticallyRefreshPercent = 0.5;
// 隐藏刷新状态的文字
footer.refreshingTitleHidden = YES;
// 设置footer
self.tableView.mj_footer = footer;
*/
/**********************************上拉刷新 自定义文字******************************************/
/*
// 添加默认的上拉刷新
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadMoreData方法）
MJRefreshAutoNormalFooter *footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
// 设置文字
[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
self.tableView.mj_footer = footer;
*/
/**********************************上拉刷新 加载后隐藏******************************************/
/*
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadOnceData方法）
self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadOnceData)];
*/
/**********************************自动回弹的上拉01******************************************/
/*
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadMoreData方法）
self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
// 设置了底部inset
self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 30, 0);
// 忽略掉底部inset
self.tableView.mj_footer.ignoredScrollViewContentInsetBottom = 30;
/*
/**********************************自动回弹的上拉02******************************************/
/*
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadLastData方法）
self.tableView.mj_footer = [MSHChiBaoZiFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadLastData)];
self.tableView.mj_footer.automaticallyChangeAlpha = YES;
*/
/**********************************自定义刷新控件(自动刷新)******************************************/
/*
// 继承 MJRefreshAutoFooter
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadMoreData方法）
self.tableView.mj_footer = [DiYFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
*/
/**********************************自定义刷新控件(自动回弹)******************************************/
// 继承 MJRefreshBackFooter
// 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadMoreData方法）
self.tableView.mj_footer = [MSHDIYBackFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
4、数据加载方法
#pragma mark 上拉加载更多数据
- (void)loadMoreData
{
// 2.模拟2秒后刷新表格UI（真实开发中，可以移除这段gcd代码）
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(MJDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
// 刷新表格
[self.tableView reloadData];
// 拿到当前的上拉刷新控件，结束刷新状态
[self.tableView.mj_footer endRefreshing];
});
}
#pragma mark 加载最后一份数据
- (void)loadLastData
{
// 2.模拟2秒后刷新表格UI（真实开发中，可以移除这段gcd代码）
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(MJDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
// 刷新表格
[self.tableView reloadData];
// 拿到当前的上拉刷新控件，变为没有更多数据的状态
[self.tableView.mj_footer endRefreshingWithNoMoreData];
});
}
#pragma mark 只加载一次数据
- (void)loadOnceData
{
// 2.模拟2秒后刷新表格UI（真实开发中，可以移除这段gcd代码）
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(MJDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
// 刷新表格
[self.tableView reloadData];
// 隐藏当前的上拉刷新控件
self.tableView.mj_footer.hidden = YES;
});
}
6、自定义下拉刷新控件 MSHDIYHeader
MSHDIYHeader.h
#import "MJRefreshHeader.h"
@interface MSHDIYHeader : MJRefreshHeader
@end
MSHDIYHeader.m
#import "MSHDIYHeader.h"
@interface MSHDIYHeader()
@property (weak, nonatomic) UILabel *label;
@property (weak, nonatomic) UISwitch *s;
@property (weak, nonatomic) UIImageView *logo;
@property (weak, nonatomic) UIActivityIndicatorView *loading;
@end
@implementation MSHDIYHeader
- (void)prepare
{
[super prepare];
// 设置控件的高度
self.mj_h = 50;
// 添加label
UILabel *label = [[UILabel alloc] init];
label.textColor = [UIColor colorWithRed:1.0 green:0.5 blue:0.0 alpha:1.0];
label.font = [UIFont boldSystemFontOfSize:16];
label.textAlignment = NSTextAlignmentCenter;
[self addSubview:label];
self.label = label;
// 打酱油的开关
UISwitch *s = [[UISwitch alloc] init];
[self addSubview:s];
self.s = s;
// logo
UIImageView *logo = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"logo.jpg"]];
logo.contentMode = UIViewContentModeScaleAspectFit;
[self addSubview:logo];
self.logo = logo;
// loading
UIActivityIndicatorView *loading = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
[self addSubview:loading];
self.loading = loading;
}
#pragma mark 在这里设置子控件的位置和尺寸
- (void)placeSubviews
{
[super placeSubviews];
self.label.frame = self.bounds;
self.logo.bounds = CGRectMake(0, 0, 50, 50);
self.logo.center = CGPointMake(self.mj_w * 0.5, - self.logo.mj_h + 20);
self.loading.center = CGPointMake(self.mj_w - 30, self.mj_h * 0.5);
}
#pragma mark 监听控件的刷新状态
- (void)setState:(MJRefreshState)state
{
MJRefreshCheckState;
switch (state) {
case MJRefreshStateIdle:
[self.loading stopAnimating];
[self.s setOn:NO animated:YES];
self.label.text = @"赶紧下拉吖(开关是打酱油滴)";
break;
case MJRefreshStatePulling:
[self.loading stopAnimating];
[self.s setOn:YES animated:YES];
self.label.text = @"赶紧放开我吧(开关是打酱油滴)";
break;
case MJRefreshStateRefreshing:
[self.s setOn:YES animated:YES];
self.label.text = @"加载数据中(开关是打酱油滴)";
[self.loading startAnimating];
break;
default:
break;
}
}
#pragma mark 监听拖拽比例（控件被拖出来的比例）
- (void)setPullingPercent:(CGFloat)pullingPercent
{
[super setPullingPercent:pullingPercent];
// 1.0 0.5 0.0
// 0.5 0.0 0.5
CGFloat red = 1.0 - pullingPercent * 0.5;
CGFloat green = 0.5 - 0.5 * pullingPercent;
CGFloat blue = 0.5 * pullingPercent;
self.label.textColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
}
#pragma mark 监听scrollView的contentOffset改变
- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change
{
[super scrollViewContentOffsetDidChange:change];
}
#pragma mark 监听scrollView的contentSize改变
- (void)scrollViewContentSizeDidChange:(NSDictionary *)change
{
[super scrollViewContentSizeDidChange:change];
}
#pragma mark 监听scrollView的拖拽状态改变
- (void)scrollViewPanStateDidChange:(NSDictionary *)change
{
[super scrollViewPanStateDidChange:change];
}
@end
7、自定义下拉刷新动画 MSHChiBaoZiHeader
MJRefreshGifHeader.h
#import "MJRefreshGifHeader.h"
@interface MSHChiBaoZiHeader : MJRefreshGifHeader
@end
MJRefreshGifHeader.m
#import "MSHChiBaoZiHeader.h"
@implementation MSHChiBaoZiHeader
#pragma mark - 重写方法
#pragma mark 基本设置
- (void)prepare
{
[super prepare];
// 设置普通状态的动画图片
NSMutableArray *idleImages = [NSMutableArray array];
for (NSUInteger i = 1; i<=60; i++) {
UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_anim__000%zd", i]];
[idleImages addObject:image];
}
[self setImages:idleImages forState:MJRefreshStateIdle];
// 设置即将刷新状态的动画图片（一松开就会刷新的状态）
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];
}
[self setImages:refreshingImages forState:MJRefreshStatePulling];
// 设置正在刷新状态的动画图片
[self setImages:refreshingImages forState:MJRefreshStateRefreshing];
}
@end
详见Github上的Demo