iOS开发中表格视图的深入探索

### iOS 开发中表格视图的深入探索 #### 从 NIB 文件加载 UITableViewCell 在 iOS 开发里，借助 Xcode 的 Interface Builder 视觉布局功能，能够重新创建之前用代码构建的两行界面。具体操作步骤如下： 1. **修改 BIDNameAndColorCell 类**：在 BIDNameAndColorCell.m 文件中，把属性标记为输出口，以便在 Interface Builder 里使用。修改类扩展部分的代码如下： ```objc @interface BIDNameAndColorCell () @property (strong, nonatomic) IBOutlet UILabel *nameLabel; @property (strong, nonatomic) IBOutlet UILabel *colorLabel; @end ``` 同时，删除 `initWithStyle:reuseIdentifier:` 方法，因为该方法里的设置工作现在会在 Interface Builder 中完成。 2. **创建新的 NIB 文件**： - 右键点击 Xcode 中的 Cells 文件夹，从上下文菜单里选择 New File…。 - 在新文件助手的左窗格中，点击 User Interface（确保选择的是 iOS 部分，而非 Mac OS X 部分）。 - 从右上方窗格中选择 Empty，然后点击 Next。 - 在接下来的屏幕上，将 Device Family 弹出框保持为 iPhone 设置，再次点击 Next。 - 当提示输入名称时，输入 BIDNameAndColorCell.xib。要保证在文件浏览器中选择了主项目目录，并且在 Group 弹出框中选择了 Cells 组。 #### 在 Interface Builder 中设计表格视图单元格 1. **打开 NIB 文件**：在项目导航器中选择 BIDNameAndColorCell.xib 文件进行编辑。 2. **关闭自动布局**：由于要为视图定义固定布局，所以可以关闭自动布局。调出文件检查器（1），关闭 Interface Builder Document 部分的 Use Autolayout 复选框。 3. **添加表格视图单元格**：在库中找到 Table View Cell，将其拖到 GUI 布局区域。 4. **调整单元格高度**：确保表格视图单元格处于选中状态，按下 5 调出大小检查器，在 View 部分把单元格的高度从 44 改为 65。 5. **设置重用标识符**：按下 4 进入属性检查器，将 Identifier 的值设置为 CellTableIdentifier。这个标识符能确保在重用单元格时获取到正确的单元格类型。 6. **编辑单元格内容视图**： - 从库中拖出四个 Label 控件，放置到内容视图中。可以参考相关指南进行操作，若觉得方便，也可以先拖出一个标签，再按住 Option 键拖动来创建副本。 - 双击左上角的标签，将其改为 Name:，再把左下角的标签改为 Color:。 - 选中 Name: 和 Color: 标签，按下属性检查器字体字段中的小 T 按钮，选择 System Bold 作为字体。 - 若有需要，选中右侧两个未更改的标签字段，将它们稍微向右拖动，为设计留出一些空间。 - 调整右侧两个标签的大小，使其一直延伸到右侧的参考线。 7. **指定单元格子类**：选中表格视图单元格，按下 3 调出身份检查器，从 Class 控件中选择 BIDNameAndColorCell。 8. **连接输出口**：切换到连接检查器（6），将 colorLabel 和 nameLabel 输出口分别拖到 GUI 中对应的标签上。 #### 使用新的表格视图单元格 要使用设计好的单元格，只需对 BIDViewController.m 中的 viewDidLoad: 方法做一些简单的修改： ```objc - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. self.computers = @[@{@"Name" : @"MacBook Air", @"Color" : @"Silver"}, @{@"Name" : @"MacBook Pro", @"Color" : @"Silver"}, @{@"Name" : @"iMac", @"Color" : @"Silver"}, @{@"Name" : @"Mac Mini", @"Color" : @"Silver"}, @{@"Name" : @"Mac Pro", @"Color" : @"Black"}]; UITableView *tableView = (id)[self.view viewWithTag:1]; [tableView registerClass:[BIDNameAndColorCell class] forCellReuseIdentifier:CellTableIdentifier]; tableView.rowHeight = 65; UINib *nib = [UINib nibWithNibName:@"BIDNameAndColorCell" bundle:nil]; [tableView registerNib:nib forCellReuseIdentifier:CellTableI ```