[iOS Swift] - Setting up project without storyboard 📱
Tags: ios, programming, tutorial, beginners
Published: 2023-01-17 02:06:11

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdb3900niwf4f2jz49r1.png)


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

![Deleting Main.storyboard config entries](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tr315j9nwn1vmu1fjcvl.png)

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)
    }
    
}
```


**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()
    }
```


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

![Desired output from emulator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brdasi6ln3908keut2eq.png)

---

## Disclaimer

![Disclaimer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9z5xm410lcpl10ifbjq4.png)