iOS Storyboard References

If you've ever used interface Builder to create a complex, very multi-interface application, you'll see how big the storyboards files are going to be. He will quickly become unable to manage and hinder your progress. Since the introduction of Storyboard, it is actually possible to cut different modules of your application into different Storyboard. In the past, this was to create multiple Storyboard files manually, and to write a lot of code.

To solve this problem, Apple introduced the concept of Storyboard References in IOS 9. Storyboard References allows you to refer to Viewcontroller in other Storyboard from Segue. This means that you can keep different functions modular, while the Storyboard volume becomes smaller and easier to manage. Not only is it easy to understand, but when you work with a team, the merger (the work result) becomes easier.

Simplified Storyboard

To demonstrate how storyboard references works, let's take a well-created application and try to simplify his structure. This problematic app has been uploaded to Github if you want to do it and see the final result. The file named Oldmain.storyboard is our original file. In this project it is simply quoted, and we do not use it. If you want to do it from scratch, delete all the other storyboard, and then change the Oldmain.storyboard file to Main.storyboard.

Below, is the original Storyboard appearance.

As you can see, we used Tabbarcontroller as the initial viewcontroller. This tabbarcontroller has three Navigationcontroller, each corresponding to a different root Viewcontroller. The first one is a tableviewcontroller, there is a list of contacts, and the second is a tableviewcontroller, which is a list of favorite contacts. Both are linked to a detailed page on the Viewcontroller. The third Navigationcontroller, including more information, an Account Detail page, a feedback page and a about page.

Although the application is far from being complicated, the Storyboard is already very large. We see at least 10 or more viewcontroller, and we understand that it will soon become unmanageable. Now we can take them apart, so 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, on the right hand side of main.storyboard, and you can see this viewcontroller that gives more information to the app, and he's separate, and not linked to other viewcontroller.

All we have to do is to select them by dragging (highlight), then click on the Xcode menu bar and choose "Editor->refactor to Storyboard".

Give the storyboard a name called More.storyboard and click Save. The More.storyboard is automatically added to the app and is turned on.

You can see that the storyboard has been created successfully. This time, if you go back to Main.storyboard you can see Tabbarcontroller one of the Viewcontroller has changed and become a reference to storyboard.

That's great. We divided the entire part of the UI into another storyboard. Not only the module is split, but it can be reused elsewhere. Although it is not necessary in our example, he is a very useful and valuable new feature.

Now we're going to split the other modules, which is a bit more complicated than the previous one, because the two parts actually link to the same viewcontroller. Two TableView all show the contact details page through a segue. What can you choose to do?

• Keep Viewcontroller in Main.storyboard

• Refactoring Viewcontroller to your own storyboard

Both options are possible, and I personally tend to separate them. So check the detail page Viewcontroller then click on the Xcode menu "Editor->refactor to Storyboard". Take a name for the new storyboard and save it. This creates and opens a new storyboard. He will link to the Tableviewcontroller of the contact page and the favorite Contacts page.

Now go back to Main.storyboard, select navigation and contact Tableviewcontroller, and create them as a new storyboard reference. The same way the collection of Viewcontroller also operate once. Here is the result after the operation.

We split the Main.storyboard into 5 storyboard in the project.

• Main.storyboard contains a tabbarcontroller and three controllers linked to other storyboard

• Contacts.storyboard a navigation bar and a Tableviewcontroller, when you click a row, link to Contactdetails.storyboard

• Favorites.storyboard a navigation bar and a Tableviewcontroller, when you click a row, link to Contactdetails.storyboard

• Contactdetail.storyboard individual Viewcontroller show contact details and can be linked to the storyboard of contacts and favorite

• More.storyboard includes a viewcontroller to show more information about the app.

This refactoring has made our storyboard more modular and component-structured. can help us to better develop this application later.

Open a specific Viewcontroller from the Storyboard Reference

So far, we've just shared how to create and show storyboard reference from Storyboard's segue, and how to manually add storyboard without refactoring tools.

Suppose we want to add an "account" button in the upper-right corner of the contact page and click this button to quickly reach the accounts page to see more information without having to go to the Settings page to click on it.

Open the Contacts.storyboard, drag a uibarbuttonitem to the Tableviewcontroller navigation bar, and set the title to "account". Then, find the "Storyboard Reference" control and drag one up to Contacts Storyboard. and open the Attributes Inspector panel.

Select the Storyboard attribute as "more" and set the referenced ID property to "Accountviewcontroller". This allows us to cite the viewcontroller of the Account information page instead of linking to the initial view controller of more storyboard.

Select "Account" button, press and hold Control and left mouse button, drag to storyboard reference, create a segue.

The final step is to set the Accountviewcontroller identifier. Open More.storyboard Check Accountviewcontroller, open identity Inspector set storyboard ID to "Accountviewcontroller". This way, when you click on the Account button, you will be transferred to the details page of your accounts.

If you see, adding Storyboard Reference, whether through refactoring tools or manual additions, is simple, straightforward, and effective. He allows you to create more components, reusable, modular applications. Finally, the final results of this guide can be viewed on GitHub.

iOS Storyboard References