Your first iOS app（6）——Tutorial: Storyboards

Tutorial: Storyboards

教程：故事板

本教程建立在你在第一个教程 (Tutorial: Basics)中创建的对象的基础上。你将利用你学过的关于视图、视图控制器、动作、以及导航的知识。跟随第一个界面设计过程，你也会为你的ToDoList应用程序创建一些关键的用户界面流，并且添加行为到你已经创建的场景中。

本教程将教你如何：

采用自动布局来灵活的添加用户界面

使用故事板来定义app的内容和流程

管理多视图控制器

添加动作给用户界面里的元素

在你完成本教程所有的步骤之后，你将有一个如下所示的app：

Adopt Auto Layout

采用自动布局

添加待办事宜项（add-to-do-item scene）场景被配置为在纵向模式下操作，因为你就是这样创建它的。所以，如果用户旋转了设备会发生什么？尝试在模拟器中选准你的app。

在iOS模拟器中旋转

1.在iOS模拟器中启动app。

2.选择 Hardware > Rotate Left (或者 Command+Left Arrow).

正如你看到的，文本字段没有正确显示。它停留在接近屏幕中间的位置。文本字段应该横穿过整个屏幕，就像在纵向模式中一样。幸运的是，Xcode有一个强大的内建的布局引擎，称为自动布局。通过自动布局，你可以按照你的意图来放置屏幕中的元素，然后让布局引擎决定实现这些意图的最好方式。你使用约束（constraints，规定一个元素相对于另外一个元素的位置）来描述你的意图，或者它的尺寸、或者当有东西减少他们的空间时两个中哪个元素应该先收缩。对于add-to-do-item场景，有两个约束被需要——一个是定位文本字段，另一个是设置它的大小。

在IB中可以很容易的设置这些约束（constraints）。

使用自动布局来定位文本字段

1.在项目导航器中选择 Main.storyboard.

2.在故事板中选择文本字段。

3.在画布中，从文本字段内向上方的区域开始拖拽，结束在围绕为本字段的空白区域。这个控件是文本字段的父视图。
一个快捷菜单出现在你释放拖动的位置。

4.从快捷按钮中选择 “Top Space to Top Layout Guide” 。
一个文本字段的顶部和导航条之间的间隔约束被创建。
如果出现不一样的快捷菜单，可能菜单项是“Leading Space to Container”，这是应为垂直拖拽到屏幕顶部造成的，你的拖拽方向不同。Xcode使用拖拽方向来理解何种约束使你想要的，而且它使用拖拽的开始和结束点来理解那个对象被约束关联。继续尝试不同的拖拽方向来看看各种可用的约束。

5.当你尝试时，从文本字段的右侧拖拽到父视图，创建一个“Trailing Space to Container”约束。

6.从文本字段向左拖拽到父视图，创建一个“Leading Space to Container” 约束。

这些约束指定文本字段的边缘与它的父视图之间的距离不会被改变。这就意味着如果设备方向变化，文本字段会自动的增长来满足这些约束。

Checkpoint: 运行app。如果你旋转设备，文本字段会随着设备的旋转而变化尺寸。

如果你没有的到想要的行为，使用Xcode自动布局调试特性来帮助你。通过选中文本字段，选择Editor > Resolve Auto Layout Issues > “Reset to Suggested Constraints”Xcode通过之前的步骤来设置约束。或者选择Editor > Resolve Auto Layout Issues > Clear Constraints来移除所有的文本视图的约束，然后重新按照上述步骤设置一遍。

虽然你添加的项目场景还不能做太多事情，但是基本的用户界面和功能已经完成。从一开始就考虑布局可以确保你有一个坚实的构建基础。

Creating a Second Scene

创建第二个场景

迄今为止，你一直是在一个通过视图控制器管理的单一场景中工作，这个场景是一个让你能够在待办事宜清单上添加项目的页面。现在，是时候来创建一个用于显示整个待办事宜清单的场景了。幸运的是，iOS附带一个强大的内建的类叫做表格视图，它专门设计用来显示滚动的表格项目。

创建一个带有表格视图的场景到你的故事板

1.在项目导航器中选择 Main.storyboard.

2.在工具区打开对象库。

