13、iOS 应用界面开发全攻略

iOS 应用界面开发全攻略

1. 界面预览与约束检查

在开发当前的图形用户界面（GUI）时，可使用预览助手来验证布局情况。打开助手编辑器，方法有两种：一是选择中间工具栏上标有“Editor”的按钮；二是点击“View ➤ Assistant Editor ➤ Show Assistant Editor”。然后在跳转栏中选择“Preview”和“Main.storyboard”。当 4 英寸 iPhone 的预览出现后，再添加一个 5.5 英寸 iPhone 的预览，会发现布局与小屏幕手机基本一致，只是由于屏幕变宽，文本字段会稍宽一些。

需要注意的是，对于相对简单的示例，Xcode 能够创建出满足布局需求的约束，但并非总是如此。每次使用“Editor ➤ Resolve Auto Layout Issues ➤ Add Missing Constraints”命令时，都要仔细检查 Xcode 添加的约束。若不符合预期，就删除这些约束，手动添加约束。

2. 创建和连接输出口

在进行应用的首次测试前，需要创建并连接输出口。界面上的图像视图和标签无需输出口，因为运行时不需要更改它们。而两个文本字段会保存代码中需要使用的数据，所以需要为它们创建输出口。

创建和连接输出口的步骤如下：
1. 确保在项目导航器中选择了故事板文件。若屏幕空间有限，可选择“View ➤ Utilities ➤ Hide Utilities”隐藏实用工具面板。
2. 在助手编辑器的跳转栏中选择“Automatic”，此时应能看到“ViewController.h”或“ViewController.m”。
3. 确保助手编辑器中显示“ViewCo