（译）Getting Started——1.2.4 Tutorial：Storyboard（故事板）

    该教程是基于你在前面的课程中构建的项目上进行的。学完本教程后，你将使用你前面学到的视图、视图控制器、动做、导航的内容，还会为应用建立一些关键的用户界面，并在场景中添加行为

    如下就是本节课的内容：

    1. 使用storyboard来定义应用内容和流程

    2. 管理多个视图控制器

    3. 在用户界面上，给元素添加动做

    完成本节教程后，你的应用应该以下所示：

建立第二个场景

    到如今为止，你所操做的只是一个由视图控制器管理的单场景，它就是一个能够把事件添加到待办事件列表的页面，即添加事件的场景。如今，是时候建立列表了。幸运的是，IOS已经内置了一个功能强大的类：table view（UITableView），该类用于显示能够滚动的列表项。

    在storyboard的场景中添加表格的步骤：

    1. 在项目导航器中，选择Main.storyboard。若是项目导航器被关闭了，点击Xcode toolbar上的Navigator按钮就能够打开它：

    若是助手编辑器是打开的，那么点击Standard按钮就能够关闭它。

    2. 在utility区域打开对象库。

    3. 在对象库的搜索框中，输入table view controller，快速找到该对象。

    4. 从列表中把一个Table  View Controller对象拖动到画布上。若是有须要，你可使用菜单：Editor > Canvas > Zoom，对场景进行缩小。若是当你试图把一个table view拖动到画布上来，可是没有拖动成功时，你颇有可能拖动的是table view，而不是table view controller。

    如今，storyboard中已经有两个场景了，一个用于显示待办列表，一个用于添加待办事项：

    当用户打开应用时，应该先看到待办列表，所以，你能够把table view controller设置为开始场景，具体的作法是：

    把添加事件场景前的入口点拖动放到待办列表的场景前。

    如今，table view controller被设置为初始的视图控制器了，它做为应用启动后加载的第一个场景。

    注意：如今你运行项目，你看到的应该是一个空的table view——即页面被水平线分隔为一行一行，可是每一行上没有任何内容。

在table view中显示静态的内容

    由于你尚未学习数据的存储，所以，如今建立和存储要在列表上显示的数据还为时过早。可是，你的界面上也是不非得须要真实的数据。Xcode中，你能够给Interface Builder中的table view建立一些静态的内容。这样的方式去看界面长什么样子，就简单省事多啦，你还可使用这种办法来尝试更多的想法哦。

    在table view中建立静态单元格：

    1. 若是有须要，打开outline view

    2. 在outline view中，选择位于Table view controller下方的Table view

    3. 选中table view，打开utility区域的Attributes inspector

    4. 在Attributes inspector中，在Content option的弹出菜单中，选择 Static Cells。在storyboard中的table view中会出现空的三个表格单元格

    5. 在outline view中，选择最上面的单元格

    6. 在Attributes inspector中，在Style option弹出的菜单中，选择Basic。Basic样式中，包含了一个label，所以，Xcode会在单元格中建立一个label，label上的文字是Title。

    7. 选择outline view中的label：

    8. 在Attributes inspector中，把label的文本修改成“修剪草坪”。输入完成后，按下return键或在utility区域单击就能够看到效果。

    9. 或者，你也能够在label控件上双击对文本进行修改。

    10. 给其它两个单元格重复上述4~7步，输入其它的待办事项。

    11. 建立足够多的单元格（多于一页），建立的方式可使用复制、粘贴，也能够拖动。

    检查点：运行应用。你会看见你在Interface Builder中添加的东东，由于表格里的内容已经超过一屏了，你能够来回滚动感受下。在模拟器的屏幕上，你会发现表格里的内容仍然正常显示。使用table view，默认会有不少的行为。你确定注意到了：最上面的单元格已经盖住了设备的状态栏——也就是显示时间、电量和手机其它信息的区域。这是个问题，不过不用担忧，后面教程中会修复的。

