33、iOS应用开发：界面设计、运行测试与优化指南

iOS应用开发：界面设计、运行测试与优化指南

1. 添加并配置标签

为完成场景设计，需添加一个包含“Welcome to iOS App Development!”文本的标签。具体操作如下：
1. 从对象库中拖放一个标签到场景中图像上方的左上角。此时会出现蓝色引导线，辅助你定位标签。
2. 使用尺寸检查器将标签的宽度属性更改为600，高度属性更改为300，使标签占据场景的上半部分。

选中标签后，在属性检查器中修改以下属性：
| 属性 | 操作 |
| ---- | ---- |
| 文本属性 | 将“Label”替换为“Welcome to iOS App Development!”，也可通过双击标签设置文本。 |
| 对齐属性 | 选择居中对齐的中间选项。 |
| 行数属性 | 输入2，表示两行文本。 |
| 字体属性 | 按住该属性右侧的向上箭头，直到字体大小为55，这是我们希望使用的默认最大字体大小。 |
| 自动收缩属性 | 选择最小字体比例。若文本因设备尺寸或方向过大而无法适应标签，iOS默认会将文本缩放至指定字体大小的一半，最小字体比例下方的值0.5即表示此含义。 |

2. 使用自动布局支持不同屏幕尺寸和方向

尽管设计看似完成，但若此时在iOS模拟器中运行应用，会出现各种问题：
- 标签和图像视图不会根据设备和方向进行调整大小。
- 在竖屏模式的iPhone上，标签和图像视图会过宽；在横屏模式下，屏幕高度不足以显示这两个组件。
- 在iPad上，标签和图像视图会过小，无法填满屏幕，且会位于屏幕左边缘。

使用自动布局约束可指定UI组件相对于其他组件的位置，以及组件应如何根据设备和设备方向进行调整大小和重新定位。在本应用中，使用自动布局约束确保标签和图像视图：
- 无论屏幕方向如何，水平填满屏幕。
- 无论屏幕方向如何，垂直填满屏幕并适当缩放。
- 根据运行应用的设备和当前设备方向进行调整大小。

配置应用的自动布局约束步骤如下：
1. 在故事板的左下角，点击显示文档大纲按钮，显示文档大纲窗口，该窗口位于设计区域左侧。文档大纲窗口会显示构成场景的所有UI组件。
2. 在文档大纲中，按住Control键，从标签节点（“Welcome to iOS App Development!”）拖动到顶部布局指南节点，然后释放鼠标。从弹出菜单中选择垂直间距，这会将标签的上边缘连接到场景的上边缘，使标签始终显示在顶部。由于标签已位于顶部，此操作会创建一个自动布局约束，要求标签的上边缘与顶部布局指南之间的间距为0点。
3. 按住Control键，从图像视图（“bug”）节点拖动到底部布局指南节点。从弹出菜单中选择垂直间距，这会将图像视图的下边缘连接到场景的下边缘，使图像视图始终显示在底部。由于图像视图已位于底部，此操作会创建一个自动布局约束，要求图像视图的下边缘与底部布局指南之间的间距为0点。
4. 在单视图应用中，场景有一个根视图，包含场景的其他UI组件（如标签和图像视图）。在本应用中，标签和图像视图应具有与视图相同的宽度，该宽度会根据设备和方向变化。为此，需将这些组件连接到视图的前缘和后缘。在从左到右的语言中，前缘在左侧，后缘在右侧；在从右到左的语言中则相反。这是iOS的国际化功能，可使iOS根据用户的语言调整UI。
- 按住Control键，从标签节点拖动到视图节点，选择到容器边距的前缘间距。
- 再次按住Control键，从标签节点拖动到视图节点，选择到容器边距的后缘间距。由于标签的宽度已与视图相同，此操作会创建自动布局约束，要求标签的左右边缘与视图的左右边缘之间的间距分别为0点。
- 对图像视图重复上述步骤。
5. 希望标签和图像视图各占据屏幕高度的一半，并根据屏幕大小和方向进行缩放。为此，需表明它们应具有相等的高度，且它们之间应存在固定的垂直间距。
- 按住Control键，从标签拖动到图像视图，选择相等高度。
- 再次按住Control键，从标签拖动到图像视图，选择垂直间距。由于根据之前的设计步骤，组件之间没有间距，此操作会创建一个自动布局约束，要求标签的下边缘与图像视图的上边缘之间的间距为0点。

