iOS中表格视图的创建与使用

### iOS 中表格视图的创建与使用 在 iOS 开发中，表格视图（UITableView）是一种常用的界面元素，用于展示大量数据。本文将详细介绍如何创建和配置表格视图，以及如何处理表格视图的交互。 #### 1. 数据准备 首先，我们需要创建一些国家数据对象，并将它们存储在一个可变数组中。以下是创建国家对象的代码： ```objc Country *usa = [[Country alloc] init]; usa.name = @"United States of America"; usa.motto = @"E Pluribus Unum"; usa.capital = @"Washington, D.C."; usa.flag = [UIImage imageNamed:@"usa.png"]; Country *france = [[Country alloc] init]; france.motto = @"Liberté, Égalité, Fraternité"; france.capital = @"Paris"; france.flag = [UIImage imageNamed:@"france.png"]; Country *england = [[Country alloc] init]; england.name = @"England"; england.motto = @"Dieu et mon droit"; england.capital = @"London"; england.flag = [UIImage imageNamed:@"england.png"]; Country *scotland = [[Country alloc] init]; scotland.name = @"Scotland"; scotland.motto = @"In My Defens God Me Defend"; scotland.capital = @"Edinburgh"; scotland.flag = [UIImage imageNamed:@"scotland.png"]; Country *spain = [[Country alloc] init]; spain.name = @"Kingdom of Spain"; spain.motto = @"Plus Ultra"; spain.capital = @"Madrid"; spain.flag = [UIImage imageNamed:@"spain.png"]; self.countries = [NSMutableArray arrayWithObjects:usa, france, england, scotland, spain, nil]; ``` #### 2. 显示数据到表格视图 要在表格视图中显示测试数据，我们需要在代码中引用表格视图。可以通过添加一个名为 “countriesTableView” 的出口来实现。具体操作步骤如下： 1. 打开 .xib 文件。 2. 按住 Control 键并点击表格视图，然后拖动到接口文件，就像为按钮添加出口一样。 表格视图的方法分为委托方法（delegate methods）和数据源方法（datasource methods）两类： - 委托方法：用于处理表格视图的视觉元素，如单元格的行高。 - 数据源方法：用于处理表格视图中显示的信息，如单元格信息的配置。 表格视图通过 `UITableViewDelegate` 和 `UITableViewDataSource` 两个协议与程序进行通信。我们需要在接口行中添加一些代码，让类知道它遵循这些协议。以下是相关代码： ```objc // MainTableViewController.h #import <UIKit/UIKit.h> #import "Country.h" @interface MainTableViewController : UIViewController <UITableViewDelegate, UITableViewDataSource> @property (weak, nonatomic) IBOutlet UITableView *countriesTableView; @property (strong, nonatomic) NSMutableArray *countries; @end ``` 接下来，我们需要将视图控制器连接到表格视图。在 `MainTableViewController.m` 的 `viewDidLoad` 方法中设置表格视图的委托和数据源属性： ```objc - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view from its nib. self.title = @"Countries"; self.countriesTableView.delegate = self; self.countriesTableView.dataSource = self; Country *usa = [[Country alloc] init]; usa.name = @"United States of America"; usa.motto = @"E Pluribus Unum"; usa.capital = @"Washington, D.C."; usa.flag = [UIImage imageNamed:@"usa.png"]; // ... } ``` #### 3. 创建未分组的表格视图 要创建未分组的 `UITableView`，需要正确实现两个主要方法： 1. **指定表格视图显示的行数**：通过 `tableView:numberOfRowsInSection:` 方法实现。由于表格视图只有一个部分，不需要考虑 `section` 参数，只需返回国家数组的数量。 ```objc -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [self.countries count]; } ``` 2. **指定表格视图单元格的配置**：使用 `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:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]; cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; cell.textLabel.font = [UIFont systemFontOfSize:19.0]; cell.detailTextLabel.font = [UIFont systemFontOfSize:12]; } cell.textLabel.text = [NSString stringWithFormat:@"Cell %i", indexPath.row]; return cell; } ``` 此时运行应用程序，表格视图将显示五个单元格，每个单元格有一个通用标题（Cell 0, Cell 1, Cell 2 等）和一个披露附件指示器。 #### 4. 单元格重用考虑 iOS 中的表格视图通过重用当前不在用户视野中的单元格来节省内存和时间。它会将滚动出视线的单元格重新用于显示新可见的单元格。为了使重用方案生效，需要完成以下两件事： 1. 定义表格视图支持的不同类型的单元格（即具有相同外观和组件的单元格），每种单元格类型由一个重用标识符标识。 2. 在分配新单元格之前，调用 `dequeueReusableCellWithIdentifier:` 方法查看是否有可用的可重用单元格。 #### 5. 配置单元格 为了使单元格适合我们的数据，需要进行以下配置： 1. **更改行的显示样式**：将 `tableView:cellForRowAtIndexPath:` 方法中的分配/初始化行更改为 `UITableViewCellStyleSubtitle` 样式。 ```objc cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier]; ``` `UITableViewCell` 有四种不同的样式： | 样式 | 描述 | | ---- | ---- | | UITableViewCellStyleDefault | 只有一个标签 | | UITableViewCellStyleSubtitle | 与 Default 样式类似，但在主文本下方有一个副标题 | | UITableViewCellStyleValue1 | 有两行文本，主要文本在单元格左侧，次要详细文本标签在右侧 | | UITableViewCellStyleValue2 | 有两行文本，重点放在详细文本标签上 | 2. **设置单元格的文本标签**：将单元格的文本标签设置为国家的名称。 ```objc Country *item = [self.countries objectAtIndex:indexPath.row]; cell.textLabel.text = item.name; ``` 3. **设置单元格的副标题标签**：将副标题设置为国家的首都。 ```objc cell.detailTextLabel.text = item.capital; ``` 4. **设置单元格的图像视图**：将国家的旗帜图像显示在单元格的左侧。 ```objc cell.imageView.image = item.flag; ``` 由于旗帜图像的纵横比可能不同，导致视图看起来不够专业。可以通过定义一个类方法来调整图像大小： ```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:C ```