本节书摘来自异步社区《iOS 9 开发指南》一书中的第6章，第6.4节 Interface Builder中的故事板——Storyboarding，作者 管蕾，更多章节内容可以访问云栖社区“异步社区”公众号查看

6.4 Interface Builder中的故事板——Storyboarding
iOS 9 开发指南
图片 23 知识点讲解：光盘:视频知识点第6章Interface Builder中的故事板——Storyboarding.mp4
Storyboarding（故事板）是从iOS 5开始新加入的Interface Builder（IB）的功能。其主要功能是在一个窗口中显示整个APP（应用程序）用到的所有或者部分的页面，并且可以定义各页面之间的跳转关系，大大增加了IB便利性。

6.4.1　推出的背景
Interface Builder是Xcode开发环境自带的用户图形界面设计工具，通过它可以随心所欲地将控件或对象（Object）拖曳到视图中。这些控件被存储在一个XIB（发音为zib）或NIB文件中。其实XIB文件是一个XML格式的文件，可以通过编辑工具打开并改写这个Xib文件。当编译程序时，这些视图控件被编译成一个NIB文件。

通常，NIB是与ViewController相关联的，很多ViewController都有对应的NIB文件。NIB文件的作用是描述用户界面、初始化界面元素对象。其实，开发者在NIB中所描述的界面和初始化的对象都能够在代码中实现。之所以用Interface Builder来绘制页面，是为了减少那些设置界面属性的重复而枯燥的代码，让开发者能够集中精力在功能的实现上。

在Xcode 4.2之前，每创建一个视图会生成一个相应的XIB文件。当一个应用有多个视图时，视图之间的跳转管理将变得十分复杂。为了解决这个问题，Storyboard便被推出。

NIB文件无法描述从一个ViewController到另一个ViewController的跳转，这种跳转功能只能靠手写代码的形式来实现。相信很多人都会经常用到如下两个方法。

-presentModalViewController:animated。
-pushViewController:animated。

随着Storyboarding 的出现，使得这种方式成为历史，取而代之的是 Segue [Segwei]。Segue 定义了从一个ViewController到另一个ViewController的跳转。我们在IB中，已经熟悉如何连接界面元素对象和方法（Action Method）。在Stroyboard中，完全可以通过Segue将ViewController连接起来，而不再需要手写代码。如果想自定义Segue，也只需写 Segue的实现即可，而无需编写调用的代码，Storyboard 会自动调用。在使用Storyboard机制时，必须严格遵守MVC原则。View与Controller需完全解耦，并且不同的Controller之间也要充分解耦。

在开发iOS应用程序时，有如下两种创建一个视图（View）的方法。

在Interface Builder中拖曳一个UIView控件：这种方式看似简单，但是会在View之间跳转，所以不便操控。
通过原生代码方式：需要编写的代码工作量巨大，哪怕仅仅创建几个Label，就得手写上百行代码，每个Label 都得设置坐标。为解决以上问题，从iOS 5开始新增了Storyboard 功能。
Storyboard是Xcode 4.2 自带的工具，主要用于iOS 5以后的版本。早期的InterfaceBuilder 所创建的View中，各个View之间是互相独立的，没有相互关联，当一个应用程序有多个View 时，View 之间的跳转很复杂。为此Apple 为开发者带来了Storyboard，尤其是导航栏和标签栏的应用。Storyboard简化了各个视图之间的切换，并由此简化了管理视图控制器的开发过程，完全可以指定视图的切换顺序，而不用手工编写代码。

Storyboard 能够包含一个程序的所有的ViewController以及它们之间的连接。在开发应用程序时，可以将UI Flow作为Storyboard 的输入，一个看似完整的UI在Storyboard中唾手可得。故事板可以根据需要包含任意数量的场景，并通过切换（segue）将场景关联起来。然而故事板不仅可以创建视觉效果，还让我们能够创建对象，而无需手工分配或初始化它们。当应用程序在加载故事板文件中的场景时，其描述的对象将被实例化，可以通过代码访问它们。