3.从列表中拖拽表视图控制器对象，把它放在画布中 add-to-do-item场景的左侧。如果你需要，你可以使用右下角的缩放按钮来调整画布大小使得有足够的空间来拖拽它。如果你看到一个标示图的内容，但当你视图拖拽它到画布的时候，没有发生任何事，你或许拖动的是一个表视图而不是表视图控制器。表视图是是表视图控制管理的一个事物，但你想要整个封装，所以你要查找表视图控制器并将它拖动到画布。

你现在有了两个场景，一个显示待办事宜项目的清单，另外一个是添加待办事宜项目。

当用户启动app的时候，首先要看到有意义的列表，所以告诉Xcode设置表视图控制器为第一个场景。

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

1.如果必要，使用画布左下角的按钮来打开大纲视图

2.在大纲视图中，选择最新添加的表视图控制器。

3.在表视图控制器选中的状态下，打开在工具区的属性检查器

4.在属性检查器中，选择初始化视图控制器选项旁边的复选框。


或者，你可以直接从XYZAddToDoItemViewController拖拽初始化场景指示器到画布上表视图控制器。
表视图控制器在故事板中被设置为初始化视图控制器，在app启动的时候会被加载为第一个场景。

Checkpoint:运行app。你将看到的是一个空的表视图，而不是add-to-do-item 场景。

在表视图中显示静态的内容

因为你还没有学过关于数据存储的内容，创建和存储待办事宜事项和在表视图中显示它们还为时尚早。但你不需要真的数据原型来用于你的用户界面。Xcode允许你在表视图中创建静态的内容。这使得更容易看到用户界面如何行为，这是一个值得尝试的不同方法。

在表格视图中创建静态的表视图单元

1.在界面的大纲视图中，选择表视图控制器下得表视图。

2.在表视图被选中的状态下，打开位于工具区的属性检查器

3.在属性检查器中，内容选项旁边的弹出菜单中选择静态表单元。
在你的表视图中将出现三个空的表视图单元。

4.在大纲视图或者画布中，选择顶部的表单元。

5.在属性检查器中，从样式选项旁边的弹出菜单中选择基础（Basic）。
基础样式包括标签，所以Xcode在表单元中创建一个文本为“Title”的标签。

6.在大纲视图或画布中选择这个标签。

7.在属性检查器中，改变标签的文本为“Mow the Lawn”。通过按回车键或是点击工具区域以外的范围来确定这个修改。
另外，你能够通过双击来编辑标签和直接编辑文本。

8.重复4-7的步骤来输入其他表单元，给他们类似的待办事宜项目。

9.创建足够多得表单元来使项目超过屏幕。你能通过复制粘贴或者按住Option键加拖动来来创建新的表单元。

Checkpoint: 你将看到带有预配置表单元得表视图添加到IB中。看看当你滚动它是表视图的感觉。尝试旋转模拟器设备——注意表视图已经配置为恰当的内容。你通过使用表视图来得到很多灵活的行为。

当你完成后，是时候为表视图提供导航方法，×××事宜清单项目，到你创建的第一个场景，在哪里用户创建新的待办事宜项目。

添加一个继续（Segue）来向前导航

你在故事板中配置了两个视图控制器，但是他们之间没有联系。关联两个场景被称为继续（segues）。

在创建一个segue之前，你需要配置你的场景。首先你要封装你的XYZToDoListViewController到导航控制器。从Defining the Interaction 回忆导航控制器提供导航条并跟踪导航栈。你将添加一个按钮到这个导航条来转换到XYZAddToDoItemViewController场景。

添加导航控制器到你的表视图控制器

1.在大纲视图选择表视图控制器。

2.在视图控制器被选中的情况下选择Editor > Embed In > Navigation Controller

Xcode添加一个新的导航控制器到你的故事板，为他集成初始化场景，并且创建一个新导航控制器和已存在的表视图控制器之间的关系。在画布中，如果你选择两个场景的连接图标，你将看到它是根视图控制器的关系。这意味着导航栏下面视图显示的内容是表视图。初始化场景设置为导航控制器，因为导航控制器拥有你app中将被显示的所有内容——它是待办事宜清单和添加待办事宜项目两个场景的容器。

Checkpoint: 运行app。在表视图上面你会看到一个额外的控件。这是导航控制器提供的导航条。

现在，你将添加一个标题和一个按钮到导航条。

配置导航条

