iOS开发那些事-表视图UI设计模式

2025-01-17 技术教程

软件设计中有设计模式，在UI设计方面也有设计模式。由于表视图的应用在iOS中极其广泛，本节向大家介绍表视图中两个UI设计模式：分页模式和下拉刷新（Pull-to-Refresh）模式。这两种模式已经成为移动平台开发的标准。

分页模式

分页模式规范了移动平台进行大量数据请求的处理方式。

下拉刷新模式

下拉刷新（Pull-to-Refresh）是重新刷新表视图或列表，重新加载数据，这种模式广泛用于移动平台。下拉刷新与分页相反，当翻动屏幕到顶部时候，再往下拉屏幕程序就开始重新请求数据，表视图表头部分会出现等待指示器，请求结束表视图表头消失。下拉刷新模式带有箭头动画效果。

在很多开源社区中都有下拉刷新的实现代码，Github上的git://github.com/leah/PullToRefresh.git有一个下拉刷新的例子，可以供大家参考。

iOS6下拉刷新控件

随着下拉刷新模式影响力的越来越大，苹果不得不考虑把它列入自己的规范之中，并在iOS 6 API中推出了下拉刷新控件。iOS 6中的下拉刷新，有点像是在拉一个“胶皮糖”，当这个“胶皮糖”拉断的时候之后会出现等待指示器。

iOS 6 之后UITableViewController添加了一个refreshControl属性，这个属性保持了一个UIRefreshControl的对象指针。UIRefreshControl就是iOS 6为表视图实现下拉刷新而提供的。UIRefreshControl类目前只能应用于表视图画面，其它视图不能使用。该属性与 UITableViewController配合使用，关于下拉刷新布局等问题可以不必考虑，UITableViewController会将其自动放置于表视图中。

我们通过一个例子来了解一下UIRefreshControl控件的使用。参考创建简单表视图的案例，创建工程“RefreshControlSample”，然后修改代码ViewController.h。

#import<UIKit/UIKit.h>@interfaceViewController:UITableViewController@property(nonatomic,strong)NSMutableArray*Logs;@end

Logs属性存放了NDate日期列表，用于在表视图中显示需要的数据，ViewController.m中的初始化代码如下：

-(void)viewDidLoad{[superviewDidLoad];//初始化变量和时间self.Logs=[[NSMutableArrayalloc]init];NSDate*date=[[NSDatealloc]init];[self.LogsaddObject:date];//初始化UIRefreshControlUIRefreshControl*rc=[[UIRefreshControlalloc]init];rc.attributedTitle=[[NSAttributedStringalloc]initWithString:@”下拉刷新”];[rcaddTarget:selfaction:@selector(refreshTableView)forControlEvents:UIControlEventValueChanged];self.refreshControl=rc;}

viewDidLoad方法中初始化了一条当前时间的模拟数据。UIRefreshControl的构造方式是init。 attributedTitle属性用于下拉控件显示标题文本。UIRefreshControl的addTarget: forControlEvents:方法能够通过编程方式为UIControlEventValueChanged事件添加处理方法。 refreshTableView是UIControlEventValueChanged事件的处理方法，refreshTableView方法的代码如下：

-(void)refreshTableView{if(self.refreshControl.refreshing){self.refreshControl.attributedTitle=[[NSAttributedStringalloc]initWithString:@”加载中…”];//添加新的模拟数据NSDate*date=[[NSDatealloc]init];//模拟请求完成之后，回调方法callBackMethod[selfperformSelector:@selector(callBackMethod:)withObject:dateafterDelay:3];}}

UIRefreshControl的refreshing属性可以判断控件是否还处于刷新中的状态，刷新中状态的图标是我们常见的等待指示器，在这个阶段要将显示标题文本设置为“加载中…”。接下来应该是进行网络请求或者数据库查询的操作。这些操作完成后应用会回调callBackMethod方法，本案例涉及云端的技术，我们使用[self performSelector:@selector(callBackMethod:) withObject:date afterDelay:3]语句延时调用callBackMethod方法来模拟实现。

回调方法callBackMethod:的代码如下。

-(void)callBackMethod:(id)obj{[self.refreshControlendRefreshing];self.refreshControl.attributedTitle=[[NSAttributedStringalloc]initWithString:@”下拉刷新”];[self.LogsaddObject:(NSDate*)obj];[self.tableViewreloadData];}

在请求完成的时候endRefreshing方法可以停止下拉刷新控件，回到初始状态，显示的标题文本为“下拉刷新”。[self.tableView reloadData]语句是重新加载表视图。

实现UITableViewDataSource的两个方法代码如下：

-(NSInteger)numberOfSectionsInTableView:(UITableView*)tableView{return1;}-(NSInteger)tableView:(UITableView*)tableViewnumberOfRowsInSection:(NSInteger)section{return[self.Logscount];}-(UITableViewCell*)tableView:(UITableView*)tableViewcellForRowAtIndexPath:(NSIndexPath*)indexPath{staticNSString*CellIdentifier=@”Cell”;UITableViewCell*cell=[tableViewdequeueReusableCellWithIdentifier:CellIdentifier];if(cell==nil){cell=[[UITableViewCellalloc]initWithStyle:UITableViewCellStyleValue1reuseIdentifier:CellIdentifier];}NSDateFormatter*dateFormat=[[NSDateFormatteralloc]init];[dateFormatsetDateFormat:@"yyyy-MM-ddHH:mm:sszzz"];cell.textLabel.text=[dateFormatstringFromDate:[self.LogsobjectAtIndex:[indexPathrow]]];cell.accessoryType=UITableViewCellAccessoryDisclosureIndicator;returncell;}