iOS开发：UITableView的高级使用与定制

# iOS开发：UITableView的高级使用与定制 ## 1. 初始运行与单元格复用 当你运行应用程序时，会发现表格视图有五个单元格，每个单元格对应国家数组中的一个条目。每个单元格都有一个通用标题（Cell 0、Cell 1等）和一个披露附件指示符。目前点击单元格没有任何反应，因为还未为附件视图实现任何功能。接下来会处理这个问题，并对单元格的外观和内容进行定制，在此之前，先了解一下单元格复用。 ### 1.1 缓存单元格说明 iOS中的表格视图会尝试通过复用当前用户不可见的单元格来节省内存和时间。它会将滚动出视线的单元格重新用于显示新可见的单元格。但要使复用方案生效，需要完成以下两个步骤： 1. 定义表格视图支持的不同类型的单元格（即具有相同外观和组件的单元格），每种单元格类型通过自定义的复用标识符来识别。 2. 在分配新单元格之前，调用`dequeueReusableCellWithIdentifier:`方法，查看是否有可用的空闲单元格可供复用。 以下是示例代码： ```objc - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier]; cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; cell.textLabel.font = [UIFont systemFontOfSize:19.0]; cell.detailTextLabel.font = [UIFont systemFontOfSize:12]; } Country *item = [self.countries objectAtIndex:indexPath.row]; cell.textLabel.text = item.name; cell.detailTextLabel.text = item.capital; cell.imageView.image = item.flag; return cell; } ``` ### 1.2 单元格配置流程 ```mermaid graph TD A[开始] --> B[尝试复用单元格] B --> C{是否有可用单元格} C -- 是 --> D[使用复用单元格] C -- 否 --> E[创建新单元格并设置通用样式] D --> F[更新单元格文本和图片] E --> F F --> G[返回单元格] G --> H[结束] ``` ## 2. 单元格配置 现在应用已经在运行并显示了一些信息，可以开始进行具体的实现。为了使单元格能够正确适配数据，需要完成以下几个步骤： ### 2.1 更改行的显示样式 将`tableView:cellForRowAtIndexPath:`方法中的分配/初始化行更改为以下内容： ```objc cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier]; ``` UITableViewCell有四种不同的样式，每种样式的显示略有不同： | 样式名称 | 显示说明 | | ---- | ---- | | UITableViewCellStyleDefault | 只有一个标签，如图3 - 5所示 | | UITableViewCellStyleSubtitle | 与默认样式类似，但在主文本下方有一个副标题行 | | UITableViewCellStyleValue1 | 有两行文本，主要文本行在单元格左侧，次要详细文本标签在右侧 | | UITableViewCellStyleValue2 | 有两行文本，重点在详细文本标签上 | ### 2.2 设置单元格文本标签 将单元格的文本标签设置为国家名称，而不是简单的单元格计数。调整`cell.textLabel.text`属性的设置如下： ```objc Country *item = [self.countries objectAtIndex:indexPath.row]; cell.textLabel.text = item.name; ``` ### 2.3 设置副标题 使用单元格的`detailTextLabel`属性设置副标题为国家的首都： ```objc cell.detailTextLabel.text = item.capital; ``` ### 2.4 设置图像视图 UITableViewCell类有一个`imageView`属性，给它一个图像后，会将其放置在标题标签的左侧。在单元格配置中添加以下代码： ```objc cell.imageView.image = item.flag; ``` 但运行程序时会发现，所有国旗图像都会出现，但宽高比不同，使视图看起来不够专业。设置单元格`imageView`的框架并不能解决这个问题，下面是一个快速解决方案。 ### 2.5 图像缩放方法 在视图控制器实现文件中定义一个类方法，用于按给定大小绘制UIImage： ```objc + (UIImage *)scale:(UIImage *)image toSize:(CGSize)size { UIGraphicsBeginImageContext(size); [image drawInRect:CGRectMake(0, 0, size.width, size.height)]; UIImage *scaledImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return scaledImage; } ``` 将此方法的处理程序放在视图控制器的私有`@interface`声明中，以避免潜在的编译器问题。然后调整图像设置代码，使用该方法： ```objc cell.imageView.image = [MainTableViewController scale: item.flag toSize:CGSizeMake(115, 75)]; ``` 经过以上配置后，`tableView:cellForRowAtIndexPath:`方法如下： ```objc - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier]; cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; cell.textLabel.font = [UIFont systemFontOfSize:19.0]; cell.detailTextLabel.font = [UIFont systemFontOfSize:12]; } Country *item = [self.countries objectAtIndex:indexPath.row]; cell.textLabel.text = item.name; cell.detailTextLabel.text = item.capital; cell.imageView.image = [MainTableViewController scale: item.flag toSize:CGSizeMake(115, 75)]; return cell; } ``` 构建并运行应用程序，它应该会显示国家信息和国旗图像。 ## 3. 圆角处理 在制作精良的iOS应用程序中，几乎每个元素的边角都是圆角的，这一细节能显著提升应用的视觉质量。实现圆角处理只需两个步骤： ### 3.1 导入Quartz Core API 在视图控制器的头文件中导入Quartz Core API： ```objc #import <QuartzCore/QuartzCore.h> ``` ### 3.2 设置圆角半径 在`viewDidLoad`方法中添加以下代码，为UITableView设置圆角： ```objc - (void)viewDidLoad { [super viewDidLoad]; self.title = @"Countries"; self.countriesTableView.delegate = self; self.countriesTableView.dataSource = self; self.countriesTableView.layer.cornerRadius = 8.0; } ``` 运行应用程序，表格视图将显示圆角。 ## 4. 实现附件视图 现在已经有了一个美观的包含五个国家信息的表格，可以进一步扩展表格视图的基本功能。首先，关注对特定行选择的响应。 ### 4.1 创建新视图控制器 为了在选择行时显示所选国家的所有已知信息，需要创建一个新的视图控制器。使用Objective - C类模板，以UIViewController为父类，创建名为`CountryDetailsViewController`的新类，并确保勾选“With XIB for user interface”选项。 ### 4.2 构建视图 在`.xib`文件中使用标签、文本字段和图像视图的组合，构建与图3 - 8相似的视图。为了增强外观，使用属性检查器为“Country Name”标签添加了轻微的阴影。 ### 4.3 创建出口 为需要动态更改的组件（国家标签、图像视图和两个文本字段）创建出口，使用以下属性名称： - `nameLabel` - `capitalTextField` - `mottoTextField` - `flagImageView` ### 4.4 添加协议 为了使视图控制器能够响应文本字段的事件，在其头文件中添加`UITextFieldDelegate`协议： ```objc @interface CountryDetailsViewController : UIViewController <UITextFieldDelegate> ``` ### 4.5 添加属性 为了使视图控制器尽可能通用，添加一个`Country`类的属性来保存当前显示的数据： ```objc #import "Country.h" @property (strong, nonatomic) Country *currentCountry; ``` ### 4.6 自定义协议和委托属性 为了让详细视图控制器能够告知调用者它已完成并应从视图中移除，需要设置一个自定义协议和委托属性。在`CountryDetailsViewController.h`文件中添加以下内容： ```objc @class CountryDetailsViewController; @protocol CountryDetailsViewControllerDelegate <NSObject> -(void)countryDetailsViewControllerDidFinish:(CountryDetailsViewController *)sender; @end @interface CountryDetailsViewController : UIViewController <UITextFieldDelegate> @property (weak, nonatomic) IBOutlet UILabel *nameLabel; @property (weak, nonatomic) IBOutlet UIImageView *flagImageView; @property (weak, nonatomic) IBOutlet UITextField *capitalTextField; @property (weak, nonatomic) IBOutlet UITextField *mottoTextField; @property (strong, nonatomic) Country *currentCountry; @property (strong, nonatomic) id <CountryDetailsViewControllerDelegate > delegate; @end ``` ### 4.7 填充视图方法 在详细视图控制器的实现文件中添加一个方法来填充视图： ```objc -(void)populateViewWithCountr ```