5.6. Second screen, part 2: Setting up Add Expense View Controller

Now, let's open the AddExpenseViewController.swift file. We need to patch this view controller with the front-end view (AddExpenseView) we created. So, we write the following code to load the view:

//
//  AddExpenseViewController.swift
//  App5
//
//  Created by Sakib Miazi on 5/18/23.
//

import UIKit

class AddExpenseViewController: UIViewController {

    //MARK: initializing the ADDExpenseView...
    let addExpenseScreen = AddExpenseView()
    
    //MARK: set the current view to addExpenseScreen...
    override func loadView() {
        view = addExpenseScreen
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

}

Patching the PickerView to pick the type of expense

Now, let's patch the PickerView (addExpenseScreen.pickerType) to the controller.

We will pick the type of expense using this PickerView. We know that we added an array of four expense types in ViewController.swift. Since we need to use the same array instead of writing the array again, we can define a static array to be shared with all the classes in the project. The keyword static makes it persistent in the memory while the app is running. Do not make all the data static; you can keep it static if it is small shared data.

Defining static array 'types'

Let's create a new Swift file named "Utilities.swift" in the project.

Let's add the following code to the new file:

//
//  Utilities.swift
//  App5
//
//  Created by Sakib Miazi on 5/18/23.
//

import Foundation

class Utilities{
    static let types = ["Groceries", "Rent", "Subscriptions", "Gadgets and Electronics"]
}

Here, the Utilities class holds these usable shared data like the types array. We kept the types array as static.

Now let's get back to implementing the PickerView in AddExpenseViewController.swift file.

Adopting the Picker View's protocols

So, we again use the extension keyword to adopt UIPickerViewDelegate and UIPickerViewDataSource protocols. Let's write the code below to AddExpenseViewController.swift file:

//
//  AddExpenseViewController.swift
//  App5
//
//  Created by Sakib Miazi on 5/18/23.
//

import UIKit

class AddExpenseViewController: UIViewController {
    //MARK: by default Groceries is selected...
    var selectedType = "Groceries"
    
    //codes omitted...
}

//MARK: adopting the required protocols...
extension AddExpenseViewController: UIPickerViewDelegate, UIPickerViewDataSource{
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        //MARK: we are using only one section...
        return 1
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        //MARK: we are displaying the options from Utilities.types...
        return Utilities.types.count
    }
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        
        //MARK: updating the selected type when the user picks this row...
        selectedType = Utilities.types[row]
        return Utilities.types[row]
    }
}

We have only one component to select in this PickerVIew, so the numberOfComponents should return just 1. We are displaying the Utilities.types array, so numberOfRowsInComponent should return Utilities.types.count. We keep a variable selectedType to keep the current selection of the user. So, we set the currently selected row to selectedType variable in titleForRow and return Utilities.types[row].

Now, we need to patch the delegate and data sources of the PickerView with AddExpenseViewController. Add the following couple of lines in viewDidLoad() method:

//
//  AddExpenseViewController.swift
//  App5
//
//  Created by Sakib Miazi on 5/18/23.
//

import UIKit

class AddExpenseViewController: UIViewController {
    //codes omitted...
        
    override func viewDidLoad() {
        super.viewDidLoad()
        //MARK: patching delegate and datasource of the type PickerView...
        addExpenseScreen.pickerType.dataSource = self
        addExpenseScreen.pickerType.delegate = self
    }

}
//codes omitted...

Now, we need to update ViewController.swift file to be able to navigate to AddExpenseViewController.swift and get back with the new expense. So, let's add an instance variable of ViewController named "delegate" to AddExpenseViewController.

//
//  AddExpenseViewController.swift
//  App5
//
//  Created by Sakib Miazi on 5/18/23.
//

import UIKit

class AddExpenseViewController: UIViewController {
    //MARK: delegate to ViewController when getting back...
    var delegate:ViewController!
    //codes omitted...
}
//codes omitted...

Housekeeping: Updating Navigation controller and patching Utilities.types in View Controller

Open the ViewController.swift file. Now, let's complete the plus (+) button actions. When we tap on the + button on the Navigation Bar, we need to switch from the First Screen to Add Expense Screen. So let's write the following code in the method @objc func onAddBarButtonTapped():

//
//  ViewController.swift
//  App5
//
//  Created by Sakib Miazi on 5/18/23.
//

