UIKit: Programmatic Root ViewController

DevTechie Inc

Jun 28, 2022

In this article, we will go through the steps to setup UIKit app’s root ViewController programmatically in order to build 100% programmatic UI.

I am using Xcode 14 beta 2 for this article.

Its a two-step process, so let’s get started.

Step 1: Remove Main.storyboard file

Let’s start by removing Main.storyboard file

Next, we will remove Storyboard name from info.plist as well.

There is one more place, go to project target info tab and remove “Main storyboard file base name” item.

Build and run, you should see a blank screen (no exceptions, if you see a crashing app, make sure to go through Main.storyboard removal steps again.).

Step 2: Programmatic entry point

Head over to SceneDelegate file and inside following function:

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {

add view controller initialization code.

We will start by removing comments and replacing guard statement with windowScene constant name

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    guard let windowScene = (scene as? UIWindowScene) else { return }
}

Next, we will initialize window object, which is created at the top of the class as an optional variable and pass windowScene as a parameter.

guard let windowScene = (scene as? UIWindowScene) else { return }
window = UIWindow(windowScene: windowScene)

We will initialize our ViewController(the one came with the project creation, if you have a new one then initialize that one here)

let viewController = ViewController()

We also want to put our view controller inside a NavigationController so let’s create that and pass our viewController object as rootViewController to the UINavigationController as shown below:

let navigationController = UINavigationController(rootViewController: viewController)

Let’s set window’s rootViewController to navigationController created above.

window?.rootViewController = navigationController

Lastly, we will call window’s makeKeyAndVisible function.

window?.makeKeyAndVisible()

Our complete function will look like this now:

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        window = UIWindow(windowScene: windowScene)
        
        let viewController = ViewController()
        
        let navigationController = UINavigationController(rootViewController: viewController)
        
        window?.rootViewController = navigationController
        window?.makeKeyAndVisible()
    }

Build & Run

If we build and run now, we will still see black screen so let’s change that by adding an backgrondColor to our ViewController’s view.

override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .orange
}

build and run again:

Congratulations, you have taken your first step toward an awesome world of programmatic UI.

With that we have reached the end of this article. Thank you once again for reading. Subscribe our newsletter at https://www.devtechie.com