iOS 9: Staying Organized with Storyboard References

Even though storyboards have been around since iOS 5, many developers are reluctant to use them in their projects. A typical remark is that storyboards are great for small projects, but fall short for larger projects.

Apple has taken this feedback to heart and resolved many common problems by introducing storyboard references. In this tutorial, I will show you what storyboard references are and how they can help you break down your project's user interfaces into manageable pieces.

即使storyboard在iOS 5就已经被使用了，但是许多开发人员还是不愿意在他们的项目中使用它们。一个典型的说法是，storyboard对于小项目是很不错的，但不足以满足大项目。

苹果已经吸纳了这种反馈，并且通过介绍通过storyboard references解决了许多常见的问题。在本教程中，我将向您展示storyboard references是什么，以及它们如何帮助您将项目的用户界面分解为可管理的部分。

1. The Problem

From a designer's perspective, storyboards are great. They are a visual representation of a project's user interface. Interface Builder makes adding and connecting scenes a breeze. Unfortunately, storyboards also have a number of drawbacks.

从设计师的角度来看，storyboard是伟大的。它们是项目用户界面的可视化表示。 Interface Builder使添加和连接场景变得轻而易举。不幸的是，storyboard也有一些缺点。

Complexity

Most projects have one storyboard that contains the application's user interface. That's the goal of storyboards. Right? Yes and no. It's true that the goal of storyboards is to visually lay out the user interface. The problem is that storyboards can quickly become unwieldy and complex for larger projects.

大多数项目有一个storyboard包含应用程序的用户界面。这是storyboard的目标。对？是和否。的确，storyboard的目标是在视觉上展示出用户界面。问题是，故事板可能很快变得笨重和复杂的大型项目。

Source Control

Another hurdle when working with storyboards is collaboration. Storyboards can make collaborating with team members a true challenge. A storyboard is stored as one file. This means that every change you or a team member makes to a storyboard affects the same file. At some point, this will inevitably lead to merge conflicts. This is less of a problem when working with XIB files since each XIB file represents one scene of the user interface.

使用storyboard的另一个障碍是协作。storyboard可以让团队成员的协作成为一个真正的挑战。storyboard存储为一个文件。这意味着您或团队成员对storyboard的每个更改都会影响同一个文件。在某些时候，这将不可避免地导致合并冲突。这在使用XIB文件时不是一个问题，因为每个XIB文件表示用户界面的一个场景。

2. The Solution

Before iOS 9

The solution is simple, breaking up storyboards into a set of smaller storyboards. But how do you connect the storyboards? Before iOS 9, developers would connect storyboards in code by loading the storyboard and invoking instantiateInitialViewController() on the storyboard. The following code snippet shows how this works.

解决方案很简单，将storyboard分解成一组更小的storyboard。但是你怎么连接storyboard呢？在iOS 9之前，开发人员通过加载storyboard并在storyboard上调用instantiateInitialViewController（）来连接故事板。以下代码段显示了代码是如何实现的。

1 2 3 4 5 6

let storyboard = UIStoryboard(name: "DetailView" , bundle: NSBundle.mainBundle()) let viewController = storyboard.instantiateInitialViewController()   if let viewController = viewController {      self.presentViewController(viewController, animated: true , completion: nil) }

It forces developers to make the connection in code, making it unclear how multiple storyboards are connected. It's not obvious how one storyboard is connected to another storyboard. Let's see how storyboard references solve these problems in iOS 9.

它迫使开发人员在代码中建立连接，使得程序员不清楚多个storyboard该如何连接。一个storyboard如何连接到另一个storyboard是不明显的。让我们看看在iOS 9 storyboard references如何解决这些问题。

iOS 9

Storyboard references are a great addition to the storyboard toolchain. In Interface Builder, the destination of a segue can now also be another storyboard. What's more, a storyboard can be referenced multiple times, making it easy to reuse storyboards in multiple places. Let's create a simple project to show you how easy it is to get started with storyboard references.

Storyboard references 是storyboard工具链的一个很好的补充。在Interface Builder中，segue的目的地现在也可以是另一个storyboard。此外，storyboard可以被多次引用，使其易于在多个地方重用storyboard。让我们创建一个简单的项目，告诉你开始使用storyboard references有多么容易。

3. Project Setup

Instead of starting with a sample project, I'm going to show you how to use storyboard references from scratch. Before you continue, make sure that you have Xcode 7 installed. Storyboard references are only available in iOS 9, which requires Xcode 7.

从一个示例项目开始，我将告诉你如何从头开始使用storyboard references。在继续之前，请确保已安装Xcode 7。storyboard references仅在iOS 9中可用，这需要Xcode 7。

Open Xcode 7 and create a new project by choosing New > Project... from Xcode's File menu. Select the Tabbed Application template from the iOS > Application section on the left.

