ios7 Storyboard教程1——Start Developing iOS Apps Today——从今天开始开发IOS（IOS7版）系列源文档翻译（十）

浏览数：25 / 时间：2015年06月11日

本教程建立在您的第一个教程（基础教程）创建的项目。你会使用你学到的一些视图，视图控制器，操作和导航。下面的界面，第一个设计的过程中，您还可以创建一些关键的用户界面流程，作为你的todolist的应用程序，并添加运行你已经创建的场景。

本教程教您如何：

1.采用自动布局灵活添加到您的用户界面

2.用Storyboard来定义应用程序的内容和流量

3.管理多个视图控制器

4.加入行动元素在用户界面

在您完成本教程中的所有步骤，你就会有一个应用程序，看起来像这样：

采用自动布局

加载项的项目的场景设定在肖像模式（portrait mode）下工作。因此，如果用户旋转设备会发生什么？尝试一下在模拟器上运行你的应用程序。

旋转模拟器

1.在iPhone模拟器启动你的应用程序。

2.选择Hardware > Rotate Left（或按Command-左箭头）。

正如你看到的，文本框看起来并不完全正确。停止大约一半在屏幕上。文本字段应该动动一路之隔的屏幕，因为它在纵向模式。幸运的是，Xcode中有一个称为自动布局功能强大的内置布局引擎。使用自动布局形容你的意图的场景元素的定位，然后让布局引擎确定如何最好地实现这一意图。您可以使用约束，规则解释，其中一个元素应位于相对于另一个，或者什么大小应该是，或者这两种元素应该先缩小东西时减少了可用于每个人的空间描述你的意图。对于附加的项目的场景（scene），需要一两套约束来定位文本字段并设置其大小等。
设置这些限制可以很容易地实现在Interface Builder。

使用自动布局定位文本框

1.在项目导航器中，选择Main.storyboard。
2.在你的脚本中，选择文本字段。
3.在画布上，按下Control键拖拽文本字段向现场的顶部，在周围的文本字段中的空结束。这个空间是文本字段的父视图。
出现快捷菜单，在你释放拖动的位置。

4.从快捷菜单中选择“Top Space to Top Layout Guide”。
一个隔约束文本字段的顶部和导航栏之间产生。
如果出现一个不同的快捷菜单中，或许还有一个菜单项，如“领导空间集装箱，”这是不是垂直拖动到屏幕的顶部，因为，你在一个不同的方向拖动。 Xcode使用你在拖，以此来了解什么样的你试图让约束的方向，它使用了拖动的起点和终点来了解哪些对象正由约束有关。来吧，尝试不同的拖动方向，看看有什么制约条件。
5.当你做实验，按下Control键拖拽文本字段右边，在超景结束，创造了“尾随空格键集装箱”的约束。
6.按下Control键拖拽文本字段的左侧，在它的父结尾，创造“空间领先的集装箱”的约束。

这些约束指定文本字段的边缘和它的父之间的距离不应改变。这意味着，如果该设备的方向改变时，文本字段将自动增长以满足这些约束。

注意：运行您的应用程序。如果旋转装置，该文本字段增大或缩小到合适的大小根据设备的方向。

如果你没有得到你期望的行为，使用Xcode的自动布局调试功能来帮助您。在文本字段中选择，选择Editor > Resolve Auto Layout Issues > “Reset to Suggested Constraints” 有Xcode中成立了由上述步骤中所述的限制。或选择Editor > Resolve Auto Layout Issues > Clear Constraints，以消除文本视图中的所有约束条件，然后尝试按照上面再次步骤。

虽然你的附加项目现场并没有做太多的是，基本的用户界面是存在的功能。从一开始就考虑布局，确保你有一个坚实的基础。

创建你第二个场景（Scene）

到目前为止，你一直都是做一个场景界面的，现在你可以将项目添加到您的事项列表视图控制器管理的单个场景。现在是时候创建一个显示整个的列表中的一幕。幸运的是， iOS的配备了一个强大的内置类，称为一个表视图，专门用来显示项目的滚动列表。

使用表格视图的场景添加到您的Storyboard

1.在项目导航器中，选择Main.storyboard 。
2.在工具框中，打开对象库。（要打开一个菜单命令库，选择View > Utilities > Show Object Library。）
3.从列表中拖动一个表视图控制器对象拖放到画布上的附加的to-do项目现场的左侧。如果需要，您可以使用缩小按钮图像在画布右下方获得足够的空间来将其拖动到。
如果你看到当您尝试将其拖动到画布的内容并没有什么表视图发生时，你很可能拖动表视图而不是表视图控制器。表视图是由表视图控制器管理的一件事，但你要全包，所以找到表??视图控制器，并将其拖动到画布上。

现在你有两个场景，一个用于显示的事项列表，一个用于添加事项。

当他们启动您的应用程序的第一个看到的是这个场景，所以告诉Xcode中那是你的意图通过设置表视图控制器作为第一个场景。

设置表格视图控制器作为初始场景

1.使用按钮在画布的左下方

如有必要，打开大纲视图图像。
2.在大纲视图中，选择新添加的表视图控制器。
3.在属性控制栏中

与表视图控制器选中，打开属性检查器中的图像。
4.在属性检查器中，选择旁边的是初始视图控制器选项的复选框。

或者，你可以拖动从XYZAddToDoItemViewController的初始场景指标表视图控制器直接在画布上。

表视图控制器设置为你的故事板的初始视图控制器，使得它加载的应用程序启动的第一个场景。

注意：运行您的应用程序。取而代之的是附加的项目现场，其??文本字段，你现在应该看到一个空表视图一个与多个横向分隔将其分成行的画面，但每行中没有任何内容。

在表视图中显示静态内容

因为你还没有了解存储的数据是它的较早创建的和存储待办的项目，并在表格视图中显示它们。但你并不需要用真正的数据展现chu‘l。 Xcode中，您可以创建在Interface Builder的一个表视图静态内容中。这使得它更容易看到你的用户界面将如何显示，这是一个有用的方式来尝试不同的想法。

在你的表视图中建立静态单元格（

static cell）

1.在为你的界面视图中，选择下表视图控制器表视图。
2.视图中选择在属性栏中的

，打开属性检查器中的图像。
3.在属性检查器中，选择从旁边的内容选项，在弹出的菜单中静态单元格。
三个空表视图单元格出现在你的表视图。
4.在大纲视图或画布上，选择最上面的单元格。
5.在属性检查器中，选择基本从旁边的样式选项的弹出式菜单。
基本样式包括一个标签，并在表格单元格文本“标题”，所以Xcode创建一个标签。
6.在大纲视图或画布上，选择标签。
7.在属性检查器中，更改标签的“标题”文本“修剪草坪。 ”对于以使更改生效，按Enter键或单击工具区域之外。
或者，您也可以通过双击它，并直接编辑文本编辑标签。
8.重复步骤4-7为其他细胞，给他们的文字为其他可能待办事项。
9.创造足够的细胞，使该项目超过填满整个屏幕。您可以通过复制并粘贴或拖动单元格时按住Option键创建新的细胞。
检查点：运行您的应用程序。您现在应该看到与你在Interface Builder中添加预配置的单元格的表视图。看到当你滚动它新的表视图的感受。尝试旋转模拟设备如何通知表视图已经配置正确铺陈其内容。您可以使用表格视图得到很多行为是免费的。