iOS开发：标签栏与选择器的实现

### iOS开发：标签栏与选择器的实现 在iOS应用开发中，标签栏和选择器是常见的UI组件，它们能为用户提供便捷的交互体验。下面将详细介绍如何创建标签栏控制器以及实现日期选择器和单组件选择器。 #### 1. 创建标签栏控制器 首先，回到`Main.storyboard`，从对象库中拖动一个`Tab Bar Controller`到编辑区域。与其他控制器不同，拖动`Tab Bar Controller`时会一次性带出三个完整的视图控制器对，它们通过曲线相互连接。这不仅是一个标签栏控制器，还包含两个已连接好且可直接使用的子控制器。 将标签栏控制器放置到编辑区域后，故事板会新增三个场景。展开左侧的文档视图，能看到故事板中所有场景的概览，同时也能看到连接标签栏控制器和子控制器的曲线。这些曲线会随着场景的移动自动调整，以保持连接。需要注意的是，故事板中每个场景的屏幕位置对应用运行时的外观没有影响。 这个标签栏控制器将作为根控制器，它负责控制程序运行时用户看到的第一个视图，并负责切换其他视图。每个子视图控制器底部会显示类似“View Controller – Item 1”的名称，且视图底部有一个与标签栏对应的单个栏项。为了让它们从一开始就有正确的名称，我们可以进行如下操作： - 选择`Item 1`视图控制器，点击其底部的标签栏项。 - 打开属性检查器，在“Title of the Bar Item”文本字段中输入`Date`，然后按`Enter`键。这会立即更改该视图控制器底部栏项的文本，以及其父标签栏中对应项的文本。 - 在检查器中，点击“Image”弹出菜单，选择`clockicon`来设置图标。 对第二个子视图控制器重复上述步骤，但将其命名为`Single`，并为其栏项使用`singleicon`图像。 接下来，为了使标签栏反映出五个标签（每个标签代表一个选择器），我们需要添加三个更多的视图控制器到故事板，并将它们连接到标签栏控制器。具体步骤如下： 1. 从对象库中拖动一个普通的`View Controller`。 2. 按住`Ctrl`键，从标签栏控制器拖动到新的视图控制器，释放鼠标按钮，然后从弹出的小窗口中选择“view controllers”。这样标签栏会立即新增一个项，新的视图控制器底部也会出现一个栏项。 3. 按照之前的步骤，为这个视图控制器的栏项设置标题为`Double`，图像为`doubleicon`。 4. 再拖动两个视图控制器，并将它们连接到标签栏控制器。分别选择它们的栏项，将其中一个命名为`Dependent`，图像为`dependenticon`，另一个命名为`Custom`，图像为`toolicon`。 当所有视图控制器就位后，需要为每个视图控制器设置正确的控制器类，以实现不同的功能。选择最左侧标签对应的视图控制器，打开身份检查器，在“Custom Class”部分将类更改为`BIDDatePickerViewController`，然后按`Return`或`Tab`键进行设置。此时，停靠栏中所选控件的名称会变为`Date Picker View Controller – Item 1`。对接下来的四个视图控制器重复此过程，分别输入类名`BIDSingleComponentPickerViewController`、`BIDDoubleComponentPickerViewController`、`BIDDependentComponentPickerViewController`和`BIDCustomPickerViewController`。 在进行下一步的GUI编辑之前，记得保存故事板文件。 完成上述设置后，可以进行初始测试运行。编译并运行应用程序，应用应该会启动并显示一个可正常工作的标签栏。依次点击每个标签，每个标签都应该是可选择的。如果想进一步确认一切正常，可以在每个内容视图中添加不同的标签或其他对象，然后重新启动应用程序，此时应该能看到不同视图的内容随着标签的选择而变化。 以下是创建标签栏控制器的操作流程： ```mermaid graph LR A[回到Main.storyboard] --> B[拖动Tab Bar Controller到编辑区域] B --> C[新增三个场景] C --> D[设置子视图控制器名称和图标] D --> E[添加三个视图控制器并连接到标签栏控制器] E --> F[设置视图控制器类名] F --> G[保存故事板文件] G --> H[编译并运行应用程序进行测试] ``` #### 2. 实现日期选择器 要实现日期选择器，需要一个输出口和一个动作。输出口用于获取日期选择器的值，动作由按钮触发，用于显示从选择器中获取的日期值的警报。在编辑`Main.storyboard`文件时，在Interface Builder中添加这两个元素。具体步骤如下： 1. 在库中找到`Date Picker`，将其拖动到编辑区域的`Date Picker View Controller`中。将日期选择器放置在视图顶部，紧贴显示屏顶部。即使它与状态栏重叠也没关系，因为在OS 7中，这个控件顶部有足够的垂直内边距，不会被注意到。它应该占据内容视图的整个宽度和相当一部分高度。 2. 单击日期选择器（如果尚未选中），返回属性检查器。可以看到日期选择器有许多属性可以配置，我们将大部分值保留为默认值，但会限制选择器的日期范围。找到“Constraints”标题，勾选“Minimum Date”框，将值保留为默认的`1/1/1970`。同时勾选“Maximum Date”框，并将值设置为`12/31/2200`。 3. 连接这个选择器到其控制器。按下`⌥ + Enter`打开辅助编辑器，确保辅助编辑器上方的跳转栏设置为“Automatic”，这样`BIDDatePickerViewController.m`会显示在那里。按住`Ctrl`键，从选择器拖动到`BIDDatePickerViewController.m`的上部，在`@interface`和`@end`行之间，当出现“Insert Outlet, Action, or Outlet Collection”工具提示时释放鼠标按钮。在释放后出现的弹出窗口中，确保“Connection”设置为“Outlet”，输入`datePicker`作为名称，然后按`Enter`键创建输出口并将其连接到选择器。 4. 从库中获取一个`Button`，将其放置在日期选择器下方。双击按钮，将其标题设置为`Select`。按住`Ctrl`键，从按钮拖动到辅助视图中的源代码，这次拖动到接近底部、最后一个`@end`行上方，直到看到“Insert Action”工具提示出现。将新动作命名为`buttonPressed`，然后按`Enter`键进行连接。这会创建一个名为`buttonPressed:`的空方法，需要用以下代码完成该方法： ```objc - (IBAction)buttonPressed:(id)sender { NSDate *selected = [self.datePicker date]; NSString *message = [[NSString alloc] initWithFormat: @"The date and time you selected is: %@", selected]; UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Date and Time Selected" message:message delegate:nil cancelButtonTitle:@"That’s so true!" otherButtonTitles:nil]; [alert show]; } ``` 5. 为了完成这个控制器类，还需要在`viewDidLoad:`方法中添加一些设置代码： ```objc - (void)viewDidLoad { ```