3.3.1. Send data back from Screen 2 to Screen 1: UIPickerView

Now let's open the second screen (ShowViewController). We are going to set up our PickerView moodPicker now. Let's define an array of Strings having three moods: "Happy," "Meh," and "Sad."

// moods for moodPicker...
let moods: [String] = ["Happy", "Meh", "Sad"] 

Also, let's declare a variable that keeps the selected mode:

var selectedMood = "Happy"

Now it's time to set up the PickerView. To activate a PickerView, the class ShowViewController needs to adopt two Protocols: UIPickerViewDelegate, and UIPickerViewDataSource. UIPickerViewDelegate is the protocol to enable user interactions with the PickerView, and UIPickerViewDataSource is the protocol to access data to display on PickerView.

You can adopt it in two ways. The first way is the way we have seen in our Swift notes:

class ShowViewController: UIViewController,
                            UIPickerViewDelegate,
                            UIPickerViewDataSource {

    //codes omitted...

}

Or we can separate the code block from the class to make our code more readable by using extension keyword:

class ShowViewController: UIViewController {
    // codes omitted...
}


extension ShowViewController: UIPickerViewDelegate, UIPickerViewDataSource{
    //has the same scope of ShowViewController...
}

The keyword extension allows you to write code inside the same context of a class. You are writing code literally inside a class if you use an extension.

We will choose the second option, where we can keep the code separated. So, let's implement or adopt the methods in the protocols and define them. You need to write code for three methods to properly set up the moodPicker:

// MARK: Conforming required PickerView protocols...
extension ShowViewController: UIPickerViewDelegate, UIPickerViewDataSource{
    
    //returns the number of columns/components in the Picker View...
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    //returns the number of rows in the current component...
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return moods.count
    }
    
    //set the title of currently picked row...
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        // on change selection, update selectedMood...
        selectedMood = moods[row]
        return moods[row]
    }
    
}

Here, numberOfComponents() method expects you to return the number of columns in PickerView. In our moodPicker we only have one column, so we will return 1. (There could be scenarios with multiple components, like a date picker).

You see, there are two methods named pickerView(), it might get you confused at first glance, but really they are used as overridden methods for the protocols. The most important parts are numberOfRowsInComponent and titleForRow parameters.

The first pickerView() method with numberOfRowsInComponent should return the number of rows in the current component/column. We have to populate the Strings in the moods array. So, we return moods.count.

The second pickerView() method with titleForRow should return the title we want to set for the selected row. Here, we need to show the Strings in the moods array, each mood in each row. So we return moods[row]. Before we return, we update selectedMood variable's value to the corresponding String to the currently selected row, moods[row].

Now, two more important tasks are yet to be done. We have to show the moodPicker the class where it can fetch the data from and enable user interaction. Add the following two lines of codes, in setupMoodPicker():

moodPicker.delegate = self
moodPicker.dataSource = self

We are saying for enabling the user interactions (delegate), and as the data source moodPicker should use the ShowViewController class's current instance.

Now so far, the code files look like the following:

//
//  ShowViewController.swift
//  App3
//
//  Created by Sakib Miazi on 5/10/23.
//

import UIKit

class ShowViewController: UIViewController {

    var messageFromFirstScreen:String? = "No message received!" //First screen can set this variable...
    
    let moods: [String] = ["Happy", "Meh", "Sad"] // moods for moodPicker...
    
    var selectedMood = "Happy"
    
    var labelMessage: UILabel!
    var labelMoodInstructions: UILabel!
    var moodPicker: UIPickerView!
    var buttonSendMood: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //setting the view background to white...
        view.backgroundColor = .white
        
        // MARK: initializing the UI elements...
        setupLabelMessage()
        setupLabelMoodInstructions()
        setupMoodPicker()
        setupButtonSendMood()
        