打开Xcode 7并通过从Xcode的文件菜单中选择新建>项目...创建一个新项目。从左侧的iOS>应用程序模板。

Configure the project by giving it a name and setting Devices to iPhone. For this tutorial, it doesn't matter whether you set Language to Swift or Objective-C. Tell Xcode where it should store the project and hit Create.

通过给它一个名称和设置设备到iPhone配置项目。对于本教程，无论是将Language设置为Swift还是Objective-C都没有关系。告诉Xcode它应该存储项目，并点击创建。

If you're new to storyboards, then you may be surprised that Xcode has created two storyboards for us. Main.storyboard is the project's main storyboard and contains the application's user interface. LaunchScreen.storyboard is a storyboard that Xcode uses to dynamically create a launch screen for the application. We won't be using LaunchScreen.storyboard in this tutorial.

如果你是第一次用storyboard，那么你可能会惊讶，Xcode已经为我们创造了两个storyboard。 Main.storyboard是项目的主要storyboard，包含应用程序的用户界面。 LaunchScreen.storyboard是Xcode用于动态创建应用程序的启动屏幕的storyboard。我们不会在本教程中使用LaunchScreen.storyboard。

4. Creating the User Interface

Our storyboard currently contains a tab bar controller and two view controllers. Let's make it a bit more interesting by embedding the view controllers in a navigation controller. Select the top view controller and select Embed In > Navigation Controller from Xcode's Editor menu. Do the same for the second view controller. This is what your storyboard should now look like.

我们的storyboard目前包含一个标签栏控制器和两个视图控制器。让我们通过将视图控制器嵌入到导航控制器中使它更有趣。选择顶视图控制器，并从Xcode的编辑器菜单中选择嵌入>导航控制器。对第二个视图控制器执行相同操作。这是你的storyboard现在应该是什么样子。

Even though the storyboard isn't complicated, it contains enough complexity to show you how storyboard references work and how they can benefit your projects. It's time for some refactoring.

即使storyboard 看起来不复杂，它还是包含足够的复杂性，以显示storyboard references 如何工作，以及它们如何能够使您的项目受益。现在是一些重构的时候了。

5. Refactoring Storyboards

When a project's code base becomes unwieldy or too complex to maintain, it is time for refactoring. Refactoring simply means reorganizing or restructuring the code base to make it easier to maintain. This often includes breaking up large chunks of code into smaller bits, modularizing the code base.

当项目的代码库变得笨重或太复杂而不能维护时，是重构的时候了。重构只是意味着重新组织或重组代码库，以便更容易维护。这通常包括将大块代码分解成更小的位，模块化代码库。

While storyboards are a great tool to create user interfaces, storyboards can also become too complex or too large to maintain. In iOS 9, a storyboard can be split up into multiple smaller storyboards. Apple refers to this process as refactoring.

虽然storyboard是创建用户界面的一个很好的工具，storyboard也可能变得太复杂或太大而无法维护。在iOS 9中，storyboard可以拆分成多个更小的storyboard。苹果将​​这个过程称为重构。

Because each view controller of the tab bar controller can be seen as a separate user interface, it makes sense to put each tab of the tab bar controller into a separate storyboard. This is very easy in Xcode 7.

因为选项卡栏控制器的每个视图控制器可以看作是一个单独的用户界面，所以将选项卡栏控制器的每个选项卡放入单独的storyboard是有意义的。这在Xcode 7中很容易。

Start by selecting the top view controller and its navigation controller. From Xcode's Editor menu, choose Refactor to Storyboard. Xcode will ask you to name the storyboard it's about to create for the selection you've made. Name the storyboard FirstTab.storyboard and click Save.

首先选择顶视图控制器及其导航控制器。从Xcode的编辑器菜单中，选择重构到storyboard。 Xcode会要求你命名它为你所做的选择创建的storyboard。将storyboard命名为FirstTab.storyboard，然后单击保存。

Xcode will create a new storyboard that includes the navigation controller and its root view controller. In this storyboard, the navigation controller automatically becomes the initial view controller of the storyboard as you can see in the below screenshot.

Xcode将创建一个包含导航控制器及其根视图控制器的新storyboard。在这个storyboard中，导航控制器自动成为故事板的初始视图控制器，您可以在下面的屏幕截图中看到。

Note that Main.storyboard has become much simpler. The navigation controller and its root view controller have been replaced by a storyboard reference named FirstTab. If you double-click the storyboard reference, Xcode will automatically open FirstTab.storyboard, the storyboard it references.

注意Main.storyboard变得更简单了。导航控制器及其根视图控制器已被名为FirstTab的故事板引用替代。如果你双击storyboard reference，Xcode将自动打开FirstTab.storyboard，它引用的storyboard。

6. Exploring Storyboard References

