Refactoring Storyboards With Storyboard References

referencecheckbanner

A common question facing an iOS team when starting a new App is whether to use Storyboards or not. As a professional iOS developer I don’t think this is an either / or question – you need to know both how to programmatically define and use UIViews (including Auto Layout) and how to effectively use Storyboards in a team environment.

At WWDC 2015 with Xcode 7 Apple introduced Storyboard References and the ability to Refactor your large storyboards into more manageable Storyboards from within Interface Builder to avoid the Storyboard merge conflicts.

In an Instagram Clone App I started working on I immediately started refactoring my Storyboard which was already getting out of hand with only a Tab Bar Controller and the five navigation controllers and resulting view controllers coming out of each of the five tabs.

huge-storyboard

I selected all the View Controllers except the Sign-In and Sign-Up VCs in order to isolate the Tab Bar Controller.

storyboard-selected

Once selected from the Xcode Editor menu I selected “Refactor to Storyboard…”

refactor-into-storyboard

and Interface Builder asks you for a name of the new Storyboard that will contain the selected scenes.  It creates this new storyboard file and in the original storyboard provides a Storyboard Reference.

refactored

The Storyboard has been Refactored. In my case to only include the sign-in and sign-up scenes. In this fashion you can make the Storyboards more functional based yet still retain the overall app flow without having to have a hybrid of Storyboard and code to perform hidden code-based segues.

The final step I took was to update the storyboard reference in the Attributes Inspector with the Referenced ID of the scene in order to remove the Initial Root Controller from the new Storyboard.

tabbarid-from-start

With this technique if a development team decides to go down the Storyboard path they can refactor large Storyboards into smaller functional storyboards without compromising the visual flow that the storyboard provides.

If you’d like to learn more about Storyboard Refactoring and Storyboard References be sure to check out Kyle Sluder from UIKit Frameworks present and Tony Ricciardi from Development Technologies demo during the WWDC 2015 Session 215 entitled What’s New in Storyboards: Mapping the Flow of your App.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s