Back in Time: Build an App without Storyboard in UIKit

Before SwiftUI existed, apps were built using UIKit. Many associate UIKit with storyboards, but most of the time you just used code to create a UI. By getting rid of the storyboard. In this article, I’ll go into how to create an app in UIKit without a storyboard.

We are creating a VAT calculator app to calculate the gross price.

1. Prepare the app

First we delete the Main.storyboard and move it to the trash, because we don’t need it!

Second, we empty the area that says Main, so delete the connection and leave it empty.

In the Info.plist we delete the connection Storyboard Name (click on the minus (-) sign). So the complete line will be deltetd. See image.

In the SceneDelegate.swift file we change the code as shown above. It is important that you set the name in the rootViewController equal to the name of your ViewController file. If you start the app now you should see a black screen.

2. The UI elements

Now let’s go to the ViewController.swift file and add the following UI element, preferably above the viewDidoad() method.

First we add a UIView in which we subordinate the UI elements. As in all elements, it is important that the translatesAutoresizingMaskIntoContstraints = false. Because that allows us to use our own AutoLayout later.

Adds two TextFields and two labels below. You can make adjustments yourself or leave my settings.

Finally, we have a button with a link to an action in which we calculate the gross price.

3. SubViews and Auto Layout

It is important here, that the UI elements are linked to our self-created UIView. They are added in the viewDidLoad () method. Our UIView is then added to the main view. We also have a method for the Auto Layout.

First we create the constraints of our taxCalculateContentView and calculate the height so that it is centered.
I will only go into this briefly, as otherwise it would go beyond the length of the article. The other elements are arranged in a way that suits me at first. It is best, to try out the constraints, this is the only way to know what each constraint does.

4. UIButton Action and Summary

If we now click the button, the calculateActionButton (…) method is called (see above). Here the values of the text fields are transferred, converted into a double and calculated. If the fields are empty, nothing happens. Finally, the result is transferred to the resultLabel.

This is what the end result should look like. I hope you enjoyed my excursion. UIKit also offers advantages. Despite the time of SwiftUI, you can also work in UIKit without a storyboard and it is advantageous to deal with it. Many tech companies still use UIKit (mostly without a storyboard). So in addition to SwiftUI, you should also know the basics of UIKit, because that can help in the future.

You can download the full project here:

Swift (iOS, iPadOS & macOS) Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store