Storyboard references are quite powerful. A storyboard reference will by default instantiate the initial view controller of the referenced storyboard, but it is possible to link to any scene in the storyboard that has a Storyboard ID.

Storyboard references 相当强大。Storyboard references 将默认实例化所引用storyboard的初始视图控制器，但是可以链接到storyboard中具有storyboard ID的任何场景。

Create a new UIViewController subclass and name it ThirdViewController. Open FirstTab.storyboard and drag a new view controller from the Object Library on the right. From the Object Library, add a label to the view of the new view controller and set its text to Third View. With the new view controller selected in the storyboard, set Class to ThirdViewController and Storyboard ID to ThirdView in the Identity Inspector on the right.

创建一个新的UIViewController子类，并将其命名为ThirdViewController。打开FirstTab.storyboard并从右侧的对象库中拖动一个新的视图控制器。从对象库中，向新视图控制器的视图添加一个标签，并将其文本设置为第三视图。在storyboard中选择新的视图控制器，在右侧的Identity Inspector中将Class设置为ThirdViewController，将Storyboard ID设置为ThirdView。

Head back to Main.storyboard and select the storyboard reference you created earlier. Open the Attributes Inspector on the right to see the attributes of the storyboard reference. The Attributes Inspector shows us that the storyboard reference references the FirstTab storyboard. The Referenced ID is empty at the moment.

回到Main.storyboard并选择您之前创建的storyboard reference。打开右侧的Attributes Inspector，查看storyboard reference的属性。属性检查器向我们显示storyboard reference引用FirstTab storyboard。此时参考ID为空。

Set Referenced ID to ThirdView and you'll see that the storyboard reference updates its label to reflect the change. Run the application in the iOS Simulator to see the result. This illustrates that you can use storyboard references to link to any scene in a storyboard, even if the scene isn't connected by a segue with other scenes in the storyboard.

将引用的ID设置为ThirdView，您会看到storyboard reference 更新其标签以反映更改。在iOS模拟器中运行应用程序以查看结果。这说明您可以使用storyboard reference 链接到storyboard中的任何场景，即使场景没有与storyboard中的其他场景连接。

Note that we can also specify the bundle of the referenced storyboard. This is especially useful if you need to link to a scene in a storyboard of an external framework.

注意，我们还可以指定引用的storyboard的bundle。如果您需要链接到外部框架的storyboard中的场景，这将非常有用。

Before we continue our exploration of storyboard references, I'd like to point out that the storyboard of a storyboard reference can be the same storyboard to which the reference belongs. This may sound strange, but it can be very useful if you want to reuse certain scenes in a storyboard or if you're working with a very complex storyboard.

在我们继续探索storyboard references之前，我想指出，storyboard references的storyboard可以是引用所属的storyboard。这可能听起来很奇怪，但是如果你想在一个storyboard中重用某些场景，或者如果你使用一个非常复杂的storyboard，它可能是非常有用的。

7. Adding Storyboard References

We've created FirstTab.storyboard by choosing Refactor to Storyboard from Xcode's Editor menu. Storyboard references are also available from the Object Library. Open the Object Library on the right and add a storyboard reference to Main.storyboard.

我们通过从Xcode的编辑器菜单中选择Refactor to Storyboard创建了FirstTab.storyboard。也可以从对象库中获得storyboard reference。打开右侧的对象库，并向Main.storyboard添加一个storyboard reference。

Select the tab bar controller in the storyboard and create a segue to the storyboard reference by holding Control and dragging to the new storyboard reference.

选择storyboard中的选项卡栏控制器，并通过按住Control并拖动到新的storyboard参考来创建storyboard reference 的segue。

From the menu that appears, choose view controllers from the Relationship Segue section.

从出现的菜单中，从关系段中选择视图控制器。

Select the new storyboard reference and set Storyboard ID to FirstTab. Run the application in the iOS Simulator to see the result. Note that the second tab of the tab bar controller shows the third view controller while the third tab shows the first view controller embedded in a navigation controller.

选择新的storyboard reference ，并将storyboard ID设置为FirstTab。在iOS模拟器中运行应用程序以查看结果。注意，标签栏控制器的第二标签显示第三视图控制器，而第三标签显示嵌入导航控制器的第一视图控制器。

Conclusion

Storyboard references are powerful. Not only do they make storyboards manageable and modular, they make it very easy to reuse storyboards and even hook into storyboards at arbitrary places.

Storyboard references 是强大的。不仅他们使storyboard可管理和模块化，它们使它很容易重用storyboard，甚至钩在storyboard在任意地方。

I strongly believe that storyboard references will result in a much higher adoption rate of storyboards by developers. Storyboard references are exactly what developers have been asking for.

我坚信，storyboard references将导致开发人员更多的storyboard采用率。storyboard reference正是开发人员一直要求的。