（译）Getting Started——1.2.2 Desinging a User Interface（设计用户界面）

​      用户需要以最简单的方式与应用界面进行交互。应该从用户的角度出发设计页面，使得界面更高效、简捷和直接。

storyboard以图形化的方式帮助你设计和实现界面。在设计和实现界面的过程中，你可以准确的看到你实现的界面是什么样的，界面上哪些东西合适，哪些东西不合适，以及你对界面随时的调整，都是一目了然的。

当你使用storyboard构建界面时，正如你在上一节教程中学习的那样，你一直都在与视图（View）打交道，视图（View）用于把内容显示给用户。视图（View）是用于构建用户界面，用于有效地、优雅地、清晰地展示内容的基本单元。如果你正在开发更为复杂的应用，那你可以使用多个场景和多个View。

视图层次结构

屏幕上，视图不会显示自己，也不会响应用户的输入，它们只能提供一个用于放置其它视图的窗口。于是，应用里的视图是由被称为视图层次结构的东东所管理的。视图层次结构定义了相对于其它视图的视图布局。在一个层次结构中，被包含在其它视图里的视图被叫做子视图，包含其它视图的视图被叫做父视图。即使一个视图里有多个子视图，它也只有且仅有一个父视图。

视图层次结构的顶层对象是window对象。它是UIWindow类的实例，它是屏幕上用于添加视图对象的基本容器。为了显示内容，你需要给window添加内容视图对象（内容视图对象作为window的子视图）。

内容视图和它的子视图对于用户来说，是可见的，内容视图也必须被插入到window的视图层次结构中。在你使用storyboard时，放置内容视图的位置已经为你自动配置好了。在应用被启动时，应用对象会加载storyboard，会创建有关的视图控制器类的实例，解压每个视图控制器里的视图层次，然后把作为开始的视图控制里的视图内容添加到window中。在下面的章节中，你会学习到如何管理视图控制器。现在，你需要把焦点聚集到如何在storyboard的单视图控制器中创建一个层次结构。

视图的类型

在你设计应用时，了解哪种意图下使用哪种视图是非常重要的。例如，如果你想收集用户的信息（比如是一段文本），你可以使用text field，如果你要显示一段静态的文字，你应该使用label。应用绘制时，使用UIKit框架的视图是比较容易创建的，这是因为你可以使用它们快速的装配出基本的界面来。一个UIKit框架的视图对象是UIView类或子类的实例。UIKit框架提供了不同类型的视图用于帮助你表现和组织数据。

尽管每个视图都有它自己特定的功能，但是总的来说，UIKit视图可以被归为这么几种类型：

视图类型	意图	举例
Content	显示特定类型的内容，例如图片或文本	Image view，label
Collections	显示集合或一组视图	Collection view，table view
Controls	执行动作或显示信息	Button，slider，switch
Bars	导航或执行动作	Toolbar，navigation bar，tab bar
input	接收用户的文本输入	search bar，text view
Containers	为其它视图提供容器	View，scroll view
Modal	中断应用正常的流程来让用户执行动作	Action sheet，alert view

你可以在Interface Builder中，用可视化的方式来装配视图。Interface Builder中提供了标准的view、control等库，这些东东在你构建界面时用得到。从这个库中拖出对象，把它们放置于画布中，然后用你自己的方式去安排它们。在保存之前，使用inspector来配置这些对象。你会马上看到结果，不需要写任何一行代码，你就可以运行程序了。

UIKit框架提供了标准的视图来显示各种类型的内容，你还可以继承UIView（或它的子类）来创建自己的视图。自定义的视图一定是UIView的子类，在自定义视图中，你需要自己处理所有的绘制事件，处理所有的事件句柄。在该教程中，你不会使用自定义视图，如果你有兴趣，你可以在Defining a Custom View一文中学习到如何实现自定义视图的更多知识。

使用storyboard放置视图

    在可视化环境中，使用storyboard来放置自己的视图层次。storyboard提供了一个直接地、可视化地方式来让你操作视图，构建界面。