        // MARK: setting up constraints...
        initConstraints()
    }
    
    //setting up labelMessage...
    func setupLabelMessage(){
        labelMessage = UILabel()
        labelMessage.textColor = .systemBlue
        labelMessage.text = messageFromFirstScreen
        labelMessage.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(labelMessage)
    }
    
    // setting up labelMoodInstructions...
    func setupLabelMoodInstructions(){
        labelMoodInstructions = UILabel()
        labelMoodInstructions.text = "How are you feeling today?"
        labelMoodInstructions.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(labelMoodInstructions)
    }
    
    // setting up mood picker...
    func setupMoodPicker(){
        moodPicker = UIPickerView()
        moodPicker.isUserInteractionEnabled = true
        moodPicker.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(moodPicker)
        
        //patching the delegate and data source...
        moodPicker.delegate = self
        moodPicker.dataSource = self
    }
    
    // setting up buttonSendMood...
    func setupButtonSendMood(){
        buttonSendMood = UIButton(type: .system)
        buttonSendMood.setTitle("Send Mood back!", for: .normal)
        buttonSendMood.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(buttonSendMood)
    }
    
    // MARK: setting up constraints...
    func initConstraints(){
        NSLayoutConstraint.activate([
            //labelMessage constraints...
            labelMessage.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
            labelMessage.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 32),
            
            //labelMoodInstructions constraints...
            labelMoodInstructions.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
            labelMoodInstructions.topAnchor.constraint(equalTo: labelMessage.bottomAnchor, constant: 16),
            
            //mood picker constraints...
            moodPicker.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
            moodPicker.topAnchor.constraint(equalTo: labelMoodInstructions.bottomAnchor, constant: 16),
            
            //buttonSendMood constraints...
            buttonSendMood.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
            buttonSendMood.topAnchor.constraint(equalTo: moodPicker.bottomAnchor, constant: 16),
            
        ])
    }

}

// MARK: Conforming to required PickerView protocols...
extension ShowViewController: UIPickerViewDelegate, UIPickerViewDataSource{
    
    //returns the number of columns/components in the Picker View...
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    //returns the number of rows in the current component...
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return moods.count
    }
    
    //set the title of currently picked row...
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        // on change selection, update selectedMood...
        selectedMood = moods[row]
        return moods[row]
    }
    
}

//
//  ViewController.swift
//  App3
//
//  Created by Sakib Miazi on 5/10/23.
//

import UIKit

class ViewController: UIViewController {
    
    var textFieldMessage: UITextField!
    var buttonSend: UIButton!
    var labelMood: UILabel!
    var imageMood: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        //MARK: initializing the UI elements...
        setupTextFieldMessage()
        setupButtonSend()
        setupLabelMood()
        setupImageMood()
        
        //MARK: initializing the constraints...
        initConstraints()
        
        //MARK: on buttonSend tap...
        buttonSend.addTarget(self, action: #selector(onButtonSendTapped),
                             for: .touchUpInside)
    }
    
    // textFieldMessage...
    func setupTextFieldMessage(){
        textFieldMessage = UITextField()
        textFieldMessage.placeholder = "Put your message here"
        textFieldMessage.borderStyle = .roundedRect
        textFieldMessage.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(textFieldMessage)
    }
    
    //buttonSend...
    func setupButtonSend(){
        buttonSend = UIButton(type: .system)
        buttonSend.setTitle("Send", for: .normal)
        buttonSend.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(buttonSend)
    }
    
    //labelMood...
    func setupLabelMood(){
        labelMood = UILabel()
        labelMood.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(labelMood)
    }
    
    //imageMood...
    func setupImageMood(){
        imageMood = UIImageView()
        imageMood.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(imageMood)
    }
    
    // MARK: On button tapped delegate...
    @objc func onButtonSendTapped(){
        //initializing a new screen with ShowViewController...
        var showViewController = ShowViewController()
        
        //set the message to ShowViewController's messageFromFirstScreen variable...
        if let unwrappedMessage = textFieldMessage.text{
            if !unwrappedMessage.isEmpty{ // checking if the user has put any message...
                showViewController.messageFromFirstScreen = unwrappedMessage
            }
        }
        
        //push the screen to Stack...
        navigationController?.pushViewController(showViewController, animated: true)
    }
    
    //MARK: initializing 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),
            
            // labelMood constraints...
            labelMood.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
            labelMood.topAnchor.constraint(equalTo: buttonSend.bottomAnchor, constant: 16),// labelMood constraints...
            
            // imageMood constraints...
            imageMood.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
            imageMood.topAnchor.constraint(equalTo: labelMood.bottomAnchor, constant: 16),
        ])
        
    }


}