添加segue来向前导航

    是时候给table view添加导航了，添加导航后，用户能够从列表页面跳转到上节教程中制做的添加待办事项的页面。咱们在Defining the Interaction（定义交互）章节中已经讲过，两个场景之间的转换被称做segue。

    在建立segue以前，须要对场景进行一番配置。首先，把table view controller包裹在navigation controller中。还记得Defining the Interaction（定义交互）章节讲到的内容吗？navigation controller会提供一个导航条，并保存了对导航栈的跟踪。接下来，将在导航条上添加一个按钮，用于跳转到添加待办事项的场景。

    在table view controller中添加navigation controller须要如下几个步骤：

    1. 在outline view中，选中Table view controller

    2. 选中table view controller，选择菜单：Editor > Embed In > Navigation Controller

    进行完上述操做后，Xcode就会给storyboard中添加一个新的navigation controller，给它设置storyboard的入口点，在新的navigation controller和已经存在的table view controller之间建立一个关系。

 

    在画布中，若是你选中链接两个场景的图标，你就会在outline view下方的navigation controller中看到relatioinship root view controller to table view controller的字样。这就意味着显示在导航条下的内容视图将是table view。storyboard的入口点被设置给了navigation controller，这是由于应用中全部显示的内容，都在navigation controller里。navigation controller既是待办列表场景的容器，又是添加待办事项场景的容器。

    检查点：运行应用。在table view的上面，你会看到一块额外的空间，它就是由navigation controller提供的导航条。导航条把它的背影扩展到了顶部的状态栏上了，所以，状态栏不会再遮盖你的内容了。

    接下来，要在导航条上添加一个待办列表的标题和一个添加待办的按钮。导航条从navigation controller中显示的视图控制器中获取标题——导航条本身是没有标题的。所以，你给待办列表的导航项（table view controller）添加标题，而不是直接给导航条添加标题。

    添加标题的步骤以下：

    1. 在outline view或在画布上，选中table view controller下的navigatioin item：

    2. 在attributes inspector的Title字段中，键入待办列表，而后单击return键。这时，Xcode会自动把该场景的描述由Table View Controller改变为待办列表，这样，你就更加方便去定位这个场景了。在outline view中显示的描述以下：

    3. 在对象库中，找到Bar Button Item对象。

    4. 拖动一个Bar Buttom Item对象，把它放置到table view controller中导航条的右边，这样，文字为Item的按钮就出面在导航条上了。

    5. 在outline view或在画布上，选中bar button item。

    6. 在attributes inspector中，在Bar Button Item节中找到Identifier选项，从它的弹出菜单中选择Add菜单。这时，按钮的样子就变为Add按钮了（+）。

    检查点：运行应用。这时，导航条应该有一个标题，并显示添加按钮。可是，点击按钮是没有任何反应的。

    使用添加按钮的意图是引出添加待办事项的场景。该场景已经在前面的教程中建立了，可是它尚未链接到其它的场景上。你须要配置添加按钮，使得当用户按下按钮时，页面能够跳转到添加待办事项的页面。为了实现上述效果，你应该这样作：

    1. 在画布上，选中添加按钮

    2. 按住Control，从按钮上一直拖动到添加待办事项的视图控制器

    在拖动结束的位置，会出现一个快捷菜单：

    Action Segue菜单可让你选择：当用户点击添加待办事项按钮时，你须要使用哪一种类型的segue，来从待办列表过渡到添加待办事项页面。

    3. 从Action Segue菜单中，选择show

    Xcode配置segue，设置在navigation controller中显示添加待办事项的视图控制器，在Interface Builder中，你将会看到导航条

    检查点：运行应用。点击添加按钮，页面就会从table view视图控制器导航到添加待办事项视图控制器。由于你使用了带有show segue的navigation controller，所以，系统为你把返回导航的操做给处理了。这就意味着若是你点击返回按钮，页面就会回到列表页面。

    你经过使用show segue获得的push-style类型的导航的效果与你想象的有所不一样。push navigation被设计为向下攥取的界面，在该界面上，你能够提供有关用户选择东东的更多信息。再者，添加操做通常是一个模态的操做——用户执行完整、独立的动做，而后从这个场景返回到主导航。这种类型场景恰当的展示方法应该是modal segue。

    不要删除已经存在的segue，也不要建立一个新的segue，把segue的类型改成modal就能够了。与storyboard中大多数可选的元素同样，你能够在Attributes inspector面板中添加segue的属性。

    改变segue类型：

    1. 在outline view或在画布上，选择从table view controller到添加待办事项的view controller的segue。

    2. 在Attributes inspector中，在segue选项的弹出菜单中，选择Present Modally。

    由于模态的视图控制器，没有被添加到导航栈中，所以，它不会从table view controller的navigation controller中得到导航条。可是，你可能会想在模态的视图控制器上也显示导航条，这样，会给用户一个统一的视觉效果，你能够这样作：当模态出现时，给添加待办事项的视图控制器添加一个导航条，把它嵌在本身的navigation controller中：

    给添加待办事项视图控制器添加导航控制器的作法：

    1. 在outline view中，选中View Controller

    2. 选择Editor > Embed In > Navigation Controller

    与前面讲过的同样，Xcode添加了一个导航控制器，并在view controller的最上面显示导航条。下面，给这个导航条配置一个标题和两个按钮：取消、保存。随后，再给这两个按钮添加事件。

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

    1. 在outline view或在画布上，选中view controller下的navigation item

    2. 在Attributes inspector的title字段里，键入添加待办事项文字。Xcode会自动把视图控制器场景的描述改变为添加待办事项场景，这样会让你定位起来更加方便，以下图所示：

    3. 从对象库中拖动一个Bar Button Item对象，把它放在添加待办事项视图控制器的右边

    4. 在Attributes inspector的Identifier选项中，从弹出菜单里选择Save，这时，按钮上的文本就变为Save

    5. 再从对象库中拖动一个Bar Button Item对象，把它放在添加待办事项视图控制器的左边    

    6. 在Attributes inspector的Identifier选项中，从弹出菜单里选择Cancel，这时，按钮上的文本就变为Cancel

    检查点：运行应用。单击新增按钮。你所看到的仍然是添加待办事项场景，可是，该场景再也不是导航条上有返回按钮的场景了，相反，你会看到你刚刚添加的两个按钮：Save和Cancel。如今，这两个按钮尚未连接到任何的动做上，所以你点击按钮时不会有任何的反应。接下来的任务就是：给这两个按钮配置完成或取消新增待办事项的编辑，而且返回到待办列表。

 