以下是配置自动布局约束的流程图：

graph TD;
    A[点击显示文档大纲按钮] --> B[按住Control键，标签节点拖到顶部布局指南节点，选垂直间距];
    B --> C[按住Control键，图像视图节点拖到底部布局指南节点，选垂直间距];
    C --> D[按住Control键，标签节点拖到视图节点，选前缘和后缘间距];
    D --> E[对图像视图重复步骤D];
    E --> F[按住Control键，标签拖到图像视图，选相等高度和垂直间距];

3. 运行欢迎应用

3.1 在iOS模拟器上测试

在iOS模拟器上执行应用的步骤如下：
1. 点击Xcode工具栏上的方案选择器，显示可用于测试应用的iOS模拟器和设备列表。
2. 选择iPhone 6，表示希望在基于iPhone 6设备大小和功能配置的模拟器上测试应用。
3. 点击Xcode工具栏上的运行按钮，或从产品菜单中选择运行，也可按快捷键。这将构建项目，将欢迎应用安装到iPhone 6模拟器中并运行。最初，应用以竖屏模式显示。若模拟器窗口过高，无法显示整个应用，可使用模拟器的“窗口>缩放”菜单将模拟器窗口缩放至较小尺寸。
4. 若要更改设备方向，选择“硬件>向左旋转”或“硬件>向右旋转”。应用运行时，Xcode中的停止按钮会启用。点击停止按钮会终止应用，但模拟器仍会运行。可点击模拟器主屏幕上的应用图标重新运行应用。
5. 若要在iPad模拟器上运行应用，从方案选择器中选择iPad Air，然后运行应用。

3.2 在设备上测试（仅适用于付费苹果iOS开发者计划成员）

若要在iOS设备上测试应用，需先在Xcode中设置付费开发者账户：
1. 选择“Xcode>偏好设置”。
2. 点击“账户”标签。
3. 点击“+”按钮，选择“添加Apple ID”。
4. 输入Apple ID和密码，然后点击“添加”。

将iOS设备连接到计算机，连接后，设备会显示在Xcode的方案选择器中。选择你的设备，然后运行应用。若设备尚未添加到开发者账户，Xcode会假设你要使用该设备进行测试，并处理将设备添加到开发者账户的详细信息。之后，Xcode会构建应用，将其安装到设备上并运行。尝试旋转设备，查看应用如何适应竖屏和横屏方向。

4. 使应用可访问

iOS具备多种无障碍功能，以帮助有各种残疾的人使用设备。对于有视觉和身体残疾的人，iOS的VoiceOver可以朗读屏幕文本（如标签或按钮上的文本）或你提供的帮助用户理解UI组件用途的文本。当VoiceOver启用且用户触摸可访问的UI组件时，VoiceOver会朗读与该组件关联的无障碍文本。所有UIKit框架组件都支持无障碍功能，许多组件默认已启用。例如，当用户触摸标签时，VoiceOver会朗读标签的文本。VoiceOver可在“设置”应用的“通用>无障碍”中启用，还可将无障碍快捷方式设置为VoiceOver，以便通过三次点击设备的主屏幕按钮来切换VoiceOver的开关。

由于VoiceOver目前在iOS模拟器中不受支持，因此必须在设备上运行此应用才能听到VoiceOver朗读文本。不过，在模拟器中可以使用无障碍检查器查看VoiceOver将朗读的文本。

4.1 为图像视图启用无障碍功能

在Welcome应用中，标签的内容可由VoiceOver直接朗读，因此无需为其提供更多描述性文本。但图像视图默认未启用无障碍功能，需在故事板中启用并为其提供描述性文本，步骤如下：
1. 在Xcode中，在项目导航器中选择Main.storyboard。
2. 在场景中选择图像视图。
3. 点击实用工具区域中身份检查器的图标，然后滚动到无障碍部分。
4. 选择“已启用”复选框，为图像视图启用无障碍功能。
5. 在“标签”字段中输入“Deitel logo”，为UI组件提供简要描述。
6. 若需要更详细的描述来帮助用户理解UI组件的用途，可在“提示”字段中输入“Deitel double - thumbs - up bug logo”。
7. 保存故事板。

