2,804 reads

Using Multiple UIStoryboards in Xcode

by Dejan AtanasovAugust 4th, 2018

Too Long; Didn't Read

In the past few years, <a href="https://hackernoon.com/tagged/ios" target="_blank">iOS</a> projects (and mobile projects in general) contained no more than 10–15 screens in total. A single storyboard was definitely a good option since it could fit all screens and still have a clean wireframe that was understandable for future and current developers.

featured image - Using Multiple UIStoryboards in Xcode

iOS Developers, this tutorial has the intention to make you forget building iOS apps that rely on a single storyboard.

In the past few years, iOS projects (and mobile projects in general) contained no more than 10–15 screens in total. A single storyboard was definitely a good option since it could fit all screens and still have a clean wireframe that was understandable for future and current developers.

But, these days a 10–15 screens project is counted as a small sized project. What happens is that most of the projects currently are containing 40+ screens. And this is where it becomes a real issue. You are working with a single storyboard, you add all the screens inside of it, and suddenly you start facing many performance issues and getting lost easily in the sea of controllers. Not to mention the frustration of the future developers that will inherit the project.

The Solution

Recently, I have started working with the CleanSwift (VIP) Architecture that was inspired by Uncle Bob's book Clean Code: A Handbook of Agile Software Craftsmanship. In my opinion, Clean Code is a revolutionary paradigm that everyone should follow.

I have done some research and a few tests with this architecture and found the best and most organized way to handle the huge amount of screens. 👇

Using Multiple Storyboards

I will now explain to you how to use the multiple storyboard approach for your next projects. It's not something hard to understand and I hope you find this approach useful.

For the purposes of this tutorial, I will create a scenario where we have a 20+ screens project that we need to build. The screens are the following: Login, Register, Forgot Password, Edit Profile, Change Password, Posts Feed, Post Details, Post Gallery, Post Map, Create Post, Edit Post, Search Posts, Your Posts, Bookmarked Posts, Terms&Conditions, Privacy Policy, About App, Inbox, Search Inbox, Chat Room, Create Chat Room.

By analyzing the names of the screens, you will notice that they belong to some specific group. A group is formed from screens that have the same functionality. Each group will represent a separate storyboard. If you are still confused, just stay with me for a little more and everything will be cleared. 👇

From the above screen names we can create several groups:

Auth - Login, Register, Forgot Password
Posts - Posts Feed, Post Details, Post Gallery, Post Map, Create Post, Edit Post, Search Posts, Your Posts, Bookmarked Posts.
Settings - Edit Profile, Change Password, Terms&Conditions, Privacy Policy, About App
Chat - Inbox, Search Inbox, Chat Room, Create Chat Room.

That means that we will need to create 4 storyboards (Auth, Posts, Settings, Chat) for this app. This approach creates a clean and understandable workflow even with twice as many screens.