DEV Community

Cover image for [iOS Swift] - Setting up project without storyboard 📱
Mark Matute
Mark Matute

Posted on

[iOS Swift] - Setting up project without storyboard 📱

Introduction

First step, to kickstart building iOS UI programmatically is to have at least 1 working ViewController working without story board.


So why would you want to build UI programmatically instead of using storyboard?

Greater control
When building UI programmatically, you have full control over the layout and behavior of your views. This allows for more flexibility and precision when designing your app's user interface.

Easier debugging
With programmatic UI, it's easier to trace the source of any issues or bugs since you have a clear view of the entire view hierarchy. This is in contrast to storyboards which can become complex and difficult to navigate, especially as the project scale up.

Easier to scale
Building UI programmatically can make it easier to scale your app and add new features. With a storyboard, it can become difficult to manage a large number of views and segues.

Easier to collaborate
Programmatic UI can make it easier for multiple developers to work on the same project, as the code can be easily shared and reviewed.


Setup

Step 1: Creating Project
Create a new single view app project in XCode,
Select Swift as language and Storyboard as interface

Yes, we will select storyboard as interface.

Step 2: Deleting the Main.storyboard

Deleting the main.storyboard

Step 3: Deleting Main.storyboard config entries
Search for "Main" in XCode

Deleting Main.storyboard config entries

In the project settings, under the "General" tab, remove the reference to the Main storyboard file in the "Main Interface" field.

As well as in the Info.plist delete the entry for Main.storyboard

Step 4: Update the ViewController.swift

So that we can see the result on our emulator lets add a simple UILabel that says Hello, World in the center of the screen.

As stated from above, we will be managing our views programatically.

import UIKit

class ViewController: UIViewController {

    lazy private var sampleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "Hello World!"
        label.textColor = UIColor.white
        return label
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.black
        self.view.addSubview(self.sampleLabel)
        self.setUpConstraints()
    }

    func setUpConstraints() {
        let sampleLabelConstraints = [
            self.sampleLabel.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            self.sampleLabel.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
        ]
        NSLayoutConstraint.activate(sampleLabelConstraints)
    }

}
Enter fullscreen mode Exit fullscreen mode

Step 5: Updating SceneDelegate.swift
Registering the ViewController as the rootViewController

   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 = ViewController()
        window?.makeKeyAndVisible()
    }
Enter fullscreen mode Exit fullscreen mode

Step 6: Running the app in the emulator
Desired output should be this image.

Desired output from emulator


Disclaimer

Disclaimer

Top comments (1)

Collapse
 
markmatute profile image
Mark Matute

Thank you will thank a look!