import UIKit

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

    override func viewDidLoad() {
        //codes omitted...
        
        //MARK: setting the add button to the navigation controller...
        navigationItem.rightBarButtonItem = UIBarButtonItem(
            barButtonSystemItem: .add, target: self,
            action: #selector(onAddBarButtonTapped)
        )
    }
    
    @objc func onAddBarButtonTapped(){
        let addExpenseController = AddExpenseViewController()
        addExpenseController.delegate = self
        navigationController?.pushViewController(addExpenseController, animated: true)
    }


}

//codes omitted...

The code above creates a new Add Expense Screen, sets the delegate, and pushes it on the Navigation Stack. Now let's run the app:

Updating ViewController to use Utilities.types instead of the local array.

Now let's remove the array types from ViewController.swift:

//remove the line:
let types = ["Groceries", "Rent", "Subscriptions", "Gadgets and Electronics"]

Also, we can now remove the dummy data from the codes. So remove the following lines from ViewController's viewDidLoad() method:

//remove the lines:
expenses.append(Expense(title: "Pixel 7 pro", amount: 750.0, type: types[3]))
expenses.append(Expense(title: "iPhone SE", amount: 349.0, type: types[3]))
expenses.append(Expense(title: "Target", amount: 150.0, type: types[0]))
expenses.append(Expense(title: "Netflix", amount: 19.0, type: types[2]))

So far, the updated controller codes are as follows:

ViewController.swift

//
//  ViewController.swift
//  App5
//
//  Created by Sakib Miazi on 5/18/23.
//

import UIKit

class ViewController: UIViewController {
    
    let firstScreen = FirstScreenView()
    
    //MARK: expenses array to populate TableView...
    var expenses = [Expense]()
    
    //MARK: predefined types of expenses...
    let types = ["Groceries", "Rent", "Subscriptions", "Gadgets and Electronics"]
    
    override func loadView() {
        view = firstScreen
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Expense App"
        
        //MARK: patching the table view delegate and datasource to controller...
        firstScreen.tableViewExpense.delegate = self
        firstScreen.tableViewExpense.dataSource = self
                
        //MARK: setting the add button to the navigation controller...
        navigationItem.rightBarButtonItem = UIBarButtonItem(
            barButtonSystemItem: .add, target: self,
            action: #selector(onAddBarButtonTapped)
        )
    }
    
    @objc func onAddBarButtonTapped(){
        let addExpenseController = AddExpenseViewController()
        addExpenseController.delegate = self
        navigationController?.pushViewController(addExpenseController, animated: true)
    }


}

extension ViewController: UITableViewDelegate, UITableViewDataSource{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return expenses.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "expenses", for: indexPath) as! TableViewExpenseCell
        cell.labelTitle.text = expenses[indexPath.row].title
        if let uwAmount = expenses[indexPath.row].amount{
            cell.labelAmount.text = "Cost: $\(uwAmount)"
        }
        if let uwType = expenses[indexPath.row].type{
            cell.labelType.text = "Type: \(uwType)"
        }
        return cell
    }
    
    
}

AddExpenseViewController.swift

//
//  AddExpenseViewController.swift
//  App5
//
//  Created by Sakib Miazi on 5/18/23.
//

import UIKit

class AddExpenseViewController: UIViewController {
    
    //MARK: delegate to ViewController when getting back...
    var delegate:ViewController!
    
    //MARK: by default Groceries is selected...
    var selectedType = "Groceries"

    //MARK: initializing the ADDExpenseView...
    let addExpenseScreen = AddExpenseView()
    
    //MARK: set the current view to addExpenseScreen...
    override func loadView() {
        view = addExpenseScreen
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()

        //MARK: patching delegate and datasource of the type PickerView...
        addExpenseScreen.pickerType.dataSource = self
        addExpenseScreen.pickerType.delegate = self
    }

}

//MARK: adopting the required protocols...
extension AddExpenseViewController: UIPickerViewDelegate, UIPickerViewDataSource{
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        //MARK: we are using only one section...
        return 1
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        //MARK: we are displaying the options from Utilities.types...
        return Utilities.types.count
    }
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        
        //MARK: updating the selected type when the user picks this row...
        selectedType = Utilities.types[row]
        return Utilities.types[row]
    }
}