iOS9 Learn more every day 3 :: Storyboard References

[[142029]]

If you have ever used interface builder to create a complex, multi-screen app, you will understand how big those Storyboards can get. They can quickly become unmanageable and hinder your progress. Since the introduction of Storyboards, it is actually possible to separate different modules of your app into different Storyboards. In the past, this required manually creating multiple Storyboard files and writing a lot of code.

To solve this problem, Apple introduced the concept of Storyboard References in iOS 9. Storyboard References allow you to reference viewControllers in other storyboards from a segue. This means you can keep different features modular, while keeping your Storyboards smaller and easier to manage. Not only is it easier to understand, but it also makes merging easier when working with a team.

Simplify Storyboard

To demonstrate how Storyboard References work, let's take an existing app and try to simplify its structure. The app in question has been uploaded to Github if you want to follow along and see the best results. The file named OldMain.Storyboard is our original file. It is only referenced in this project, and we are not using it. If you want to follow along from scratch, delete all other storyboards and change the OldMain.Storyboard file to Main.Storyboard.

The screenshot below shows what the original Storyboard looks like.

As you can see, we use a TabBarController as the initial viewController. This TabBarController has three navigationControllers, each corresponding to a different root viewController. The first is a tableViewController with a list of contacts, and the second is also a tableViewController, a list of favorite contacts. Both of these are linked to a detail page viewController. The third navigationController includes more information, an account details page, a feedback page, and an about page.

Although the app is far from complex, this Storyboard is already quite large. We see at least 10 viewControllers and we know that it will quickly become difficult to manage. Now we can break them down, but where do we start? In this example, we have three different modules. We can clearly identify them on the tabBarController.

We start with the simplest one. On the right side of Main.storyboard, you can see this viewController that provides more information for the application. It is separate and not linked to other viewControllers.

What we have to do is select them by dragging (highlighting them), then click on the Xcode menu bar and select "Editor->Refactor to Storyboard".

Name this storyboard More.storyboard and click Save. More.storyboard will be automatically added to the app and opened.

You can see that the storyboard has been created successfully. At this point, if you return to Main.storyboard you can see that one of the viewControllers in the tabBarController has changed to a reference to the storyboard.

Great! We have separated a whole part of the UI into another storyboard. Not only does it separate the modules, but it can also be reused in other places. Although it is not needed in our example, it is a very useful and valuable new feature.

#p#

Now we have to separate the other modules, which is a little more complicated than the previous step, because in fact the two parts are linked to the same viewController. Both TableViews display the contact details page through a segue. What can you choose to do?

• Keep the viewController in Main.storyboard
• Refactor the viewController to its own storyboard

Both options are fine, I personally prefer to separate them. So select the detail viewController and click on the Xcode menu "Editor->Refactor to Storyboard". Give the new storyboard a name and save it. This will create and open a new storyboard. It will be linked to the tableViewController of the contact page and the favorite contact page.

Now go back to Main.storyboard, select the navigation and contacts tableViewController, and create them as new storyboard references. Do the same for the favorites viewController. Here is the result.

We split Main.storyboard into 5 storyboards in our project.

• Main.storyboard contains a tabBarController and three controllers that link to other storyboards.
• Contacts.storyboard A navigation bar and a tableViewController that links to ContactDetails.storyboard when a row is tapped
• Favorites.storyboard A navigation bar and a tableViewController that links to ContactDetails.storyboard when a row is tapped
• ContactDetail.storyboard A separate viewController that displays contact details and can be linked to the Contact and favorite storyboards
• More.storyboard includes a viewController that displays more information about the app.

This refactoring makes our storyboard more modular and component-based, which can help us develop the application better later.

Open a specific viewController from the Storyboard Reference

So far, we’ve only shared how to create and display a storyboard reference from a storyboard segue, but haven’t shown how to add a storyboard manually without using the refactoring tool.

Suppose we want to add an "account" button in the upper right corner of the contact page. Clicking this button can quickly go to the account page to view more information without going to the settings page to click.

Open Contacts.Storyboard, drag a UIBarButtonItem to the navigation bar of tableViewController, and set the title to "Account". Then, find the "Storyboard Reference" control and drag one to the Contacts Storyboard. And open the attributes inspector panel.

Select the Storyboard property to “more” and set the Referenced ID property to “accountViewController.” This allows us to reference the account information screen view controller instead of linking to the initial view controller in the more storyboard.

Select the “account” button, hold down the Control key and the left mouse button, and drag it to the storyboard reference to create a segue.

The last step is to set the identifier of accountViewController. Open More.storyboard, select accountViewController, open the identity inspector and set the Storyboard ID to “accountViewController”. This way, when you click the account button, you will be redirected to the account details page.

As you can see, adding Storyboard Reference, whether through the refactoring tool or manually, is very simple, direct, and effective. It allows you to create more componentized, reusable, and modular applications. ***, the final result of this guide can be viewed on Github.

Further reading

To learn more about Storyboard References in Xcode 7, watch session 215. What's New in Storyboards from WWDC 2015. The first 20 minutes are devoted to Storyboard References.

This is a series of articles. Please go to the catalog page to see more.