2.1. Converting the storyboard to code

So, let's convert the Storyboard to Swift code!

The following image is how the grid on the device screen is defined.

Grid of a screen

App1 design

In the above image, we can see how the UI elements are placed on the device's screen in our App1.

We will add the code directly to ViewController.

Understanding the attributes

Label attributes

If you remember, In App1, we dragged and dropped a Label from the Objects Library and changed a few things. Let's go back to the Storyboard and click on the "Hello World!" label.

• We changed the text to "Hello World!"

• The color of the text is Blue (accent color).

• The font is the system's default font, and the size is 24.

There are many other attributes we have in a Label that we can edit.

Okay, let's programmatically create a Label. And then set the Attributes. For this purpose, we will create a new project named "App_NoStory." We will not touch the Main storyboard here.

Open the ViewController code directly and add a variable labelHello of the UILabel.

//
//  ViewController.swift
//  App1_NoStory
//
//  Created by Sakib Miazi on 5/9/23.
//

import UIKit

class ViewController: UIViewController {
    
    //MARK: declaring the UI elements...
    var labelHello:UILabel! //"Hello World!" Label...
 
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
    }

}

Then inside viewDidLoad() we will have to define the attributes for labelHello.

import UIKit

class ViewController: UIViewController {
    
    //MARK: declaring the UI elements...
    var labelHello:UILabel! //"Hello World!" Label...
 
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        //MARK: call methods to setup the attributes of UI elements...
        setupLabelHello()
        
    }
    
    //Defining the Label attributes...
    func setupLabelHello(){
        labelHello = UILabel()
        labelHello.text = "Hello World!"
        labelHello.font = UIFont.systemFont(ofSize: 24)
        labelHello.textColor = .systemBlue
        labelHello.textAlignment = .center
        labelHello.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(labelHello)
    }

}

In the above code, we defined the attributes for the label:

• labelHello.text is the text inside the Label.

• labelHello.font is the font of the Label. We created a UIFont object with the system's default font of size 24.0. Then set the Label's font to that object.

• labelHello.textColor is the color of the text of the Label. We set the color to system's default Blue color. You can put a . and choose other options.

• labelHello.textAlignment is the alignment of the text. We set the alignment to center. You can put a . and choose other options.

• labelHello.translatesAutoresizingMaskIntoConstraints is set to false which is a default and fail-safe attribute for all the UI elements. The storyboard sets it automatically. If you write codes to edit the attributes, you have to set it to false manually for every UI element. This attribute says to the iOS system that you are dynamically using your own constraints to display the contents on the screen. Otherwise, the system will try to pack all the UI elements together to display them on the screen without your choices.

• view.addSubview(labelHello) is where you add the logical view of labelHello you created as a subview of the screen. Here view is the logical view of the screen. Since labelHello is a child view of view, we write this line of code.

Setting the constraints

Now that we have created a logical view of labelHello, we have to define the constraints. We can use NSLayoutConstraint system class to set the constraints. NSLayoutConstraint.activate() takes in an array of constraints and activate them on the current view. We know that labelHello has two constraints:

• Centered to the x-axis (horizontal axis).

• There is a gap of 32 points between the screen's top edge and the Label's top edge.

So, we can create the array of constraints with the above constraints and activate them by writing:

NSLayoutConstraint.activate(
    [
        labelHello.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 32),
        labelHello.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor)
    ]
)

labelHello.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 32) means:

• Set the labelHello's top anchor to the top anchor of the safe area. (Remember, 'safe area'?) We wanted to have a 32 points gap, constant is the gap here.

• Set the centerXAnchor (horizontal center point) of labelHello to the horizontal center point of the safe area.

Now let's see the entire code:

import UIKit

class ViewController: UIViewController {
    
    //MARK: declaring the UI elements...
    var labelHello:UILabel! //"Hello World!" Label...
 
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        //MARK: call methods to setup the attributes of UI elements...
        setupLabelHello()
        
        //MARK: initializing the constraints...
        initConstraints()
        
    }
    
    //Defining the Label attributes...
    func setupLabelHello(){
        labelHello = UILabel()
        labelHello.text = "Hello World!"
        labelHello.font = UIFont.systemFont(ofSize: 24)
        labelHello.textColor = .systemBlue
        labelHello.textAlignment = .center
        labelHello.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(labelHello)
    }
    
    //Initializing the constraints...
    func initConstraints(){
        NSLayoutConstraint.activate(
            [
                //Constraints for labelHello....
                labelHello.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 32),
                labelHello.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor)
            ]
        )
    }

}

So we write a separate method initConstraints() to activate the constraints and call it from viewDidLoad(). Now let's run the app:

So, our program rendered a "Hello World!" label on screen!

Now, let's add all the constraints for the other two UI elements.

Let's see the code after we add all the constraints:

//
//  ViewController.swift
//  App1_NoStory
//
//  Created by Sakib Miazi on 5/9/23.
//

import UIKit

class ViewController: UIViewController {
    
    //MARK: declaring the UI elements...
    var labelHello:UILabel! //"Hello World!" Label...
    var textFieldUser: UITextField! //TextField...
    var buttonClickMe: UIButton! //Button...
    

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        //MARK: setting up UI elements...
        setupLabelHello()
        setupTextFieldUser()
        setupButtonClickMe()
        
