Swift 5 – Creating an app without a Storyboard (ARCHIVE)

UPDATE: View the tutorial in developing an iOS 13 app (Xcode 11) without a Storyboard.

I prefer to develop an app without a Storyboard because

  • Easy to maintain
  • Have a precise pixel or configuring the UI elements
  • Have control in developing the interface
  • Most major companies develop their apps without a Storyboard

In this blog, I am going to document on how to develop an iOS app without using a Storyboard.

Step 1 – Create a iOS App

Open Xcode and click Create a new Xcode Project button.

Click Create a new Xcode Project button

Click Single View App and click the Next button.

Enter the name of the project and make sure that the language is Swift.

Select a folder or location where you want to save the project.

Step 2 – Remove the Storyboard

On the General area, go to the Main Interface and remove Main.

Main Interface field is empty.

Right-click the Main.storyboard file, and click Delete.

A dialog box appears and press the Move to Trash button.

Delete the ViewController.swift file.

Right-click ViewController.swift file and press the Delete button.

Step 3 – Create two new folders/files

Right-click the project’s folder and click New Group

Create two new folders (or group) called View and Controller. Both folders will contain different set of Swift files. The View will manage the user-interface and the Controller will manage the back-end.

Add a swift filled call HomeController.swift in the Controller folder. And add a swift file called HomeView.swift in the View folder.

Right-click a folder and click New file.
Select the Swift file and press the Next button.

Step 4 – Add the initializer in the HomeView.swift

Open the HomeView.swift file and use the following source code:

Step 5 – Add the initializer in the HomeController.swift

Open the HomeController.swift file and use the following source code:

Step 6 – Redirecting to the first landing window.

Click the AppDelegate.swift file and enter the following snippet under the application method:

window = UIWindow(frame: UIScreen.main.bounds)
window?.makeKeyAndVisible()
window?.rootViewController = UINavigationController(rootViewController: HomeController())

Step 7 – Add a background color

Click HomeView.swift file and enter the following snippet under the override init method:

override init(frame: CGRect) {
  super.init(frame: frame)
  self.backgroundColor = .yellow // place this snippet
}

The self.backgroundColor = .yellow will change the app background color to yellow.

Step 8 – Run the app

On the top-left corner, press the PLAY button to run the app.

The iPhone Xr emulator will open and load the app.

And you are done! More tips, tricks, and how-to’s are coming up. So stay tune!

If you have questions, please contact me.

Leave a Reply