iOS 9 Storyboards Tutorial: What’s New in Storyboards?

Storyboards have been around since iOS 5 and have received lots of upgrades and new features since then, including unwind segues for reverse navigation, universal storyboards for both iPhone and iPad, and live rendering of views designed in code.

Xcode 7 brings new features for storyboards that let you do the following:

• Refactor a single storyboard into multiple storyboards and link them visually via storyboard references.
• Add supplementary views to a view controller using the scene dock.
• Add multiple buttons to a navigation bar, right from the storyboard itself!

In this iOS 9 storyboards tutorial, you’ll learn how to use storyboard references and supplementary views. You’ll be updating an app designed to help you with all those listable moments in life, whether it’s grocery shopping, packing your luggage for vacation, or a survival checklist for the impending zombie apocalypse! :]

To get the most out of this tutorial you should have some basic storyboard and table view knowledge. Need a quick brush-up? Check out our Storyboards Tutorial in iOS 9.

Getting started

Download the starter project for this tutorial and run it in the simulator; tap one of the displayed checklists to view the items contained within, then tap any entry to check it off. Done and done!

Take a quick look at the code to get your bearings.

ChecklistsViewController.swift displays the initial list of checklists, and ChecklistDetailViewController.swift displays the items within each list. Main.storyboard contains the user interface items.

Your task in this tutorial is to improve Prepped so that the storyboard is more organized; you’ll also be able to view notes for list items and add diary entries to record your zombie survival efforts.

There are two unused scenes in the storyboard. When you’ve completed this tutorial, you may like to incorporate these scenes into Prepped so that you can add items and notes to a checklist.

Storyboard references

If you’ve used storyboards on a large project or as part of a team with other developers, you’ll know they can quickly become unwieldy. Merge conflicts, spaghetti-like segue arrows and navigating your way around a wall of scenes is enough to make anybody question whether storyboards are worth the effort.

Although you’ve always been able to use multiple storyboards in your apps, you’ve never been able to segue between them using Interface Builder. To present a view controller from a different storyboard, you’d have to instantiate it first and present it in code. But no longer!

With Xcode 7, you can add references between storyboards right in Interface Builder using storyboard references, which can either point to specific view controllers or to the initial view controller within another storyboard. This makes it much easier to divide up storyboards into smaller storyboards, and alleviates many of the issues mentioned above without needing to add any extra code.

Multiple smaller storyboards also make it possible for other team members to work independently on their own storyboards without stepping on each other’s toes.

Enough theory — time to put it into practice!

Creating your first storyboard reference

In its current state, Prepped is a small app in the early stages of development, but there’s enough structure there to discern where to divide up the main storyboard. Container view controllers are a good place to consider splitting out functionality into new storyboards.

Prepped uses a tab bar controller, and in this case it makes sense to separate each tab’s children into their own storyboards.

Open Main.storyboard and zoom out so you can see all six scenes. Hold Command and press + to zoom in and – to zoom out, or right-click on a blank area in the storyboard and choose your zoom level.

Click and drag to highlight all scenes in the storyboard except for the tab bar controller on the left-hand side:

Select Editor\Refactor to Storyboard and enter Checklists.storyboard as the name of the new storyboard. Set the Group to Checklists, then click Save.

As if by magic, Xcode does the following:

1. Splits out the selected scenes into a new storyboard.
2. Changes the target of the tab bar controller’s “view controllers” segue to a storyboard reference that points to the relevant scene in the new storyboard.
3. Takes you to the new storyboard.

You may have to zoom out and reposition the new storyboard to see all of its scenes. The arrangement of the scenes and their segues is exactly like it was in the original storyboard. Here’s what the new storyboard should look like:

But what happened to the original storyboard? Open Main.storyboard and take a look:

The tab bar controller’s “view controllers” segue now points to the storyboard reference for the navigation controller in Checklists.storyboard. The storyboard reference uses the navigation controller’s storyboard ID to determine which scene to segue to in the new storyboard.

There are a few ‘dangling’ storyboard references to view controllers that had storyboard IDs set; you won’t need these any longer. Select ChecklistDetailViewController, AddChecklistItemNavigationController and AddChecklistItemViewController and delete them.

Instead of referencing specific view controllers, storyboard references can simply refer to the initial scene in a storyboard.

Still in Main.storyboard, select the new storyboard reference named ChecklistsNavigationController and use the Attributes Inspector to remove the Referenced ID, like so:

The reference now points to the initial view controller in Checklists.storyboard, and updates as shown:

Open Checklists.storyboard and select the Checklists Navigation Controller scene. Use the Attributes Inspector to check Is Initial View Controller; this indicates this scene should be the entry point for the storyboard.

Build and run your project; the app performs just as it did when you started. The only difference is that things are a little more organized behind the scenes!