First iOS App with Programmatic UI — 2023 Edition

In this tutorial I will show you how simple it actually is to abandon storyboard and create your UI completely in code using UIKit 🔥

Watch me stream iOS Development on Twitch here!

Index
1. Create a new project
2. Delete all unnecessary files and references
3. Add root ViewController
4. See your first UI change using code

1. Create a new project

We’ll start by creating a new iOS project — there’s no better feeling than creating a fresh project 😍

Select “App”

Give it a cool name like “Pokedex” and save it anywhere you wish!

That’s it for the first chapter — on to the next one!

2. Delete all unnecessary files and references

This is a step I love to do: deleting the Main.storyboard 🙌🏻✨
Make sure to “move to trash” when deleting the file.

Deleting (moving to trash) the Main Storyboard

If you’re trying to run the app now it will build successfully but crash and throw an error because we still have a reference to the now deleted Main storyboard in our project settings.

App crashing with error message mentioning reference to Main storyboard.

Let’s fix this crash by removing the last two references to the Main storyboard. First click on the info.plist and select the row that is called “Storyboard Name” and hit the minus.

Deleting reference to Main storyboard in info.plist

Next click on the blue project file and go to the info tab. Here tap on the row that is called “Main storyboard file base name” and hit the minus.

Deleting reference to Main storyboard in the info tab.

And that’s it! If you run your project now it won’t crash. Perfect time to move to the next chapter!

In case your App still crashes try to hit cmd + shift + k to clean the build folder.

3. Add root ViewController

In this chapter we are de-mystifying what the storyboard actually does for us by doing it ourselves — and it’s surprisingly simple 💪🏻

The entry point of our App is the file SceneDelegate.swift. Let’s go there and reduce the noise by deleting all functions except the one you see down below:

When an app launches it needs an entry point. A point where everything starts. It’s SceneDelegate.

We will have to do 3 things. For One we have to instantiate a new UIWindow and assign it to the local “window” property of the SceneDelegate class. Two we instantiate the first view controller that we want to display when the app launches. This is the view controller we are going to assign as the rootViewController property of “window”. Finally Three we will make the window “key” and “visible”. Basically telling our app that this is our active window.

Creating a UIWindow instance, assigning a rootViewController and making the window “key” and “visible”.

import UIKit
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
  var window: UIWindow?
  func scene(
    _ scene: UIScene,
    willConnectTo session: UISceneSession,
    options connectionOptions: UIScene.ConnectionOptions
  ) {
    guard
      let windowScene = (scene as? UIWindowScene)
    else {
      return
    }
    // One
    self.window = UIWindow(windowScene: windowScene)
    // Two
    self.window?.rootViewController = ViewController()
    // Three
    self.window?.makeKeyAndVisible()
  }
}

4. See your first UI change using code

In our ViewController.swift file we will change the background color of our view to really see that we can make changes to the UI! For that add the following line:

import UIKit
class ViewController: UIViewController {
  
  override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .red
  }
}

Now we are able to run the app and see a beautiful view with red vibrant background 😊!

App running with a red background view.

You successfully implemented your first view programmatically 🎉!

Watch me stream iOS Development on Twitch here!

I am really happy you read my article! If you have any suggestions or improvements of any kind let me know! I’d love to hear from you! 😊

Twitter / Youtube / Instagram