iOS界面设计全攻略：从基础到高级技巧

### iOS界面设计全攻略：从基础到高级技巧 #### 1. 开启界面设计之旅 在进行界面设计时，你可以在编辑器或文档大纲区域与对象进行交互。若视图上方的场景坞未显示图标，而是显示“ViewController”文本，只需点击它即可。在场景被选中之前，场景坞默认显示场景的视图控制器名称。 在开始设计前，我们先来了解一些基础准备工作： - **打开文件**：打开相关项目文件夹中的“Empty.storyboard”文件，确保文档大纲区域可见，且视图能在编辑器中显示，这样就可以开始设计界面了。 - **默认设备选择**：在Xcode中编辑iPhone界面和创建新项目时，默认使用的是“通用”屏幕，它与任何在售的iPhone或iPad都不匹配。为了更方便地进行开发，我们可以设置一个默认的模拟设备，例如iPhone 6。 #### 2. 对象库的使用 对象库是添加界面元素的重要来源，所有添加到视图中的元素，如按钮、图像和网页内容等，都来自对象库。 - **打开对象库**：通过菜单栏选择“View” -> “Utilities” -> “Show Object Library”（快捷键Control - Option - Command - 3）。若工具区域尚未显示，Xcode界面的工具区域将打开，对象库会显示在右下角。 - **注意事项**：Xcode有多个库，除了对象库，还有文件模板库、代码片段库和媒体库等。若发现显示的库不是你想要的，可以点击库上方被圆圈包围的正方形图标，或从“View” -> “Utilities”菜单中重新选择对象库。 - **查看对象信息**：当你点击并悬停在库中的某个元素上时，会弹出一个窗口，显示该对象在界面中的使用说明。 - **切换视图和查找对象**：使用库左下角的视图按钮（四个正方形），可以在列表视图和图标视图之间切换。若知道对象名称但在列表中找不到，可使用库下方的过滤字段快速查找。 #### 3. 向视图添加和移除对象 - **添加对象**：要向视图添加对象，只需从对象库中点击并拖动到视图中。例如，在对象库中找到标签对象（UILabel），将其拖动到编辑器视图的中心。标签会出现在视图中，显示为“Label”，双击标签并输入“Hello”，文本将更新。 - **移除对象**：点击选择要移除的对象，然后按下Delete键。也可以使用“Edit”菜单下的选项在视图之间复制和粘贴，或在视图内多次复制元素。 #### 4. 编辑区域底部工具介绍 编辑区域底部的工具大多与自动布局相关，有一个例外： - 左下角的按钮用于隐藏和显示文档大纲，可提供更多的工作空间，在使用笔记本电脑时非常有用。 - 中间的菜单（通常标有“w Any”和“h Any”）用于设计适应多种设备的界面。 - 右侧的按钮用于控制自动布局的对齐、固定、约束问题和调整大小等。 #### 5. IB编辑工具的使用 为了更精确地设计界面，Apple提供了一些有用的编辑工具。 - **引导线**：在视图中拖动对象时，会出现蓝色虚线引导线，帮助将对象沿视图边缘、其他对象中心或标签和对象标题的字体基线对齐。此外，引导线还会自动显示，指示符合Apple界面指南的大致间距要求。你还可以手动添加引导线，通过选择“Editor” -> “Add Horizontal Guide”或“Editor” -> “Add Vertical Guide”，手动添加的引导线为橙色，拖动对象靠近引导线时，引导线会变为蓝色表示对齐。 - **微调对象位置**：选择对象后，使用箭头键可以每次移动1个点来微调对象位置。还可以通过在Magic Trackpad上捏合，或在Interface Builder编辑器视图中Control - 点击（或右键点击）并从菜单中选择合适的缩放级别来缩放视图。 - **选择手柄**：大多数对象都有选择手柄，可用于水平、垂直或同时拉伸对象。但有些对象会限制调整大小的方式，以保持iOS应用界面的一致性。在复杂界面中，若难以通过选择手柄判断所选对象，可选择“Editor” -> “Canvas” -> “Show Selection Highlights”，让Xcode将所选对象变暗。 - **排列和对齐**：在Interface Builder中，“Editor”菜单下有“Arrange”选项，可将UI元素移到其他元素后面或前面。但“Align”选项在Xcode 6中与自动布局系统紧密相关，使用起来可能会让人困惑。若要对齐一组对象，可按以下步骤操作： 1. 选择所有要对齐的元素。 2. 从菜单栏选择“Editor” -> “Resolve Auto Layout Issues” -> “Add Missing Constraints”。 3. 使用“Editor” -> “Align”选项选择对齐方式，对象应会正确更新并对齐。 4. 选择“Editor” -> “Resolve Auto Layout Issues” -> “Clear Constraints in View Controller”。 #### 6. 大小检查器的使用 大小检查器可提供对象的大小、位置和对齐信息。 - **打开大小检查器**：先选择要操作的对象，然后点击Xcode工具区域顶部的尺子图标，或选择“View” -> “Utilities” ->