1.在大纲视图中或画布中，在表视图控制器下面选择导航项目。
导航条从当前导航控制器显示的视图控制中获取他们的标题，他们本身没有标题。你使用导航项设置你的待办事宜列表的标题，而不是直接在导航条上设置

2.在属性检查器中，在标题字段中键入 My To-Do List。

3.如果必要，打开对象库。

4.从列表中拖拽条按钮到表视图控制器的导航条右侧。
在你拖拽条按钮项目的地反，按钮含有文本“Item”显示。

5.在大纲视图或画布中选择条按钮（bar button）项目。

6.在属性检查其中，在 Bar Button项目区域找到Identifier选型。从Identifier弹出的菜单中选择Add。
按钮会改变成Add按钮 (+)。

Checkpoint: 运行app。导航条将显示一个标题和一个Add 按钮。按钮还不能做任何事，接下来你将修改它。

你想通过Add按钮切换到add-to-do-item场景。这个changing已经被设置，但是没有连接到其他场景。Xcode能够轻松的设置Add按钮，通过点击它来切换到其他场景。

配置Add按钮

1.在画布中选中Add按钮

2.按住Control从按钮拖拽到add-to-do-item视图控制器。


标题为Action Segue 的快捷菜单出现在释放拖拽的位置。


这就是Xcode如何允许你选择什么类型的segue，它体现当欧诺个户点击Add按钮的时候，app是如何从 待办事宜清单 转换到 添加待办事宜项 的。

3.从弹出菜单中选择“push”。

Xcode设置segue和配置 待办事宜项目 视图控制器来被显示在导航控制器中——你将在IB中看到导航控制器。

此时，你或许注意到在你的工程上的警告。继续且打开导航问题来查看这个错误。

因为你增加 添加待办事宜项 到导航栈，它现在显示一个导航条。这个导航条导致你的文本字段向下移动，这意味着你之前设置的自动布局约束不再满足。幸运的是，这个问题非常容易修复。

更新自动布局约束

1.在大纲视图或是画布中选中文本字段。

2.在画布中，打开解决自动布局问题的弹出菜单，选择Update Constraints。
或者，你能选择Editor > Resolve Auto Layout Issues > Update Constraints。
约束被更新且Xcode警告消失。

Checkpoint: 运行app。你已经能够通过点击Add按钮从表视图转换到 添加待办事宜项目 视图控制器。因为你使用带有压栈segue的导航控制器，向后导航将自动处理。这意味着你能够通过点击back按钮来返回到表视图。

压入导航的工作就像它是应该、但当添加项目的时候它又不完全如你想要的那样工作。压入导航是为挖掘界面设计的，你要提供很多关于用户如何选择的信息。添加一个项目，在另一方面，是一个模态操作——用户执行一些动作，这些操作是完整和独立的，然后从场景返回到主导航。合适的方法展示这个场景类型是模态segue。

更改segue的类型

1.在大纲视图或者画布中，选择从表视图控制器到添加待办事宜项视图控制器的segue。

2.在属性检查器中，选择类型选项旁边的弹出菜单中选择模态（Modal）。

因为模态视图控制器不会添加到导航栈，它不会从表视图控制器的导航控制器获得一个导航条。但是，你想保持导航条支持用户的视觉连续性。想要在显示的时候，给添加待办事宜项视图控制器一个形式上的导航条，把它嵌入到它自己的导航控制器。

添加一个导航控制器到添加待办事宜项视图控制器

1.在大纲视图中选择视图控制器。

2.在视图控制器被选择的状态下，选择Editor > Embed In > Navigation Controller。

和之前一样，Xcode添加一个导航控制器和在视图控制器顶部显示一个导航条。接下来，配置这个条来添加一个标签给这个场景以及两个按钮，取消和完成。之后，你将连接这两个按钮到动作。

配置导航条到添加待办事宜项视图控制器

1.在大纲视图或者画布中，选择视图控制器下的导航项。如果有必要，打开属性检查器。

2.在属性检查器中，在标题字段输入Add To-Do Item。
Xcode更改对视图控制器的描述，这个视图控制器是从“View Controller”到“View Controller – Add To-Do Item”，来让它更容易识别场景。这描述显示在大纲视图中。

3.从对象库拖拽一个条按钮到在add-to-do-item视图控制器中的导航条的右侧。

