3.1. Navigation Controller and UI setup

If you are an iPhone or iPad user, you must have used apps with multiple screens, where you go from one screen to another and return to the previous screen with a back button on the top left corner.

For example, the Settings app's navigation looks like this:

This is called the Navigation of the app, where you define how the screen transitions are managed in an app.

Understanding the data Structure behind NavigationController

Navigation Controller is a Stack data structure. The user sees the screen from the top of the Stack. If we want to navigate from one screen to another screen, the user can call the push() method of the Navigation Controller to push Screen 2 on top of Screen 1. Since the user sees the Stack from above the Stack, the user will see Screen 2 now. Whenever the user is done dealing with screen 2, and they want to get back to screen 1, they have to basically use the Navigation Controller to pop() Screen 2 from the Stack. Then Screen 1 will be at the top of the Stack again

Navigation Controller Stack

In our case, the ViewController is Screen 1, and ShowViewController is Screen 2. We need to push ShowViewController on top of ViewController.

Embedding the Navigation Controller

So let's create our new project, 'App3.' We will not entirely discard our Storyboard here. We will use it to attach the NavigationController to our app. So, open the Main storyboard in your project, Select the ViewController (the preview screen), click on the Embed In button at the bottom right corner of the middle pane, and select 'Navigation Controller.'

Once you embed the ViewController into the NavigationController, our tasks with Storyboard are done.

Adding UI elements on the ViewController

Let's add UI elements to our View Controller (ViewController.swift). Let's programmatically add two UI elements to the 'ViewController': a UITextField and a UIButton (often called as just 'TextField' and 'Button'). Our next goal is to build another screen, ShowViewController. Our app will do the following:

• The user puts a text in the TextField in the first ViewController and clicks on the Button.

• On clicking the Button, the screen switches from the ViewController to another screen, ShowViewController (which we will create momentarily), and displays the text the user put before.

So, let's add the TextField and the Button programmatically. First, we initialize the UI elements and set proper attributes, like the following:

//
//  ViewController.swift
//  App3
//

class ViewController: UIViewController {

    var textFieldMessage: UITextField!
    var buttonSend: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        //MARK: initializing the UI elements...
        setupTextFieldMessage()
        setupButtonSend()
        
        //MARK: initializing the constraints...
        initConstraints()
    }
    
    func setupTextFieldMessage(){
        textFieldMessage = UITextField()
        textFieldMessage.placeholder = "Put your message here"
        textFieldMessage.borderStyle = .roundedRect
        textFieldMessage.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(textFieldMessage)
    }
    
    func setupButtonSend(){
        buttonSend = UIButton(type: .system)
        buttonSend.setTitle("Send", for: .normal)
        buttonSend.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(buttonSend)
    }
}

Then initialize the constraints:

func initConstraints(){
    
    NSLayoutConstraint.activate([
        // textFieldMessage constraints...
        textFieldMessage.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
        textFieldMessage.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 32),
        // buttonSend constraints...
        buttonSend.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
        buttonSend.topAnchor.constraint(equalTo: textFieldMessage.bottomAnchor, constant: 16),
        
    ])
    
}

Now let's run the app:

Creating ShowViewController and adding UI elements

Now, let's create the second View Controller, 'ShowViewController.'

• Click on File -> New -> File.

• Select Cocoa Touch Class, and click Next.

• Put ShowViewController as the Class name.

• Select UIViewController at Sublass of (it should be already selected).

• Language should be Swift.

• Click Next.

• Finally, click on Create.

It should create a new ShowViewController swift file, where we will design our second screen.

Now let's add a Label in ShowViewController to display the message the user sent from the first screen (ViewController).

//
//  ShowViewController.swift
//  App3
//

import UIKit

class ShowViewController: UIViewController {
    var messageFromFirstScreen:String? = "No message received!" //First screen can set this variable...
    var labelMessage: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupLabelMessage()
        
        initConstraints()
    }
    

    func setupLabelMessage(){
        labelMessage = UILabel()
        labelMessage.textColor = .systemBlue
        labelMessage.text = messageFromFirstScreen
        labelMessage.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(labelMessage)
    }
    
    func initConstraints(){
        NSLayoutConstraint.activate([
            labelMessage.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
            labelMessage.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 32)
        ])
    }

}

In the above code, I also added a variable called messageFromFirstScreen to receive the message from the first screen. We set the variable's default value to "No message received!". This text will be displayed on the second screen if a user does not put anything on the first screen.

Now, it's time to patch the ShowViewController with the NavigationController.

Pushing ShowViewController on the Button tap

So let's add an event action for buttonSend to push ShowViewController on the Stack. Open ViewController.swift file. Put the following code to viewDidLoad() method.

//
//  ViewController.swift
//  App3
//    
override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    
    //MARK: initializing the UI elements...
    setupTextFieldMessage()
    setupButtonSend()
    
    //MARK: initializing the constraints...
    initConstraints()
    
    //MARK: on buttonSend tap...
    buttonSend.addTarget(self, action: #selector(onButtonSendTapped), 
                        for: .touchUpInside)
}

Then we define the onButtonSendTapped() method to delegate button tap events:

@objc func onButtonSendTapped(){
    //initializing a new screen with ShowViewController...
    var showViewController = ShowViewController()
    //push the screen to Stack...
    navigationController?.pushViewController(showViewController, animated: true)
}

In the above code, we create a new instance of ShowViewController, then push it to the navigation stack. Now, let's run the app:

Now, there is a problem here. We can see that tapping the Send button opens the ShowViewController, but the background is black. Well, by default, iOS gives a ViewController a transparent background. The system has no background; the transparent background makes it look black. Now we can set the background color to white by writing view.backgroundColor = .white inside the viewDidLoad() method in ShowViewController.swift file.

//
//  ShowViewController.swift
//  App3
//
//  Created by Sakib Miazi on 5/10/23.
//
override func viewDidLoad() {
    super.viewDidLoad()
    //setting the view background to white...
    view.backgroundColor = .white
    
    setupLabelMessage()
    
    initConstraints()
}

Now let's run the app:

We can see that there is a Back button on the left top of the ShowViewController screen. When we tap on Back, the navigation controller automatically calls the pop() method, and pops ShowViewController.