How to Build Modular iOS Storyboards

With the introduction of storyboards back in iOS 5.0, user interface (UI) designing for iOS apps has generally become much easier. With larger, more complex apps though, managing the entire app’s screens in a single storyboard file is a challenge, since the number of screens and workflows involved are considerable and harder to contain in a single storyboard. This is where modular storyboards come in handy.

 

Problems with using a single Storyboard

There are a number of issues associated with using a single storyboard. A few of these are mentioned below.

1) Complexity – As your application grows in size, more and more screens and navigational flows i.e. segues are added to the app, resulting in a larger, more complex storyboard. When that happens, it becomes harder to find or modify the screen or segue you want, as well as manage the overall storyboard.

2) Load time – the other problem with larger storyboards is the load time, since the bigger the storyboard, the longer it takes for the interface builder to load it.

3) Source Control – Another problem that occurs when working with a single storyboard is source control and managing collaboration between team members. Since with a single storyboard file, the frequency of conflicts is much higher and it is harder to resolve them as well.

 

The Solution

The only solution is to break the storyboard into a set of smaller storyboards i.e. modular storyboards. Before iOS 8, you had to connect these modular storyboards through code by instantiating the viewcontroller in other storyboards and presenting it. But with the introduction of storyboard references in iOS 8, this process has become much easier.

 

What is a Storyboard Reference?

According to Apple, a storyboard reference “points from a storyboard to a different storyboard, or to a scene on the same storyboard, or to a scene on a different storyboard.” And you can “Use storyboard references to organize the layout of a storyboard, refactor a storyboard, or connect to a scene in a different storyboard.”

To use storyboard references however, you need an app that’s targeting at least iOS 8.0

So basically, a storyboard reference enables the segue to have any viewcontroller residing in the same or in another storyboard as a destination. This not only enables you to reuse view controllers residing in separate storyboards but also provides an interconnection between these smaller modular storyboards. You can also use storyboard references to create a much cleaner layout of large storyboards by allowing connection between view controllers that are far apart in the same storyboard.

Keep in mind though, that in order to use storyboard references in iOS 8, no two view controllers should have the same storyboard Id, even if they are located in different storyboards. In iOS 9 however, you can have two view controllers in separate storyboards with the same storyboard Id and still use storyboard references to connect them.

Let’s create a simple project to examine this functionality more closely.

 

Step 1: Setup project

 
To use storyboards, you need to have Xcode 7 or later installed, as this feature is supported on iOS 9.

First, create a new project and then select ‘Tabbed Application’. Name this application ‘ModularStoryboard’

Next, name the project as ‘ModularStoryboard’. Then select iPhone in Devices. You can select any language for this project.

The above window will create new project. Now, open the Main.storyboard file, this will contain a tab bar controller and two view controllers (as shown below).

 

Step 2: Design user interface

 
Now let’s design our user interface. To give you an idea about the complexity involved in using a single storyboard, I have added two more tabs and embedded a second view controller inside the navigation view controller (as depicted below).

As you can see, our app here has four tabs. Each of these tabs can represent a separate detailed module of the app, and as such can connect to several other view controllers. In most cases these view controllers are just navigation view controllers. You can imagine how this storyboard will grow to be more complex as more and more screens are added in the app.

Step 3: Refactor storyboard

Now let’s break this storyboard into smaller (modular) storyboards. To do so, select the first view controller and then select the “Refactor Storyboard” option from the Editor menu, as shown below.

Let’s name this new storyboard as First.

This will create a new storyboard named First.storyboard (as shown above). Along with that, it will also create a storyboard reference in the Main.storyboard and will connect the tab bar controller to it (depicted below).

Next, let’s refactor the second tab to a storyboard. To do so, we’ll have to select both the navigation controller and the second view controller and then select the Refactor to Storyboard option. This is because the Refactor to Storyboard option only moves the selected view controllers to the new storyboard. We’ll call this new storyboard Second.storyboard.

As you can see below, we now have a Second.storyboard containing both the navigation controller and view controller:

Repeat this step for the remaining two tabs and you’ll end up with a nice, clean Main.storyboard broken into smaller iOS storyboards for each tab.

This approach makes the app’s storyboard much easier to manager and also helps save time by minimizing the storyboard’s load time and search time.

 

Step 4: Connect the View Controllers in separate storyboards

In this step, you will see how using storyboard references can help you reuse view controllers in your app project. Suppose there is a view controller which is common between the two storyboards we created above, First and Second. By using storyboard references, you can just create this View Controller once and then connect it in both storyboards via these story references. Here’s how you can do that.

First, create a view controller in the Main.storyboard and set its storyboard Id as CommonViewController (as shown below).

Now, open the First.storyboard and add a storyboard reference object (as depicted below).

Next, set the storyboard reference properties. Select Main in storyboard and enter CommonViewController in the Storyboard Id.

Your storyboard reference is now set up. Let’s connect it to the First view controller. Create a segue from the first view to the common view controller storyboard reference and select present modally (as shown below).

Repeat this process for the Second view controller in the Second.storyboard. Then create a segue from the second view to the common view controller storyboard reference and select show (as depicted below).

You can use this process to connect any view controller residing in any storyboard, even view controllers residing in the same storyboard. You can also use it to clean up the layout make it more manageable.

 

Further

 
You can also link to view controllers in different storyboards without using storyboard references through code (as shown below)

Just use the instantiateInitialViewController or InstantiateViewControllerWithIdentifier methods of the storyboard instance to which the view controller belongs.

 

Conclusion

 
As you can see, Modular storyboards make it much easier to create UI designs for apps by making the entire storyboarding process much more manageable, scalable and reusable, helping you save a lot of time in the long run. And by using storyboard references, this process becomes even easier.