6.4.2　故事板的文档大纲
为了更加说明问题，我们打开一个演示工程来观察故事板文件的真实面目。双击光盘中本章工程中的文件Empty.storyboard，此时将打开Interface Builder，并在其中显示该故事板文件的骨架。该文件的内容将以可视化方式显示在IB编辑器区域，而在编辑器区域左边的文档大纲（Document Outline）区域，将以层次方式显示其中的场景，如图6-11所示。

本章演示工程文件只包含了一个场景：View Controller Scene。本书中讲解的创建界面演示工程在大多数情况下都是从单场景故事板开始的，因为它们提供了丰富的空间，让您能够收集用户输入和显示输出。我们将探索多场景故事板。

在View Controller Scene中有如下3个图标。

First Responder（第一响应者）。
View Controller（视图控制器）。
View（视图）。
其中前两个特殊图标用于表示应用程序中的非界面对象，在我们使用的所有故事板场景中都包含它们。

First Responder：该图标表示用户当前正在与之交互的对象。当用户使用iOS应用程序时，可能有多个对象响应用户的手势或键击。第一响应者是当前与用户交互的对象。例如，当用户在文本框中输入时，该文本框将是第一响应者，直到用户移到其他文本框或控件。
View Controller：该图标表示加载应用程序中的故事板场景并与之交互的对象。场景描述的其他所有对象几乎都是由它实例化的。第6章将更详细地介绍界面和视图控制器之间的关系。
View：该图标是一个UIView实例，表示将被视图控制器加载并显示在iOS设备屏幕中的布局。从本质上说，视图是一种层次结构，这意味着当您在界面中添加控件时，它们将包含在视图中。您甚至可在视图中添加其他视图，以便将控件编组或创建可作为一个整体进行显示或隐藏的界面元素。
通过使用独特的视图控制器名称/标签，还有利于场景命名。InterfaceBuilder自动将场景名设置为视图控制器的名称或标签（如果设置了标签），并加上后缀。例如给视图控制器设置了标签Recipe Listing，场景名将变成Recipe Listing Scene。在本项目中包含一个名为View Controller的通用类，此类负责与场景交互。

在最简单的情况下，视图（UIView）是一个矩形区域，可以包含内容以及响应用户事件（触摸等）。事实上，我们将加入到视图中的所有控件（按钮、文本框等）都是UIView的子类。对于这一点您不用担心，只是您在文档中可能遇到这样的情况，即将按钮和其他界面元素称为子视图，而将包含它们的视图称为父视图。

需要牢记的是，在屏幕上看到的任何东西几乎都可视为“视图”。当创建用户界面时，场景包含的对象将增加。有些用户界面由数十个不同的对象组成，这会导致场景拥挤而变得复杂。如果项目程序非常复杂，为了方便管理这些复杂的信息，可以采用折叠或展开文档大纲区域的视图层次结构的方式来解决。

6.4.3　文档大纲的区域对象
在故事板中，文档大纲区域显示了表示应用程序中对象的图标，这样可以展现给用户一个漂亮的列表，并且通过这些图标能够以可视化方式引用它们代表的对象。开发人员可以从这些图标拖曳到其他位置或从其他地方拖曳到这些图标，从而创建让应用程序能够工作的连接。假如我们希望一个屏幕控件（如按钮）能够触发代码中的操作。通过从该按钮拖曳到ViewController图标，可将该GUI元素连接到希望它激活的方法，甚至可以将有些对象直接拖放到代码中，这样可以快速地创建一个与该对象交互的变量或方法。

当在Interface Builder中使用对象时，Xcode为我们开发人员提供了很大的灵活性。例如可以在IB编辑器中直接与UI元素交互，也可以与文档大纲区域中表示这些UI元素的图标交互。另外，在编辑器中的视图下方有一个图标栏，所有在用户界面中不可见的对象（如第一响应者和视图控制器）都可在这里找到，如图6-12所示。