UIRefreshControl 的使用还是比较简单的,看一下 UIRefreshControl 的定义,基本就知道怎么用了。
UIRefreshControl 是专门为 UITableViewController 设计的,官方不建议在非 UITableViewController 中使用。
本文主要解决两个问题:一是在非 UITableViewController 中使用,二是修改菊花显示位置。
1、UITableViewController + UIRefreshControl
- (void)viewDidLoad {
[super viewDidLoad];
UIRefreshControl *refreshControl = [[UIRefreshControl alloc] init];
[refreshControl addTarget:self action:@selector(refresh:) forControlEvents:UIControlEventValueChanged];
self.refreshControl = refreshControl;
}
- (void)refresh:(UIRefreshControl *)refreshControl
{
NSLog(@"start refresh");
[self performSelector:@selector(endRefresh:) withObject:refreshControl afterDelay:2.0f];
}
- (void)endRefresh:(UIRefreshControl *)refreshControl
{
[refreshControl endRefreshing];
NSLog(@"end refresh");
}
2、UIViewController + UITableView(UIScrollView) + UIRefreshControl
@interface TableViewDemo () <UITableViewDataSource, UITableViewDelegate>
@property (nonatomic, weak) IBOutlet UITableView *tableView;
@end
- (void)viewDidLoad {
[super viewDidLoad];
UIRefreshControl *refreshControl = [[UIRefreshControl alloc] init];
[refreshControl addTarget:self action:@selector(refresh:) forControlEvents:UIControlEventValueChanged];
[self.tableView addSubview:refreshControl];
}
- (void)refresh:(UIRefreshControl *)refreshControl
{
NSLog(@"start refresh");
[self performSelector:@selector(endRefresh:) withObject:refreshControl afterDelay:2.0f];
}
- (void)endRefresh:(UIRefreshControl *)refreshControl
{
[refreshControl endRefreshing];
NSLog(@"end refresh");
}
直接集成上去,这时候你会发现下拉的时候,页面会跳动一下(将UITableView 换成 UIScrollView 也会有同样的问题)。
既然 UIRefreshControl 是由 UITableViewController 控制的,那就让 UITableViewController 来控制,修改代码如下:
- (void)viewDidLoad {
[super viewDidLoad];
UITableViewController *tableVC = [[UITableViewController alloc] init];
tableVC.tableView = self.tableView;
UIRefreshControl *refreshControl = [[UIRefreshControl alloc] init];
[refreshControl addTarget:self action:@selector(refresh:) forControlEvents:UIControlEventValueChanged];
tableVC.refreshControl = refreshControl;
}
修改之后,重新运行,这时内容跳动的问题没有了。
参考:http://stackoverflow.com/questions/12497940/uirefreshcontrol-without-uitableviewcontroller/
对于 UIScrollView,目前没有找到更好的解决方案,如果确实要使用的话,那就用只有一个Cell的UITableView来代替 UIScrollView。参考:http://segmentfault.com/q/1010000001823169
3、修改 UIRefreshControl 显示的位置
菊花默认位置是在中间,总有那么一些奇葩需求,需要将菊花显示在其他位置。目前发现了两种方式修改显示位置,但是总体来说本质原理应该是一样的。
方案一:修改 UIRefreshControl 的 bounds,从而修改其显示位置,代码如下:
- (void)viewDidLoad {
[super viewDidLoad];
UIRefreshControl *refreshControl = [[UIRefreshControl alloc] init];
[refreshControl addTarget:self action:@selector(refresh:) forControlEvents:UIControlEventValueChanged];
self.refreshControl = refreshControl;
CGRect bounds = refreshControl.bounds;
bounds.origin.x = 50;//左移 50
// rect.origin.x = -50;//右移 50
bounds.origin.y = 10;//上移 10;
// rect.origin.y = -10;//下移 10;
refreshControl.bounds = bounds;
}
方案二:用一个 UIView(refreshControlContainerView) 来显示 UIRefreshControl,通过修改 refreshControlContainerView.frame 来修改菊花的显示位置,代码如下:
- (void)viewDidLoad {
[super viewDidLoad];
UIRefreshControl *refreshControl = [[UIRefreshControl alloc] init];
[refreshControl addTarget:self action:@selector(refresh:) forControlEvents:UIControlEventValueChanged];
self.refreshControl = refreshControl;
UIView *refreshControlContainerView = [[UIView alloc] initWithFrame:CGRectMake(-50, -10, [UIScreen mainScreen].bounds.size.width, 44.0f)];
[self.tableView addSubview:refreshControlContainerView];
[refreshControlContainerView addSubview:self.refreshControl];
}
4、一个个人主页的实例
实例代码,请看 UserHomeViewController。
5、总结
UIRefreshControl 只适用于一些简单、与特殊的页面,只能实现“下拉刷新”,不能实现“上拉加载更多”。
这里对于“下拉刷新”与“上拉加载更多”推荐使用 MJRefresh ,用法简单。
项目源代码:https://git.oschina.net/cavintang/refresh-control-demo.git