4.在属性检查其中，选择从标识选项旁边的弹出菜单中的Done。
按钮的文本会变为“Done”。

5.从对象库中拖拽另一个条按钮项到 add-to-do-item视图控制器总的导航条的左侧。

6.在属性检查器中，选择标识选项旁边的弹出菜单的Cancel。
按钮的文本会变为“Cancel”。

Checkpoint: 点击Add按钮。你还看到添加项目的的场景，但是没有返回到待办事宜清单的返回导航按钮，你弹道的是两个你添加的按钮，Done和Cancel。这两个按钮还没有连接任何动作，所以你能点击它们，但是它们没有任何动作。配置这些按钮来完成或取消编辑一个新的待办事宜项。

Create Custom View Controllers

创建自定义视图控制器

你已经完成了所有的无需编程的配置。但是想要配置完成add-to-do-item视图控制器需要一些代码，你需要有一个地方来存放它。现在Xcode已经配置了add-to-do-item视图控制器和表视图控制器作为通用的视图控制器。想要有一个地方来自定义代码，你需要创建每个视图控制器的子类，然后配置接口到这些子类。

首先，你将解决add-to-do-item视图控制器场景。自定义视图控制器类将被称为XYZAddToDoItemViewController，因为这个视图控制器将控制这个为你的待办事宜清单添加新的项目的场景。

创建UIViewController子类

1.选择 File > New > File (按 Command+N).

2.在左边出现的对话框中，在iOS下选择Cocoa Touch。

3.选择Objective-C类，并且点击Next。

4.在Class字段，在前缀XYZ后面输入AddToDoItem。

5.在“Subclass of”弹出菜单里选择UIViewController。
类标题改为“XYZAddToDoItemViewController.” Xcode帮助你明确命名，你创建了一个自定义的视图控制器。

6.确保“Targeted for iPad” 和 “With XIB for user interface”选项没有被选中。

7.点击Next。

8.在默认位置保存你的项目。

9.组选项默认为应用程序名字，ToDoList。

10.Targets 区域在默认状态下是不选中的。

11.点击创建。

现在，你创建了一个自定义的视图控制器子类，你需要告诉故事板来使用你的自定义类来替换通用视图控制器。故事板文件是在app运行的时候被使用的对象的配置。app机器足够聪明来为你把一般视图控制器替代为你自定义的视图控制器，但你需要告诉故事板这是你想要的。

确定你的类作为场景的视图控制器

1.在工程导航器中选择 Main.storyboard.

2.如有必要，打开大纲视图 .

3.在大纲视图中，选择 “View Controller – Add To-Do Item”视图控制器。
点击 “View Controller – Add To-Do Item” 旁边的三角形来显示你的场景中的对象。第一个应该是视图控制器。点击它来选择它。注意这个场景行有不同的图标。

4.视图控制器选择，在工具区打开标识检查器
标识检查器在当你点击工具区从左开始的第三个按钮的时候出现。它让你编辑在故事板中对象的属性，例如什么类。

5.在身份检查器中，打开Class选项旁边的弹出按钮。
你将看到一个Xcode知道的所有视图控制器的类的列表。在列表中最近一个应该是你自定义的视图控制器XYZAddToDoItemViewController。选择它来告诉Xcode要在这个场景使用你的视图控制器。

运行时，你的故事板将创建一个XYZAddToDoItemViewController的实例来代替通用的UIViewController。注意Xcode把对add-to-do-item视图控制器场景的描述从 “View Controller – Add To-Do Item”改变为“Add To Do Item View Controller – Add To-Do Item.”Xcode指导你现在为这个场景使用的是自定义的视图控制器，并且它解释自定义类的名字，以便它更容易理解故事板中正在进行是什么。

现在，为表视图控制器做相同的事情。

创建一个UITableViewController的子类

1.选择 File > New > File (或按 Command+N).

2.在左边，选择iOS下的Cocoa Touch，然后选择Objective-C Class。如果你还没有在本教程自最近的步骤创建任何类的话，他或许已经为你选择好了。

3.点击 Next.

4.在Class字段，键入ToDoList。注意Xcode在XYZ，你的类的前缀，和ViewController之间作为插入点，键入名字。

5.在 “Subclass of”的弹出菜单中选择UITableViewController。

6.确定“Targeted for iPad” 和 “With XIB for user interface”没有被选中。