建立自定义的视图控制器

    到目前为止，一行代码都没有写，就已经完成了全部的配置。要完成添加待办事项视图控制器的配置，须要写一些代码，还要找个地方存放这些代码。

    项目建立成功后，响应添加待办事项视图控制器的代码就生成了，是在ViewController.h和ViewController.m文件中。这两个文件是自定义的视图控制器，做为Single View Application模板的一部分，在项目建立的同时一同被建立。可是，学习如何本身动手建立和配置视图控制器是很是重要的，由于这是IOS应用开发的经常使用功能。因此，如今须要建立一个名为AddToDoItemViewController的视图控制器，用于响应stroyboard中的添加待办事项的场景。AddToDoItemViewController是ViewController的子类，所以，在它里面能够获取到视图控制器全部的基本功能。

    若是你愿意的话，你甚至能够删除ViewController.h和ViewController.m文件，这是由于在这个教程中，它们根本没有做用。删除的方法是：在项目导航器中，选择要删除的文件，按下Delete键，在出现的对话框中，点击Move to Trash选项。

    建立自定义的视图控制器：

    1. 选择菜单：File > New > File，或者使用Command + N快捷键

    2. 在弹出的对话框的左边，在IOS节中选择Source

    3. 选择Cocoa Touch Class，单击下一步

    4. 在Class字段内，输入AddToDoItem

    5. 在Subclass的弹出菜单中，选择UIViewController，类的标题就变成AddToDoItemViewController了，Xcode这样命名的目的是为了看得更清楚一些。

    6. 确保Also create XIB file选项没有被勾选

    7. 确保Language选项选择的是Objective-C

    8. 点击Next按钮。文件默认的存储位置是在项目的目录中。Group选项默认是应用的名称。

    9. 保持其它选项的值为默认值，点击Create。

    完成上述步骤后，Xcode就建立了两个文件：AddToDoItemViewController.h（接口文件）和AddToDoItemViewController.m（实现文件）文件。

    这样，你就已经建立了自定义的视图控制器了，还有一步很重要，你得告诉storyboard去使用这个视图控制器：你得把添加待办事项场景由原来使用的ViewController换为AddToDoItemViewController。

    更换的方法：

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

    2. 若是须要，请打开outline view

    3. 在outline view中，在添加待办事项场景下，选中View Controller

    4. 在utility区域，单击第三个图标，打开Identity inspector

    indentity inspector可让你编辑storyboard中，与对象的identity相关的对象的属性，例如对象属于哪一个类。

    5. 打开Class选项的弹出菜单，弹出菜单中的内容是全部Xcode能够识别的视图控制器的列表。列表中的第一个元素应该就是你自定义的视图控制器：AddToDoItemViewController

    6. 为该场景选择使用AddToDoItemViewController

 

    注意：在outline view中，Xcode改变了添加待办事项视图控制器的描述，从View Controller变为添加待办事项。Xcode的这种做法使得自定义的类更容易被理解。

    在运行时，故事板会建立AddToDoItemViewController类的实例，即自定义视图控制器的子类。应用中添加待办事项的场景将获取storyboard中定义的界面和定义在AddToDoItemViewController.m中的行为。

    如今能够在故事板中建立一个响应待办列表场景的自定义类了。由于，待办列表场景是一个table view controller，所以，它的类是UITableViewController类的子类。一样，UITableViewController也提供了视图控制器的基本行为，还有一些只能被table view使用的行为。

    建立UITableViewController的子类：

    1. 选择菜单：File > New > File，或者使用Command + N快捷键

    2. 在左边IOS节下的Source中，选择Cocoa Touch Class

 

    3. 单击Next

    4. 在Class字段中，输入ToDoList

    5. 在Subclass of的弹出菜单中，选择UITableViewController，类的标题就变为ToDoListTableViewController了

 

    6. 确保Also create XIB file选项没有被勾选

    7. 确保Language选项选择的是Objective-C

    8. 点击Next按钮。文件默认的存储位置是在项目的目录中。Group选项默认是应用的名称。

    9. 保持其它选项的值为默认值，点击Create。

    完成上述步骤后，Xcode就建立了两个文件：ToDoListViewController.h（接口文件）和ToDoListViewController.m（实现文件）文件。

    为待办列表场景配置Identity：ToDoListViewController：

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

    2. 在outline view中，选择待办列表场景下的Table view controller，而后打开utility区域的Identity inspector面板

    3. 从Class选项的弹出菜单中，选择ToDoListViewController

    好了，能够给你本身的视图控制器添加代码了。

