4.4. Navigation Controller and sending data from screen 1 to screen 2

We will now use the navigation controller to switch between screens and send data from the first screen to the second screen.

Embed the ViewController (controller of the first screen) to the Navigation Controller on Storyboard.

Now, we need to send the data (message and mood) from the first screen (ViewController) to the second screen (DisplayViewController). We will create a public struct to create this package.

Adding a struct

So, open the ViewController.swift file, and add the struct there:

class ViewController: UIViewController {
    
    //codes omitted...
    
    //MARK: struct to create a package to send to the Display Screen...
    public struct Package {
        var message:String?
        var mood:String?
        
        init(message: String? = nil, mood: String? = nil) {
            self.message = message
            self.mood = mood
        }
    }
    //codes omitted...
}
//codes omitted...

Notice that I am writing public before declaring the struct Package. We are working with access control of Swift here. If we do not write public, Package cannot be accessed from outside the ViewController class. The keyword public means this struct Package will also be available to other classes outside this class. For more details about access control in Swift, read: https://docs.swift.org/swift-book/documentation/the-swift-programming-language/accesscontrol/.

Handling the Button Tap action

Sending Data

Now that our struct is ready, we will create a data package of two strings (message and mood). And then, when the user taps on the Submit button, we should navigate to DisplayViewController and send this package there. So let's add an action to the button:

//  ViewController.swift
//  App4
//

class ViewController: UIViewController {
    //MARK: initializing the First Screen View...
    let firstScreen = FirstScreenView()

    //codes omitted...
    override func viewDidLoad() {
        super.viewDidLoad()
        //codes omitted...
        
        //MARK: adding action for firstScreen.
        firstScreen.buttonSubmit.addTarget(self, action: #selector(onButtonSubmitTapped), for: .touchUpInside)
        
    }
    
    
    //MARK: submit button tapped action...
    @objc func onButtonSubmitTapped(){
        let message = firstScreen.textFieldMessage.text
        if let unwrappedMessage = message{
            //if the message is not empty...
            if !unwrappedMessage.isEmpty{
                // creating a package to send to Display...
                let package = Package(message: unwrappedMessage, mood: selectedMood)
                
                //instantiating displayViewController...
                let displayViewController = DisplayViewController()
                
                //setting the to be sent package...
                displayViewController.receivedPackage = package
                
                //pushing displayController to navigation controller...
                navigationController?.pushViewController(displayViewController, animated: true)
            }else{
                //do your thing!
            }
        }
    }
}
//codes omitted...

In the above code, we add an action for buttonSubmit to handle if the user taps on it.

Please note: buttonSubmit is not a part of the ViewController, rather it's a part of the view (firstScreen). That is why we are adding the action to the button by calling firstScreen.buttonSubmit. We will always add actions for the buttons inside the ViewController, not the view. A view (FirstScreenView) class is just for setting up the front-end. You should not write back-end methods or actions there.

If the user puts in a message and selects their mood, the code will create a variable package of struct Package with the message and the mood. Then the code instantiates the DisplayViewController (displayViewController) and sets package as the value of the receivedPackage variable of displayViewController. Then, as usual, we push displayViewController to the navigation controller.

Receiving data at DisplayViewController

We need to prepare the DisplayViewController to receive the package. So let's update DisplayViewController.swift as follows:

//
//  DisplayViewController.swift
//  App4
//
//  Created by Sakib Miazi on 5/16/23.
//

import UIKit

class DisplayViewController: UIViewController {

    //MARK: creating instance of DisplayView...
    let displayScreen = DisplayView()
    
    //MARK: patch the view of the controller to the DisplayView...
    override func loadView() {
        view = displayScreen
    }
    
    //MARK: message and mood from the first screen...
    var receivedPackage: ViewController.Package = ViewController.Package() // The first screen can set this variable...
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //MARK: setting the Labels' texts...
        if let unwrappedMessage = receivedPackage.message{
            if !unwrappedMessage.isEmpty{
                displayScreen.labelMessage.text = "Your message: \(unwrappedMessage)"
            }
        }
        
        if let unwrappedMood = receivedPackage.mood{
            if !unwrappedMood.isEmpty{
                displayScreen.labelMood.text = "You are feeling \(unwrappedMood)"
            }
        }
    }
}

In the above code, see that we are creating a variable receivedPackage of type ViewController.Package. Package is a public struct in the ViewController class. So to access it from inside another class, we need to write the source class name, then dot(.), then the struct name.

Then we process and display the data on DisplayView.

Let's run the app:

Here, we learned how to detach the front end (View) of a screen from the back end (ViewController) of it. It is a widely used technique in iOS development. And you should follow this pattern.