7.点击 Next.
保存到默认位置。

8.Group保持默认的app的名字。

9.Targets 区域在默认状态下是不选中的。

10.点击 Create.

再一次确定你配置的自定义表视图控制器XYZToDoListViewController在故事板中。

配置故事板

1.在工程导航器中选择 Main.storyboard.

2.如果有必要，打开大纲视图

3.在大纲视图中，选择表视图控制器并在工具区打开身份检查器

4.在身份检查器中，从Class选项旁边的弹出菜单中选择XYZToDoListViewController

现在，你已经准备好添加自定义代码到你的视图控制器了。

Unwind a Segue to Navigate Back

展开Segue到Navigate Back

除了push和modal的segues，Xcode还提供了unwind segue。这个segue允许用户从给定的场景返回之前的场景，并且它为你的代码提供位置，这个代码是当用户在这些场景间进行导航的时候要被执行的。你可以使用unwind segue 来把XYZAddToDoItemViewController返回到XYZToDoListViewController。

Unwind segue是通过添加一个方法到目标视图控制器来创建的（这个视图控制器是你想让unwind做的）。方法能被unwound不需要返回一个动作 (IBAction)，并且故事板的segue(UIStoryboardSegue)要作为参数。因为你想要unwind back 到XYZToDoListViewController，你需要添加一个带有XYZToDoListViewController格式的实现的动作方法。

unwind back 到XYZToDoListViewController

1.在工程导航器中打开 XYZToDoListViewController.m.

2.在 @implementation 行下面添加如下代码:

.-(IBAction)unwindToList:(UIStoryboardSegue*)segue

.

.{

.

.

.

.}

3.

4.

你可以为unwind动作随意命名。称之为unwindToList：可以清楚的表明unwind将带你到何处。为了工程的今后，采取类似命名约定，一个名字能够清楚的表明unwind将你带往何处。

现在，离开这这个空的实现方法。稍后你将使用这个方法来检索从XYZAddToDoItemViewController来的数据来添加一个项目到你的to-do-list。

创建unwind segue，将Cancel和Done按钮连接到unwindToList: 动作，通过源视图控制器XYZAddToDoItemViewController里的dock中的Exit图标。

连接按钮到unwindToList: action

1.在工程导航器中选择 Main.storyboard.

2.在画布中，从Cancel按钮Control+拖拽到add-to-do-item场景dock中Exit项目。
如果你在场景dock中没有看到Exit项目，但看到场景描述，点击按钮直到你看见它。
在拖动结束的位置出现一个菜单。

3.在快捷菜单中选择unwindToList：。
这是你刚才添加到XYZToDoListViewController.m文件中的动作。这意味着当Cancel按钮被点击的时候，segue将unwind并且这个方法将被调用。

4.在画布中，Control+拖拽，从Done按钮到场景dock中的Exit项目。

5.从快捷菜单中选择 unwindToList:。

注意，你为Cancel和Done按钮使用相同的方法。在下一个教程中，你将区别这两种不同的情况，当你在写处理unwind segue的方法的时候。

Checkpoint: 运行app。启动后，你将看到一个表视图，但这里没有数据。你能点击Add按钮并从XYZToDoListViewController导航到XYZAddToDoItemViewController。你能点击Cancel和Done按钮来返回到表视图。

那么为什么你不能显示数据？表示图有两种途径来获得数据，静态和动态。当表视图的控制器实现请求的UITableViewDataSource方法，表视图请求它的视图控制器来显示数据，不管静态数据在IB中是否已经被配置。如果你查看XYZToDoListViewController.m，你将注意到三个实现方法——numberOfSectionsInTableView:, tableView:numberOfRowsInSection:, 和 tableView:cellForRowAtIndexPath:。你能通过把这三个方法添加注释来重新显示静态数据。如果喜欢你可以继续尝试。

Recap

回顾

至此，你完成了app界面的开发。你有了两个场景——一个用来添加项目到待办事宜清单，另一个显示这个清单——并且你能在他们之间进行导航。接下来，你将实现添加待办事宜项目和显示这个清单的功能。在下个模块中会覆盖数据操作和行为实现。

Defining the Interaction

Incorporating the Data

Copyright 2014 Apple Inc. All rights reserved. Terms of Use | Privacy Policy | Updated: 2013-10-22