iOS — Start an app without a storyboard

Written by Boris Ohayon | September 29, 2016

Today, we learn how to start developing an iOS app without a storyboard 💪

When creating an app, Xcode first creates a project with an established hierarchy :

By default, an application is created with a storyboard. Storyboards are great, they allow us to quickly put things into place and focus on some other more important things. Building a prototype or a mockup with a storyboard is pretty handy and is most of the time a good idea.

For example, we can see here a pretty simple app with three buttons that make the app jump to the next view controller when clicked. Buttons are easy to place with the rulers of the Interface Builder that greatly help visualize things.

When not to use storyboards?

Sometimes though, using storyboards is not recommended :

• When working in a team with version control
• When designing a complex layout
• When we want to easily keep track of constraints
• When we want to reuse the view controllers and build a hierarchy

Now if we don’t use storyboards, then we can either use NIBs or code-based UI. In this tutorial, we’ll see how to start a project using only code ! Let’s jump right in ! 🙃

Step 1 — Create a new iOS project

Create a Single View Application project, using Swift. This tutorial uses Swift 3, minor differences will be pointed out if you’re using a previous version of Swift.

Step 2 — Delete the storyboard

In the Project Navigator, right click on the storyboard and choose delete.

Note that deleting the storyboard doesn’t tell our app not to use storyboards. Even worse, our app will look for the storyboard we just deleted and the app will crash. What we have to do is find the place that says we have to use storyboards, and modify it.

Click on the project’s name in the Project Navigator to access the options. In your target’s options, in General > Deployment Info, a field named Main Interface has Main written in it. This looks for the storyboard named Main, but we just deleted it 😱

Simply clear this field and our app will stop crashing.

Step 3 — Make our app live again

We’re not done yet. If we were to launch our app at this point, we would obtain a black screen. That is because we need a window, and something to display in this window.

Head to the AppDelegate, where we will create our window and our first UIViewController to display. In the function application didFinishLaunchingWithOptions, create a window that has the size of the screen :

👮 Note that before Swift 3, the syntax was slightly different, as we would access the screen with UIScreen.mainScreen().

Now that we have our window, add any UIViewController you wish to be the first view controller of your app. Here, we will create a simple UIViewController named homeViewController, with a red background to be sure that it’s there.

👮 Note that before Swift 3, the syntax was slightly different, as we would create a red color with UIColor.redColor.

The final step is to tell our window what its first view controller will be, also known as the rootViewController, which is a window’s property :

Finally, we have to show the window to the screen :

Step 4 — Launch the app!

Now, if you launch the app, you get a nice red background. Your project is ready to start, without a storyboard 🤗

TL;DR

Delete your storyboard, clear the Main Interface in your Deployment Info, add this in your AppDelegate.Swift :

🤘 That’s it !

You are now ready to start building apps without a storyboard. 😎

The first view controller added to the window is usually a navigation controller that will alllow us to push and present other view controllers on this navigation controller, but for another lesson!

Like what you read? Let’s hit the ❤️ button so that everybody can read it too!

Want to support those tutorials? A bitcoin donation is always fun! 19MZUSLWszAdkaKVJNwrcVwgfvHxvqNMVU