iOS应用界面设计与优化指南

### iOS 应用界面设计与优化指南 #### 1. 文档大纲与视图查看 在编辑区域左下角点击小按钮，文档大纲会从左侧滑出。它展示了故事板的所有内容，按场景划分，每个场景包含相关内容块。在当前示例中，只有一个视图控制器场景，其中包含视图控制器，而视图控制器又包含视图等元素。文档大纲能让你快速了解内容全貌，主编辑区域的内容会在此处镜像显示。 视图图标代表 UIView 类的实例，UIView 对象是用户可见且可交互的区域。目前应用中只有一个视图，该图标代表用户在应用中能看到的所有内容。点击视图图标，Xcode 会自动高亮之前提到的方形屏幕轮廓，在此可进行图形化的用户界面设计。 #### 2. 库的使用 工作区右侧的实用工具视图分为两部分。若未显示该视图，可点击工具栏最右侧的视图按钮，选择“视图”➤“实用工具”➤“显示实用工具”，或按 Option - Command - Zero 组合键。 实用工具视图的下半部分是库面板，这里有可在程序中复用的项目，顶部栏的四个图标将其分为四个部分： | 库的类型 | 说明 | | ---- | ---- | | 文件模板库 | 包含文件模板，添加新项目文件时，可从此处拖动所需类型的文件。 | | 代码片段库 | 有代码片段，可拖动到源代码文件中。若忘记 Objective - C 快速枚举语法，可直接从库中拖动对应片段，也可将自己编写的代码片段拖入此库。 | | 对象库 | 充满可复用对象，如文本字段、标签、滑块、按钮等，用于设计 iOS 界面，后续会大量使用。 | | 媒体库 | 存放图片、声音和电影等媒体文件。 | 库底部有搜索字段，输入关键词（如“button”），库中仅显示名称包含该关键词的项目，搜索完成后记得清空搜索字段。 #### 3. 向视图添加标签 尝试使用 Interface Builder，点击库顶部的对象库图标（圆形中间带方形）调出对象库。若要找表格视图，可滚动查找，也可在搜索字段输入“Table View”，还可按 ^z3 快捷键跳至搜索字段并高亮内容后直接输入搜索词。 在库中找到标签，将其拖动到编辑的视图上（若编辑器中未显示视图，可点击 Interface Builder 文档大纲中的视图图标）。鼠标悬停在视图上时，光标会变成绿色加号。将标签拖到视图中心，会出现垂直和水平的蓝色参考线辅助定位。 用户界面元素按层次存储，多数视图可包含子视图，但按钮等控件通常不能。通过将标签直接拖到正在编辑的视图，可将其作为主视图的子视图，应用显示该视图时标签会自动出现。 双击新创建的标签，输入“Hello, World!”，点击标签外取消选择，再重新选择并拖动标签到合适位置。完成后，选择“文件”➤“保存”或按 Command - S 保存。 查看 Xcode 项目窗口左上角的弹出菜单，右侧可选择运行设备。选择 iOS 模拟器部分的 iPhone 5s，让应用在模拟的 iPhone 5s 上运行。若加入了 Apple 的付费 iOS 开发者计划，也可在自己的设备上运行应用，这里建议优先使用模拟器。选择“产品”➤“运行”或按 Command - R 编译并运行应用。 #### 4. 布局问题与解决 运行应用后会发现，在 Interface Builder 中居中的标签在模拟器中偏右。这是因为 Interface Builder 默认视图定位相对于放置它的视图的左上角，而放置标签的视图比模拟 iPhone 的屏幕宽，在 Interface Builder 中居中并非在测试屏