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

# iOS开发：标签栏与选择器的实现 ## 1. 编辑MainWindow.xib并添加标签栏控制器 ### 1.1 添加标签栏控制器 首先，我们要编辑 `MainWindow.xib` 并添加标签栏控制器。具体操作步骤如下： 1. 双击 `MainWindow.xib` 在Interface Builder中打开该文件。 2. 从对象库中拖动一个 `Tab Bar Controller` 到nib的主窗口。 当将标签栏控制器拖放到主窗口后，会出现一个代表 `UITabBarController` 的新窗口，同时在Interface Builder的停靠栏中会出现一个新图标。这个标签栏控制器将作为根控制器，它控制着程序运行时用户看到的第一个视图，并负责切换其他视图。 ### 1.2 自定义标签栏 接下来，我们要根据需求自定义标签栏，我们需要五个标签，每个标签代表一个选择器。操作步骤如下： 1. 在Interface Builder中，点击中间的视图模式图标，将主窗口切换到列表视图。 2. 打开 `Tab Bar Controller` 左侧的展开三角形，显示 `Tab Bar` 和两个 `View Controller` 条目。 3. 打开每个 `View Controller` 左侧的展开三角形，显示与每个控制器关联的 `Tab Bar Item`。 ### 1.3 添加标签栏项 为了得到五个标签栏项，我们需要添加三个新的 `Tab Bar Item`，操作如下： 1. 调出库（Tools  Library），找到一个 `Tab Bar Item` 并将其拖到标签栏上，注意插入点，它会显示新项的最终位置。 2. 再拖出两个 `Tab Bar Item`，此时标签栏将由五个 `View Controller` 组成，每个控制器都有自己的 `Tab Bar Item`。 ### 1.4 自定义视图控制器 对五个视图控制器进行自定义，步骤如下： 1. 在nib的主窗口中，选择五个 `View Controller` 中的第一个（不是关联的 `Tab Bar Item`），然后调出属性检查器（Tools  Attributes Inspector）。 2. 在属性检查器中，将 `Title` 字段留空，将 `Wants Full Screen` 复选框保持未选中状态，指定 `NIB Name` 为 `DatePickerViewController`（不包括 `.xib` 扩展名），并保持 `Resize View From NIB` 复选框选中。 3. 按下
4 调出身份检查器，将类更改为 `DatePickerViewController`，然后按回车键或制表键设置。 4. 对接下来的四个视图控制器重复上述过程，分别输入 `SingleComponentPickerViewController`、`DoubleComponentPickerViewController`、`DependentComponentPickerViewController` 和 `CustomPickerViewController` 作为 `NIB Name`，并使用身份检查器将类更改为与 `NIB Name` 字段中输入的名称相同。 注意：在检查器的 `NIB Name` 字段中输入名称后，一定要按回车键，否则类名可能不会生效。 ### 1.5 自定义标签栏项 对五个 `Tab Bar Item` 进行自定义，使其具有正确的图标和标签，步骤如下： 1. 在nib的主窗口中，点击第一个 `Tab Bar Item`，按下
1 回到属性检查器。 2. 将 `Badge` 字段留空，将 `Identifier` 设置为 `Custom`。 3. 将 `Title` 从 `Item 1` 更改为 `Date`，点击 `Image` 组合框，选择 `clockicon.png` 图像。 4. 对其他四个 `Tab Bar Item` 重复上述过程，分别将 `Title` 更改为 `Single`、`Double`、`Dependent` 和 `Custom`，并分别指定 `singleicon.png`、`doubleicon.png`、`dependenticon.png` 和 `toolicon.png` 作为图像。 ### 1.6 连接出口并运行 最后，在nib文件中，从 `Pickers App Delegate` 图标控制拖动到 `Tab Bar Controller` 图标，选择 `rootController` 出口，然后保存nib文件。回到Xcode，编译并运行，应用程序应该会启动并显示一个可正常工作的标签栏。 ## 2. 实现日期选择器 ### 2.1 声明出口和动作 在 `DatePickerViewController.h` 中添加以下代码： ```objc #import <UIKit/UIKit.h> @interface DatePickerViewController : UIViewController { UIDatePicker *datePicker; } @property (nonatomic, retain) IBOutlet UIDatePicker *datePicker; - (IBAction)buttonPressed; @end ``` ### 2.2 编辑内容视图 保存上述文件后，双击 `DatePickerViewController.xib` 编辑第一个标签的内容视图，操作步骤如下： 1. 单击 `View` 图标并按下
1 调出属性检查器，在 `Simulated User Interface Elements` 部分，将 `Bottom Bar` 弹出菜单设置为 `Tab Bar`，这将使Interface Builder自动将视图高度减小到411像素并显示模拟的标签栏。 2. 从库中找到一个 `Date Picker` 并将其拖到视图窗口，将日期选择器放置在视图顶部，紧贴状态栏底部，使其占据内容视图的整个宽度和大部分高度。 3. 单击日期选择器（如果尚未选中），回到属性检查器，在 `Constraints` 部分，选中 `Minimum Date` 复选框，保持默认值 `1/1/1970`，选中 `Maximum Date` 复选框，将值设置为 `12/31/2200`。 4. 从库中拖出一个 `Round Rect Button` 放在日期选择器下方，双击按钮并将其标题设置为 `Select`。 5. 选中按钮，按下
2 切换到连接检查器，从 `Touch Up Inside` 事件旁边的圆圈拖动到 `File’s Owner` 图标，连接到 `buttonPressed` 动作。 6. 从 `File’s Owner` 图标控制拖动回到日期选择器，选择 `datePicker` 出口，最后保存nib文件。 ### 2.3 实现日期选择器控制器 在 `DatePickerViewController.m` 文件顶部添加以下代码： ```objc #import "DatePickerViewController.h" @implementation DatePickerViewController @synthesize datePicker; - (IBAction)buttonPressed { NSDate *selected = [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:@"Yes, I did." otherButtonTitles:nil]; [alert show]; [alert release]; [message release]; } - (void)viewDidLoad { NSDate *now = [[NSDate alloc] init]; [datePicker setDate:now animated:NO]; [now release]; } - (void)viewDidUnload { [super viewDidUnload]; self.datePicker = nil; } - (void)dealloc { [datePicker release]; [super dealloc]; } @end ``` 在 `buttonPressed` 方法中，我们使用 `datePicker` 出口获取日期选择器的当前日期值，并构造一个字符串来显示警报。在 `viewDidLoad` 方法中，我们创建一个新的 `NSDate` 对象，并将日期选择器设置为该日期，确保每次从nib加载视图时，选择器都会重置为当前日期和时间。 构建并运行应用程序，确保日期选择器正常工作。如果一切正常，点击 `Select` 按钮将弹出一个警报，显示日期选择器中当前选择的日期和时间。 ## 3. 实现单组件选择器 ### 3.1 声明出口和动作 在 `SingleComponentPickerViewController.h` 中添加以下代码： ```objc #import <UIKit/UIKit.h> @interface SingleComponentPickerViewController : UIViewController <UIPickerViewDelegate, UIPickerViewDataSource> { UIPickerView *singlePicker; NSArray *pickerData; } @property (nonatomic, retain) IBOutlet UIPickerView *singlePicker; @property (nonatomic, retain) NSArray *pickerData; - (IBAction)buttonPressed; @end ``` ### 3.2 构建视图 保存上述文件后，双击 `SingleComponentPickerViewController.xib` 编辑第二个标签的内容视图，操作步骤如下： 1. 选择 `View` 图标并按下

