Preparing an Xcode Project for Programmatic UI with UIKit

If you want to create your UI programmatically in Swift, you’ll have to go through a few steps to remove the Main storyboard and references to it. The steps are quite simple, but it can be easy to miss one.

Let’s get started.

Delete Files and Removing References

First, delete the Main storyboard and the ViewController Swift file.

Next we need to look for reference to the Main storyboard within the Info.plist and the General section of the Targets for our project. The quickest way I know of is to search for “storyboard” the Find navigator.

You should see the key “UIKit Main Storyboard File Base Name” with a value of “Main”. Double click the value cell and delete Main. Press enter to commit.

The next area will be “Storyboard Name” inside the Info.plist file. Simply hover over the key cell and click the minus icon to remove the key value pair.

Create a New View Controller

Next, we need an initial view controller to set as our new window root. I’ll create a new View Controller and set the background color as a test.

Scene Delegate

Now we need to modify the scene delegate to set our root view controller. The scene delegate is responsible for the creation and life-cycle management of scenes into our app. This allows for apps to have multiple instances on iPad.

We’re going to modify the scene function. Here are the changes. I’ll describe each step.

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
        guard let windowScene = (scene as? UIWindowScene) else { return }
        window = UIWindow(frame: windowScene.coordinateSpace.bounds)
        window?.windowScene = windowScene
        window?.rootViewController = MainViewController()
        window?.makeKeyAndVisible()
    }
  1. Store the created UIWindowScene in a constant.
  2. Set window to a new UIWindow with a frame set to our window scene’s coordinate bounds (a CGRect).
  3. Set the window’s scene to our windowScene const.
  4. Set the window’s root view controller to an instance our MainViewController
  5. Make the window visible

Summary

I hope this helps you (and future me) prepare projects for programmatic UI. Is there a faster/easier way to do this? Leave a comment to let us know.

Take care.
Stay awesome.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s