正如你在上一节教程中看到的那样，storyboard由场景组成，每个场景都关联着一个视图层次结构。从对象库中拖出一个视图并把它摆放在场景上，storyboard就会自动把它加入到当前场景的视图层次结构中。在视图层次结构中，视图的位置是由你决定的，你把视图放到哪里，它就在哪里显示。在你给场景添加完一个视图后，你可以在画布上对视图进行重设大小、配置、移动位置等操作。

画布上也可以显示界面上对象的视图大纲，它在画布的左边显示，你从大纲上就可以清楚的看到画布中对象的层次结构。

storyboard场景中创建的视图层次结构实际上是一系列被压缩的Objective-C对象。在运行时，这些对象被解压。解压的结果就是，你使用utility区域的inspector为相关类的实例设置的属性值的层次结构被展现出来。

正如你在上一节教程中学到的那样，在storyboard中，你工作的默认界面配置被应用为界面的各个版本。当你需要为特定的设备尺寸和方向调整你的界面时，你应该把这种变化指定给特定的尺寸类。尺寸类是在显示环境下，描述水平或垂直空间的高级方式，例如竖向的iPhone或横向的iPad。有两种类型的尺寸类：普通地、紧凑地。展示环境的特点是一对尺寸类，一个描述了水平空间，一个描述了垂直空间。在画布上，你可以使用尺寸类控制器，为普通尺寸和紧凑尺寸的结合来预览和编辑界面。

在本教程中，你没有在特定的尺寸下工作，但是，如果你对尺寸类很好奇，请阅读Size Classes Design Help章节。

使用Inspector来配置视图

utility区域，对象库上方的inspector面板中显示的内容如下：

每个inspector的元素都为界面上的元素提供了重要的配置选项。当你选择了一个对象（例如一个视图），inspector会根据你选择的对象，更新面板里的属性，你就可以对属性进行设置了。

1. File：指定storyboard的一般通用信息。

2. Quick Help：获取该对象相关的有用信息。

3. Identity：为该对象指定自定义的类，定义它可访问的属性。

4. Attributes：自定义对象的可视化属性。

5. Size：指定对象的尺寸和Auto Layout属性。

6. Connections：在界面和源码之间创建连接。

在前一节教程中，你使用了Attributes inspector。在教程剩下的部分中，你会继续使用其它的inspector来配置视图和对象。尤其是，使用Attributes inspector来配置视图，使用Identity inspector来创建视图控制器，使用Connections inspector在视图和视图控制器之间创建连接。

使用Auto Layout定位视图

   当你在storyboard中开始定位视图时，你需要考虑各种各样的情况。IOS应用运行在数量众多的不同设备上，这些设备的屏幕尺寸不同，方向不同，语言不同等等。你需要动态的界面，当设备的屏幕尺寸、方向、本地化、度量等发生变化时，界面应该可以无缝的响应。

如果你已经学习了上一节教程，你会看到，Xcode提供了名为Auto Layout的工具来帮助你创建通用的、适配性强的界面。Auto Layout是解释视图之间关系的系统。在单个视图上或多个视图之间，它会让你定义一系列的约定。

点击画布右下方的Auto Layout图标，来给画布上的视图添加不同类型的约定，解决布局问题，检查用于约束行为的约定。

1.Align：创建行或列的约束。例如把一个视图放置于容器的中间，或者把一个视图放于某两个视图的左边。

2.Pin：创建空间约束。例如定义视图的高度，或者指定它离另外一个视图的水平距离。

3.Resolve Auto Layout Issues：基于建议，通过添加或重设约束来解决布局问题。

4.Resizing Behavior：指定大小重新设定后如何影响约束。

此时，对于在ToDoList应用中你创建的简单页面来说，你不需要学习Auto Layout中进一步的知识。因为，应用的界面很复杂，你就需要添加不同的约束来精确的指定，在不同的设备和方向下，界面应该如果摆放视图。在教程的最后，会有一个指向Auto Layout教程的链接，这个教程会帮助你使用约束来定义更为复杂的自适应的界面。