运行此应用时，在启用VoiceOver的设备上触摸标签或图像视图，即可听到VoiceOver朗读相应的文本。

以下是为图像视图启用无障碍功能的步骤表格：
| 步骤 | 操作 |
| ---- | ---- |
| 1 | 在项目导航器中选择Main.storyboard |
| 2 | 选择场景中的图像视图 |
| 3 | 点击身份检查器图标，滚动到无障碍部分 |
| 4 | 选择“已启用”复选框 |
| 5 | 在“标签”字段输入“Deitel logo” |
| 6 | 在“提示”字段输入“Deitel double - thumbs - up bug logo” |
| 7 | 保存故事板 |

5. 应用国际化

为使应用覆盖尽可能多的受众，可考虑针对不同地区和语言进行定制。准备应用以实现这一目标的过程称为国际化，为每个地区创建资源（如不同语言的文本）的过程称为本地化。

使用自动布局设计UI是国际化的关键部分，正确使用时，自动布局可使iOS以适合每个地区的方式呈现UI。例如，某些语言（如英语、法语、西班牙语等）的UI通常从左到右排列，而其他语言（如阿拉伯语、希伯来语等）则从右到左排列。

国际化的另一个重要方面是准备字符串资源，以便iOS可以根据用户所在地区用适当的翻译字符串替换它们。Xcode现在支持使用XLIFF（XML Localization Interchange File Format）文件来管理本地化字符串资源。Xcode可以导出包含应用所有可本地化文本的XLIFF文件，将该文件提供给翻译人员，然后导入翻译后的XLIFF文件。当应用在不同地区设置的设备上运行时，iOS会自动为该地区选择正确的字符串资源。

默认情况下，每个创建的应用都使用基础国际化，即应用中的字符串资源与故事板分离，并用作提供其他语言本地化字符串的模板。开发过程中使用的语言（在本文中为英语）称为应用的基础语言。如果未为给定地区提供相应语言的字符串，iOS默认使用基础语言的字符串。

5.1 翻译期间锁定UI

本地化最好在应用的UI完成或接近完成时进行。每个UI组件都有一个唯一的ID，用于国际化和本地化过程。如果这些ID发生更改（例如，添加/删除UI组件时），Xcode将无法正确应用本地化字符串资源，某些UI组件可能没有本地化字符串资源。

如果仍在开发应用并希望同时翻译字符串资源，可以锁定整个故事板或单个UI组件，以防止意外修改。有四种锁定选项：
- 无：可以修改UI组件的所有属性。
- 所有属性：不能修改UI组件的任何属性。
- 可本地化属性：不能修改UI组件的可本地化属性（例如，标签的文本或给定UI组件的无障碍标签和提示）。在等待翻译资源并将其导入应用项目时，可以使用此选项继续处理UI。
- 不可本地化属性：只能修改UI组件的可本地化属性。在导入翻译资源时使用此选项，以确保不会意外修改不可本地化属性。

锁定故事板组件的步骤如下：
1. 在项目导航器中选择故事板。
2. 选择“编辑器>本地化锁定”，然后选择一个锁定选项。

锁定特定UI组件的步骤如下：
1. 在故事板中选择UI组件。
2. 在身份检查器的“文档”类别中，更改“锁定”属性的值。

以下是锁定UI组件的流程图：

graph TD;
    A[选择锁定对象] --> B{锁定故事板组件};
    B -->|是| C[在项目导航器中选故事板，选编辑器>本地化锁定，选锁定选项];
    B -->|否| D[在故事板中选UI组件，在身份检查器文档类别改锁定属性值];

综上所述，通过以上步骤可以完成iOS应用的界面设计、运行测试、优化其可访问性并实现国际化，从而打造出功能丰富、用户体验良好且具有广泛适用性的应用。