从今天开始学习iOS开发（iOS 7版）--构建一款App之设计用户界面

Views是构建用户界面的建筑模块。理解如何用视图清晰、优雅、有用地展示内容非常重要。对于一款成功的app来说，创建一个高效展示app内容的用户界面是必不可少的。在这一节中，我们将学习在storyboard中创建和管理视图来定义你的界面。

视图层次
视图并不仅仅是在屏幕上展示自身和响应用户输入，它们也可以作为其他视图的容器。因此，app中以层级结构排列的视图被称为视图层次。视图层次定义了相对于其他视图的视图布局。在视图层次中，包含在视图中的视图实例被称为子视图（subview），包含视图的父视图是它的superview。虽然一个视图实例可以有多个子视图（subview），但却只能有一个superview。

视图层次的顶层是窗口对象（window object），由UIWindow类的实例表示，一个窗口作为基本的容器--你可以在其中添加视图对象，从而展示在屏幕上。就其本身而言，一个窗口并不能显示任何内容。想要展示内容，你需要在窗口中添加内容视图（使用其子视图层次）。

为了让用户看到内容视图及其子视图，必须把内容视图插入窗口的视图层次。当使用storyboard时，系统会自动为你配置好位置。程序启动时，应用对象会加载storyboard，实例化出相应的view controller类，并解析出每个view controller涉及到的content view层次关系，然后将初始view controller的内容视图添加到窗口中。你将会在下一节学习更多关于管理view controller的内容，现在你需要着重关注在storyboard的单一view controller中创建层次。

使用视图创建界面
当设计app时，知道什么类型的视图用于什么样的目的非常重要。比如，你用来收集用户文本输入的视图（比如文本框），就不用于你可能用来展示静态文本（比如标签）的视图。你可以很简单地创建使用UIKit views绘图的应用程序，因为你可以快速配置一个基本的接口。一个UIKit view对象是一个UIView类实例，或者是它的一个子类。UIKit框架提供了多种类型的视图来展示和组织数据。

虽然每个视图有其特定的功能，但是UIKit view可以被分为以下七类：



你可以使用Interface Builder设置视图。Interface Builder提供了一个包含标准视图、控件以及其他构建界面所需对象的库。从这个库中，拖放对象至canvas，并以你喜欢的方式排列。下一步，在storyboard中保存它们之前，使用inspectors来配置这些对象。你可以立刻看到操作的结果，无需编写代码、构建或者运行你的应用。

UIKit框架提供了标准视图用以展示多种类型的内容，但你也可以通过子类化UIView（或者它的衍生物）自定义视图。自定义视图是UIView的子类，你可以在其中处理所有的绘图和事件处理任务。在这些教程中，你不会使用到自定义视图，但你可以在“View Programming Guide for iOS”的“Defining a Custom View”一节学到更多相关内容。

使用Storyboards布局视图
你可以在一个图形界面中使用storyboard来布局你的视图层次。Storyboard提供了一个直观的、可视化的方式来使用视图，并创建界面。

正如你在第一个教程中看到的，storyboards由场景组成，并且每个场景都有相应的视图层次。把对象库中的视图拖放至storyboard场景，视图将自动被添加至场景的视图层次中。视图在层级中的位置由你放置的位置决定。在向场景中添加视图后，你可以调整视图尺寸，操作，配置以及把它移至canvas。

Canvas还在你的界面中展示了对象的大纲视图。大纲视图展示在canvas的左侧，让你看到storyboard中对象的层次结构。 在storyboard scene中创建的view hierarchy是一组压缩的Objective-C对象，运行时会解压这些对象。




使用Inspectors设置视图
在storyboard中使用视图时，inspector pane是个必不可少的工具，它位于Object library上方的实用工具区。



每个inspector为界面上的元素提供了重要的配置选项。在storyboard中选择一个对象，比如视图，你可以使用各个storyboard来自定义对象的不同属性。



File：指定有关storyboard的一般信息。



Quick Help：提供与对象有关的有用文档。



Identity：为对象指定自定义类，并定义它的辅助属性。



Attributes：自定义对象的可见属性。



Size：指定一个对象的尺寸大小和自动布局属性。



Connections：创建界面和源码之间的连接。

在第一个教程中你已经开始使用Attributes inspector了，在教程的剩余部分，你将继续使用这些inspector来配置视图和storyboard中的其他对象。尤其是你将使用Attributes inspector来配置视图，使用Identity inspector来配置view controller，以及使用Connections inspector来创建视图和view controller之间的连接。

使用Auto Layout放置视图
当你开始在storyboard中放置视图，你需要考虑各种各样的状况。iOS app运行多个不同的设备上，有着不同屏幕尺寸、方向以及语言。你想要的不是静态界面，而是能动态地无缝地响应不同屏幕尺寸、设备方向以及位置等的界面。

为了帮你使用视图创建一个通用的界面，Xcode提供了一个我们称之为Auto Layout的工具。Auto Layout是一个可以描述用户界面中视图间关系的系统。Auto Layout允许你依据单个视图间或者一组视图间的约束来定义关系。

Auto Layout菜单位于canvas的右下角，由四部分组成。你可以使用这个菜单在canvas上为视图添加多个类型的约束，解决布局问题，并确定约束调整行为。



在第二个教程中，你将会简单使用Auto Layout，并为你的ToDoList app添加对横向模式的支持。

原文：Designing a User Interface