UITableView customize Pull down to refresh

下拉刷新实现

作者: xuguoxing 分类: IOSThirdPartUIKit 发布时间: 2012-05-03 08:19 ė 6没有评论

在很多app中都有下拉刷新的效果,那么这种效果是怎么实现的呢?

一.在UITableView视图的顶部中增加一子视图UIPullToReloadHeaderView

UIPullToReloadHeaderView中包含一显示当前状态的Label(statusLabel),一显示上次更新时间的Label(lastUpdatedLabel),一ImageView显示下拉或释放方向箭头(arrowImage),一个ActivityIndicator(activityView)在正在刷新时显示。
UIPullToReloadHeaderView有三种状态

    1. kPullStatusPullDownToReload 默认和用户刚开始下拉时为此状态,其中statusLabel显示“下拉刷新”,arrowImage图片的箭头向下,提示用于需要继续向下拉。
    2. kPullStatusReleaseToReload 当用户下拉tableView到一定距离后,更新至此状态,其中statusLabel显示“释放刷新”,arrowImage图片的箭向上,提示用户,释放后即可开始刷新。

kPullStatusLoading 当用户下拉释放后更新至此状态,其中statusLabel显示“正在刷新”,arrowImage图片隐藏,代替的是activityView开始转动。

lastUpdatedLabel中一直显示上次更新的时间,若第一次更新,则不显示。

二.重写UITableViewUIScrollDelegate

UITableView实际上是一个UIScrollView, 所以可以重写UIScrollViewDelegate的scrollViewWillBeginDragging:scrollViewDidScroll: 和 scrollViewDidEndDragging:三个方法来跟踪UITableView的下拉位置,根据下拉位置更新UIPullToReloadHeaderView的状态。

  1. scrollViewWillBeginDragging: 开始下拉时设置刷新标记。
  2. scrollViewDidScroll:下拉过程中检测下拉距离,下拉距离小于65像素时设置状态为kPullStatusPullDownToReload,大于65像素时为kPullStatusReleaseToReload。
  3. scrollViewDidEndDragging:willDecelerate:下拉释放时设置状态为kPullStatusLoading,设置UITableView的下拉距离为60像素,并执行实质的更新操作pullDownToReloadAction。

三.位置关系

UIPullToReloadHeaderView需要在UITableView的顶部,且在UITableView的“原点(contentOffset )”以上,正常情况下UIPullToReloadHeaderView不在屏幕上显示,当用户下拉时,UITableView的“原点”下移,则UIPullToReloadHeaderView就可以显示出来了。
当正在加载时,仍然设置UITableView的“原点”在0以下,以使加载过程中UIPullToReloadHeaderView可见,当加载完成时,UITableView的contentOffset恢复到0的位置,以使UIPullToReloadHeaderView完全不可见。

四.自动刷新

在应用程序初次启动时,需要自动刷新,在UIPullToReloadTableViewController中实现一方法来模拟用户下拉刷新的过程

-(void) autoPullDownToRefresh{
	[self scrollViewWillBeginDragging:self.tableView];
	[self.tableView setContentOffset:CGPointMake(0,-kPullDownToReloadToggleHeight-20) animated:NO];
	[self scrollViewDidScroll:self.tableView];
	[self scrollViewDidEndDragging:self.tableView willDecelerate:YES];
}

五.相关代码

UIPullToReloadHeaderView.h
UIPullToReloadHeaderView.m
UIPullToReloadTableViewController.h
UIPullToReloadTableViewController.m

 

六.使用方法

继承UIPullToReloadTableViewController类,在子类中重写pullDownToReloadAction方法,在此方法中进行实际的加载操作。


-(void) pullDownToReloadAction {
     //实际加载操作
}

在加载完成后需调用以下方法来更新最近更新时间,恢复UIPullToReloadHeaderView的状态,并将UITableView更新到原始位置。

-(void) pullDownToReloadActionFinished {
    [self.pullToReloadHeaderViewsetLastUpdatedDate: [NSDatedate]];
    [self.pullToReloadHeaderViewfinishReloading:self.tableViewanimated:YES];
}

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s