4.2. Patching the View class with the ViewController

Now that we are done with the FirstScreenView file, we have to initialize the view in the ViewController. So open the ViewController.swift file. Let's create an instance of the FirstScreenView:

//
//  ViewController.swift
//  App4
//

import UIKit

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

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

So, firstScreen is the instance of the View, FIrstScreenView. Now the view of the ViewController should be firstScreen, right? So, we need to define it when the view is loading (not when the view did load). So we can write the following:

//
//  ViewController.swift
//  App4
//

import UIKit

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

    //MARK: add the view to this controller while the view is loading...
    override func loadView() {
        view = firstScreen
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

Here we override the loadView() method so that we can patch the view with the controller while the view is loading.

Now, let's run the app:

Adding the PickerView logic

Let's define the moods like the app, App3, which we built previously.

class ViewController: UIViewController {
    
    //codes omitted...
    
    //moods for firstScreen.pickerMood...
    let moods: [String] = ["Happy", "Meh", "Sad"]
    
    var selectedMood = "Happy"
    
    //codes omitted...
}

Now let's adopt the protocols UIPickerViewDelegate and UIPickerViewDataSource.

class ViewController: UIViewController {
    
    //codes omitted...

}

//MARK: implementing mood PickerView...
extension ViewController: 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]
    }
}

Now, it's time to patch the PickerView's (pickerMood) delegate and data source to the ViewController. Let's add the following to viewDidLoad() method:

class ViewController: UIViewController {
    
    //codes omitted...

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //MARK: adding the PickerView delegate and data source...
        firstScreen.pickerMood.delegate = self
        firstScreen.pickerMood.dataSource = self
        
    }

}
//codes omitted...

Notice that I am calling pickerMood by writing firstScreen.pickerMood since the instance of the View where the PickerView resides is firstScreen.

The whole code so far is as follows:

//
//  ViewController.swift
//  App4
//

import UIKit

class ViewController: UIViewController {
    
    //MARK: initializing the First Screen View...
    let firstScreen = FirstScreenView()
    
    //moods for firstScreen.pickerMood...
    let moods: [String] = ["Happy", "Meh", "Sad"]
    
    var selectedMood = "Happy"
    
    //MARK: add the view to this controller while the view is loading...
    override func loadView() {
        view = firstScreen
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //MARK: adding the PickerView delegate and data source...
        firstScreen.pickerMood.delegate = self
        firstScreen.pickerMood.dataSource = self
        
    }

}

//MARK: implementing mood PickerView...
extension ViewController: 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]
    }
}

Now, let's run it.

See, we patched the PickerView with data!