在 Table View 中显示一个刷新控件


1.问题

你希望在 table view 的顶部显示一个漂亮的刷新控件，让用户可以直观的进行下拉 table

view 以进行内容的更新。刷新控件的两个不同状态如下图 所示：



刷新控件的两个不同状态

2。方案

创建一个 table view 控制器（4.13小节介绍过），然后将其 refreshControl属性设置为一

个新的 UIRefreshControl实例，如下代码：

-   (id)initWithStyle:(UITableViewStyle)style{ 
self = [super initWithStyle:style]; 
if  (self) { 
/* Create the refresh control */ 
self.refreshControl = [[UIRefreshControl alloc] init]; 
self.refreshControl = self.refreshControl; 
[self.refreshControl addTarget:self 
action:@selector (handleRefresh:) 
forControlEvents:UIControlEventValueChanged]; 
} 
return self; 
}

3. 讨论



刷新控件是 iOS 6 SDK 中新增的一个 UI 组建。它在 table view 的顶部简单的显示一个

指示器，告诉用户，有些内容正在更新中。例如，在 iOS 6 之前的版本中，为了刷新 Mail

程序中的收件箱，你必须按一下刷新按钮。而在 iOS 6 中，现在你可以简单的向下拖动 mail

列表以进行刷新了查看新内容了。当 iOS 检测到这样的手势，会触发一个刷新事件。很酷

吧？iPhone 中的 Twitter 程序早已经添加这样的一个刷新控件了，并获得了用户的高度赞

扬！苹果也认识到以这样的方式来更新 table view 非常的棒，因此也决定在新的 SDK 中添

加这样的一个 UI组建。组建的类名叫做 UIRefreshControl。

通过调用这个类的 init 方法即可创建一个实例了。创建好之后，将这个实例添加到 table

viewl 控制器（如本节方案中所述）。

现在，你希望知道用户什么时候在 table view 中触发了一个刷新事件。为了达到这个目

的，可以调用刷新控件的 addTarget:action:forControlEvents:实例方法，并传入一个 target 对

象和一个 selector，然后将 UIControlEventValueChanged 当做 forControlEvents 参数传入。
这里——我想要向你演示这个功能。在这里的示例中，我有一个 table view 控制器，用

来显示日期和时间的格式化字符串。当用户下拉以刷新列表时，我将会把当前的日期和时间

添加到 table view 中。这样，每次用户进行下拉时，都会触发刷新事件，我们也就可以将当

前的日期和时间添加到列表中，以让 table view 显示新的日期和时间。下面我们就在我们的

table view 控制器实现文件中开始，并定义刷新控件和数据源：

#import "ViewController.h" 
@interface ViewController  () 
@property  (nonatomic, strong) NSMutableArray *times; 
@property  (nonatomic, strong) UIRefreshControl *refreshControl; 
@end 
@implementation ViewController  
...

times 属性是一个简单的可变数组，它将包含所有的 NSDate 实例，以显示在 table view

中。在本节方案中的代码里面，我们可以看到table view controller 的初始化。所以这里我就

不再重复写了。不方案中的代码，我们已经设置了一个 handleRefresh:方法来响应刷新控件

的 UIControlEventValueChanged 事件。在这个方法中，我们所做的事情就是将当前日期而后

事件添加到我们的数组中，然后刷新一下table view：

-   (void) handleRefresh:(id)paramSender{ 
/* Put a bit of delay between when the refresh control is released 
and when we actually do the refreshing to make the UI look a bit 
smoother than just doing the update without the animation */ 
int64_t delayInSeconds = 1.0f; 
dispatch_time_t popTime = 
dispatch_time(DISPATCH_TIME_NOW, delayInSeconds * NSEC_PER_SEC); 
dispatch_after(popTime, dispatch_get_main_queue(), ^(void){ 
/* Add the current date to the list of dates that we have 
so that when the table view is refreshed, a new item will appear 
on the screen so that the user will see the difference between 
the before and the after of the refresh */ 
[self.times addObject:[NSDate date]]; 
[self.refreshControl endRefreshing]; 
[self.tableView reloadData]; 
}); 
}

最后，最后，我将通过 table view 的 delegate 和数据源为其ᨀ供数据：

-   (id)initWithStyle:(UITableViewStyle)style{ 
self = [super initWithStyle:style]; 
if  (self) { 
self.times = [NSMutableArray arrayWithObject:[NSDate date]]; 
/* Create the refresh control */ 
self.refreshControl = [[UIRefreshControl alloc] init]; 
self.refreshControl = self.refreshControl; 
[self.refreshControl addTarget:self 
action:@selector (handleRefresh:) 
forControlEvents:UIControlEventValueChanged]; 
} 
return self; 
} 
-   (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ 
return 1; 
} 
-   (NSInteger)tableView:(UITableView *)tableView 
numberOfRowsInSection:(NSInteger)section{ 

return self.times.count; 
} 
-   (UITableViewCell *)tableView:(UITableView *)tableView 
cellForRowAtIndexPath:(NSIndexPath *)indexPath{ 
static NSString *CellIdentifier = @"Cell"; 
UITableViewCell *cell = 
[tableView dequeueReusableCellWithIdentifier:CellIdentifier]; 
if  (cell == nil) { 
cell = [[UITableViewCell alloc] 
initWithStyle:UITableViewCellStyleDefault 
reuseIdentifier:CellIdentifier]; 
} 
cell.textLabel.text = [NSString stringWithFormat:@"%@", 
self.times[indexPath.row]]; 
return cell; 
}

在模拟器或者设备中运行这个程序。当程序运行时，首先你将看到在列表中只有一个跳

日期/时间数据。通过下拉 table view 来获得更多的数据（如下图）。



-------摘自《iOS 6 Programming Cookbook》