UIKit: Programmatic Root ViewController

DevTechie Inc
Jun 28

Photo by Andy Hermawan on Unsplash

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