        //MARK: initializing the constraints...
        initConstraints()
    }
    
    //Defining the Label attributes...
    func setupLabelHello(){
        labelHello = UILabel()
        labelHello.text = "Hello World!"
        labelHello.font = UIFont.systemFont(ofSize: 24)
        labelHello.textColor = .systemBlue
        labelHello.textAlignment = .center
        labelHello.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(labelHello)
    }
    
    //Defining the TextField attributes...
    func setupTextFieldUser(){
        textFieldUser = UITextField()
        textFieldUser.placeholder = "Put some text"
        textFieldUser.borderStyle = .roundedRect
        textFieldUser.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(textFieldUser)
    }
    
    //Defining the Button attributes...
    func setupButtonClickMe(){
        buttonClickMe = UIButton(type: .system) //You need to set the type when you create a Button. We use default system button...
        buttonClickMe.setTitle("Click Me!", for: .normal)
        buttonClickMe.tintColor = .systemBlue
        buttonClickMe.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(buttonClickMe)
    }
    
    //MARK: Initializing the constraints...
    func initConstraints(){
        NSLayoutConstraint.activate(
            [
                //MARK: constraints for labelHello...
                labelHello.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 32),
                labelHello.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
                
                //MARK: constraints for textFieldUser...
                textFieldUser.topAnchor.constraint(equalTo: labelHello.bottomAnchor, constant: 16),
                textFieldUser.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
                
                //MARK: constraints for buttonClickMe...
                buttonClickMe.topAnchor.constraint(equalTo: textFieldUser.bottomAnchor, constant: 16),
                buttonClickMe.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor)
            ]
        )
    }
    
}

So, we call the methods to define the attributes of UI elements first, then activate the constraints.

Hint: You can still use the Storyboard to check what attributes to set up. When you are designing by coding for the first time, you can go to the Storyboard, place a UI element from the Objects Library on the Storyboard, and design it as you like. Then, use the attributes you edited to setup the design programmatically in ViewController. Then, delete the object from the storyboard. The Storyboard potentially becomes your draft design pad.

Adding button action

Remember, we added an event listener for the button tap using buttonClickMe.addtarget()? Where do you think we should add that target?

We can do that in the viewDidLoad() method since that is the logical Controller of the app:

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    
    //MARK: setting up UI elements...
    setupLabelHello()
    setupTextFieldUser()
    setupButtonClickMe()
    
    //MARK: adding action...
    buttonClickMe.addTarget(self, 
        action: #selector(onButtonClickMeTapped), 
        for: .touchUpInside
    )
    
    //MARK: initializing the constraints...
    initConstraints()
}

And then, we use the same methods we wrote in 'App1'.

So the full code is:

//
//  ViewController.swift
//  App1_NoStory
//
//  Created by Sakib Miazi on 5/9/23.
//

import UIKit

class ViewController: UIViewController {
    
    //MARK: declaring the UI elements...
    var labelHello:UILabel! //"Hello World!" Label...
    var textFieldUser: UITextField! //TextField...
    var buttonClickMe: UIButton! //Button...
    

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        //MARK: setting up UI elements...
        setupLabelHello()
        setupTextFieldUser()
        setupButtonClickMe()
        
        //MARK: adding action...
        buttonClickMe.addTarget(self, 
            action: #selector(onButtonClickMeTapped), 
            for: .touchUpInside
        )
           
        //MARK: initializing the constraints...
        initConstraints()
    }
    
    //Defining the Label attributes...
    func setupLabelHello(){
        labelHello = UILabel()
        labelHello.text = "Hello World!"
        labelHello.font = UIFont.systemFont(ofSize: 24)
        labelHello.textColor = .systemBlue
        labelHello.textAlignment = .center
        labelHello.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(labelHello)
    }
    
    //Defining the TextField attributes...
    func setupTextFieldUser(){
        textFieldUser = UITextField()
        textFieldUser.placeholder = "Put some text"
        textFieldUser.borderStyle = .roundedRect
        textFieldUser.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(textFieldUser)
    }
    
    //Defining the Button attributes...
    func setupButtonClickMe(){
        buttonClickMe = UIButton(type: .system) //You need to set the type when you create a Button. We use default system button...
        buttonClickMe.setTitle("Click Me!", for: .normal)
        buttonClickMe.tintColor = .systemBlue
        buttonClickMe.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(buttonClickMe)
    }
    
    //MARK: Initializing the constraints...
    func initConstraints(){
        NSLayoutConstraint.activate(
            [
                //MARK: constraints for labelHello...
                labelHello.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 32),
                labelHello.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
                
                //MARK: constraints for textFieldUser...
                textFieldUser.topAnchor.constraint(equalTo: labelHello.bottomAnchor, constant: 16),
                textFieldUser.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
                
                //MARK: constraints for buttonClickMe...
                buttonClickMe.topAnchor.constraint(equalTo: textFieldUser.bottomAnchor, constant: 16),
                buttonClickMe.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor)
            ]
        )
    }
    
    //MARK: buttonClickMe tap action...
    @objc func onButtonClickMeTapped(){
        //print("Button Clicked!!")
        // MARK: fetching the text the user typed...
        let text = textFieldUser.text
        
        //Unwrapping the optional text...
        if let unwrappedText = text{
            //print(unwrappedText)
            
            if(unwrappedText.isEmpty){ //The user didn't put anything...
                showErrorAlert()
            } else{ //The user put some texts...
                showAlertText(text: unwrappedText)
            }
        }
    }
    
    //MARK: Alert controller logics...
    func showErrorAlert(){
        let alert = UIAlertController(title: "Error!", message: "Text Field must not be empty!", preferredStyle: .alert)
        
        alert.addAction(UIAlertAction(title: "OK", style: .default))
        
        self.present(alert, animated: true)
    }
    
    func showAlertText(text:String){
        let alert = UIAlertController(title: "You said:", message: "\(text)", preferredStyle: .alert)
        
        alert.addAction(UIAlertAction(title: "OK", style: .default))
        
        self.present(alert, animated: true)
    }
    
}

If you run the app, you can see that we replicated the whole App1 by just writing codes. You should start practicing this early since almost everyone in the industry got rid of Storyboards.