UIRefreshControl:点击按钮实现下拉刷新

新浪微博的app中有一个功能,就是点击一个tabBarItem时,表格会自动下拉刷新,不需要人手工操作。

以前写过新浪微博app的Demo,但当时一直没想明白以上功能是怎么做到的,现在找到方法了,很简单,就是在点击按钮后,设置Table View的contentOffset就可以了。


首先是UIRefreshControl的初始化代码:

[objc]  view plain copy
  1. - (void)viewDidLoad {  
  2.     [super viewDidLoad];  
  3.       
  4.     self.marray = [[NSMutableArray alloc] initWithObjects:@"1"@"2"@"3", nil nil];  
  5.       
  6.     // 初始化UITableViewController的UIRefreshControl组件  
  7.     self.refreshControl = [[UIRefreshControl alloc] init];  
  8.     self.refreshControl.tintColor = [UIColor blueColor];  
  9.     [self.refreshControl addTarget:self  
  10.                             action:@selector(controlEventValueChanged:)  
  11.                   forControlEvents:UIControlEventValueChanged];  
  12. }  
  13.   
  14. #pragma mark - Refresh control  
  15.   
  16. - (void)controlEventValueChanged:(id)sender {  
  17.     if (self.refreshControl.refreshing) {  
  18.         self.refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:@"刷新中"];  
  19.           
  20.         [self performSelector:@selector(refreshData) withObject:nil afterDelay:0.5];  
  21.     }  
  22. }  
  23.   
  24. - (void)refreshData {  
  25.     // 生成随机数,并加入marray数组中  
  26.     unsigned int randomNumber = arc4random() % 10;  
  27.     NSString *randomData = [NSString stringWithFormat:@"%i", randomNumber];  
  28.     [self.marray addObject:randomData];  
  29.       
  30.     // 刷新表格  
  31.     [self.tableView reloadData];  
  32.       
  33.     // 完成刷新  
  34.     [self.refreshControl endRefreshing];  
  35.     self.refreshControl.attributedTitle = [[NSAttributedString alloc]initWithString:@"下拉刷新"];  
  36. }  

这个时候需要人手工下拉表格才能实现“刷新”功能:

UIRefreshControl:点击按钮实现下拉刷新_第1张图片


现在在导航栏中加一个按钮,并编写其响应方法:

[objc]  view plain copy
  1. #pragma mark - Navigation item action  
  2.   
  3. - (IBAction)refreshTable:(id)sender {  
  4.     // 自行创建下拉动画  
  5.     [UIView beginAnimations:nil context:nil];  
  6.     [UIView setAnimationDuration:1.0];  
  7.     self.tableView.contentOffset = CGPointMake(0.0, -200.0); // 注意位移点的y值为负值  
  8.     [UIView commitAnimations];  
  9.       
  10.     // 改变refreshControl的状态  
  11.     [self.refreshControl beginRefreshing];  
  12.     self.refreshControl.attributedTitle = [[NSAttributedString alloc]initWithString:@"刷新中"];  
  13.       
  14.     // 刷新数据和表格视图  
  15.     [self performSelector:@selector(refreshData) withObject:nil afterDelay:2.0];  
  16. }  

为了好看,先加一段动画,让表格自行下拉,然后再定制UIRefreshControl组件的状态,最后刷新表格及其数据。


运行起来看看:

UIRefreshControl:点击按钮实现下拉刷新_第2张图片



后记:

有位同学提出:如果当前table view划到底层,或是划到中间时,刷新时会有点小问题,例如:

如果表格视图划到了中间位置,点击了刷新按钮的情况为:

UIRefreshControl:点击按钮实现下拉刷新_第3张图片UIRefreshControl:点击按钮实现下拉刷新_第4张图片

表格会停留在一个位置,而且UIRefreshControl控件没有隐藏。

解决方法:

先修改UIRefreshControl控件的状态,再刷新表格:

[objc]  view plain copy
  1. // 完成刷新  
  2. self.refreshControl.attributedTitle = [[NSAttributedString alloc]initWithString:@"下拉刷新"];  
  3. [self.refreshControl endRefreshing];  
  4.   
  5. // 刷新表格  
  6. [self.tableView reloadData];  



如果表格划到了底部,点击刷新按钮时,由于表格来不及划到顶部就改变UIRefreshControl控件,于是出现了下面的问题:

UIRefreshControl:点击按钮实现下拉刷新_第5张图片

UIRefreshControl:点击按钮实现下拉刷新_第6张图片

可以看到表格先被隐藏了。

解决方法:

我们先划到表格的顶部,再下拉表格,然后再改变控件的状态:

[objc]  view plain copy
  1. - (IBAction)refreshTable:(id)sender {  
  2.     // 先执行划到表格顶部的动画  
  3.     [UIView beginAnimations:nil context:nil];  
  4.     [UIView setAnimationDuration:0.25];  
  5.     self.tableView.contentOffset = CGPointZero;  
  6.     [UIView commitAnimations];  
  7.       
  8.     // 再执行下拉动画  
  9.     [UIView beginAnimations:nil context:nil];  
  10.     [UIView setAnimationDuration:0.25];  
  11.     self.tableView.contentOffset = CGPointMake(0.0, -146.0); // 注意位移点的y值为负值  
  12.     [UIView commitAnimations];  
  13.       
  14.     // 改变refreshControl的状态  
  15.     [self.refreshControl beginRefreshing];  
  16.     self.refreshControl.attributedTitle = [[NSAttributedString alloc]initWithString:@"刷新中"];  
  17.       
  18.     // 刷新数据和表格视图  
  19.     [self performSelector:@selector(refreshData) withObject:nil afterDelay:2.0];  
  20. }  

你可能感兴趣的:(UI)