给返回的导航添Unwind Segue

    除了show和modal类型的segue，Xcode还提供了unwind类型的segue。该类型的segue，可让用户从指定的场景返回到前一个场景，而且，当用户返回到前一场景时，该类型的segue还为本身编写的代码提供了执行的地方。咱们要从AddToDoItemViewController返回到ToDoListViewController，就须要使用该类型的segue。

    要建立unwind类型的segue，首先，须要给目标视图控制器（即将要被展示的场景所使用的视图控制器）添加一个方法，该方法的类型必须是IBAcion，参数类型为UIStoryboardSegue。由于你想返回到待办列表场景，所以，你须要按照上述的要求在ToDoListViewController的接口和实现文件中添加方法。

    添加方法的步骤：

    1. 在项目导航器中，打开ToDoListViewController.h文件

    2. 在@interface的下方，添加下面的代码：

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

    3. 在项目导航器中，打开ToDoListViewController.m文件

    4. 在@implementation下方，添加下面的代码：

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

 

            }

    你能够把方法的名称命名为你喜欢的任意有效的名称。示例中的方法名是：unwindToList，这样命名的缘由是为了从方法的名称上就能够看出方法的做用。在后面的项目中，都会采用相似的命名约定。

    如今，这个方法的实现体是空的。随后，这个方法将被用于从AddToDoItemViewController中检索数据，而后把检索到的数据添加到待办列表中。

    要建立unwind segue，并把它连接到Cancel和Save按钮上。

    具体的作法是：

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

    2. 在画布上，按钮Control键，从Cancel按钮上一直拖动到画布顶部最右边的Exit按钮上：

    若是你在画布的最上边没有找到Exit按钮，而是找到了画布的描述，那你就不停的使用Editor > Canvas > Zoom菜单，直到你能看见为止。

    在拖动结束的地方，会出现一个菜单：

    3. 从快捷菜单中，选择unwindToList。

    4. 这就是你刚刚添加到ToDoListTableViewController.m文件里的动做。如今，若是用户点击Cancel按钮，那么，应该就会回到待办列表页面。这时，unwindToList方法被调用。

    5. 在画布上，按住Control键，从Save按钮拖动到Exit按钮。

    在拖动结束的地方，会出现一个菜单：

    6. 在快捷菜单中，选择unwindToList

    如今，当用户点击Save按钮时，页面就会跳转到待办列表场景，同时，unwindToList方法被调用。

    注意：Save和Cancel两个按钮使用了一样的动做。在后面的教程中，将写代码来区分这两种不一样的状况。

    检查点：运行应用。刚启动完成，你会看见一个table view——可是里面没有数据。单击添加按钮，应用就会从待办列表页面跳转到添加待办事项页面。你能够点击添加待办事项页面的Save按钮或Cancel按钮，回到列表页面。

    数据为何不显示了？table view有两种获取数据的方式——静态、动态。若是table view的视图控制器已经实现了必须的方法：UITableViewDataSource，那么，table view数据来源就是视图控制器，而无论在Interface Builder中是否配置了静态数据。如今打开ToDoListTableViewController.m文件，你会在发现文件里已经实现了三个方法——numberOfSectionsInTableView，tableView:numberOfRowsInSection，tableView:cellForRowIndexPath。在后面的教程中，将使用这三个方法来显示动态数据。

回顾

    到如今为止，你已经完成了应用界面的开发。应用一共有两个场景——待办列表，添加待办事项，用户还能够在这两个页面之间来回导航。下一个模块，就要实现添加待办事项、浏览待办列表的能力。