3 调出属性检查器，在 `Simulated User Interface Elements` 部分，将 `Bottom Bar` 设置为 `Tab Bar`。 2. 从库中拖出一个 `Picker View` 到视图窗口，将其放置在视图顶部。 3. 从 `File’s Owner` 控制拖动到选择器视图，选择 `singlePicker` 出口。 4. 单击选择器（如果尚未选中），按下
2 调出连接检查器，将 `dataSource` 和 `delegate` 连接到 `File’s Owner` 图标。 5. 拖出一个 `Round Rect Button` 到视图，双击按钮并将其标题设置为 `Select`，在连接检查器中，将 `Touch Up Inside` 事件连接到 `File’s Owner` 图标，并选择 `buttonPressed` 动作。最后保存nib文件。 ### 3.3 实现控制器作为数据源和委托 在 `SingleComponentPickerViewController.m` 文件开头添加以下代码： ```objc #import "SingleComponentPickerViewController.h" @implementation SingleComponentPickerViewController @synthesize singlePicker; @synthesize pickerData; - (IBAction)buttonPressed { NSInteger row = [singlePicker selectedRowInComponent:0]; NSString *selected = [pickerData objectAtIndex:row]; NSString *title = [[NSString alloc] initWithFormat: @"You selected %@!", selected]; UIAlertView *alert = [[UIAlertView alloc] initWithTitle:title message:@"Thank you for choosing." delegate:nil cancelButtonTitle:@"You're Welcome" ```