Refactoring with Storyboard References

It has always been possible to split a large user interface into several Storyboards. The disadvantage was that you could not then create segues in Interface Builder between the different Storyboards. Instead you needed to wire up target-action connections in the Storyboard of the presenting view controller and use instantiateViewControllerWithIdentifier: to get the destination view controller to present.

Storyboard references introduced with Xcode 7 give you a way to split a large storyboard and still create the segues between scenes in Interface Builder.

Refactoring a Large Storyboard

To show how to use Storyboard references consider the following Storyboard for a simple iPhone app using a tab bar controller.

The first “news” tab contains a split view controller with the usual table view based master-detail segues. The second “settings” tab has a static table view with segues to three other view controllers.

I also have an iPad version of the Storyboard with the Settings views presented in a popover from a button on the toolbar. We can avoid duplicating those scenes in the iPad Storyboard by first refactoring them into a separate Storyboard file:

  • Select the scenes to be refactored - in this case the root navigation controller, the Settings table view controller and the three child view controllers.

  • From the Editor menu select Refactor to Storyboard and when prompted enter the name of the new Storyboard (I used Settings) and save it.

  • Interface Builder will switch to show you the newly created Storyboard which should contain the previously selected Settings scenes and segues.

  • If you switch back to the main Storyboard you will see that the Settings scenes have been replaced with a placeholder representing the Storyboard reference:

Storyboard Reference

Unfortunately the tab bar item for the Settings has lost its title and icon. I am not sure if that is a bug or a feature (a radar will follow). For now I manually add them back in the main Storyboard.

Adding a Reference to a Storyboard

To make use of the new Settings Storyboard drag a Storyboard reference from the object library into the iPad Storyboard:

Storyboard Reference

Use the attributes inspector to set the Storyboard name and identifier of the navigation controller in the Settings Storyboard:

Storyboard Reference

Once you have a Storyboard reference you can use it as the target of a segue. So for example I can create a popover segue from a bar button item to the Settings Storyboard reference:

Storyboard Reference

Room For Improvement

A disadvantage with this approach to Storyboard references is that you can no longer view the whole user interface on a single screen. I was hoping that Interface Builder would automatically resolve the references to show the contents of each of the Storyboards when looking at the main Storyboard. Maybe that will come in Xcode 8?

One other negative if you refactor a localised Storyboard is that you need to remember to manually copy the localisation strings for the new Storyboard. Xcode does not currently manage that for you.

Update 27 August 2015: I should also mention if you want to maintain backward compatibility with iOS 8 you cannot use storyboard references as the target of a relationship segue. For example, you cannot embed a storyboard reference in a tab bar controller or make it the root of a navigation controller on iOS 8.

For Further Reading