5.5. Second screen, part 1: Setting up the View of the Add Expense Screen

When the user clicks the plus Bar button (+), we should populate a screen to add a new expense. So, let's create two new files: AddExpenseView.swift (subclass of UIView) and AddExpenseViewController.swift (subclass of UIViewController). And add them to a new group, "Add Expense Screen." (Use the Cocoa Touch Class template, not a Swift file template).

Setting up the View

We can see that we need the following UI elements:

• Two TextFields to put the title and amount of the expense.

• One Label to display "Select the type of expense:"

• One PickerView to select the types of expenses.

• One button to finally Add an expense.

Let's open AddExpenseView.swift file and put the following codes to build the front end:

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

import UIKit

class AddExpenseView: UIView {

    var textFieldTitle: UITextField!
    var textFieldAmount: UITextField!
    var labelType: UILabel!
    var pickerType: UIPickerView!
    var buttonAdd: UIButton!

    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .white
        
        setuptextFieldTitle()
        setuptextFieldAmount()
        setuplabelType()
        setuppickerType()
        setupbuttonAdd()
        
        initConstraints()
    }
    
//    MARK: methods to initialize the UI elements...
    func setuptextFieldTitle(){
        textFieldTitle = UITextField()
        textFieldTitle.placeholder = "Put title"
        textFieldTitle.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(textFieldTitle)
    }
    func setuptextFieldAmount(){
        textFieldAmount = UITextField()
        textFieldAmount.placeholder = "Put amount"
        textFieldAmount.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(textFieldAmount)
    }
    func setuplabelType(){
        labelType = UILabel()
        labelType.textColor = .systemGray
        labelType.text = "Select the type of expense:"
        labelType.textAlignment = .center
        labelType.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(labelType)
    }
    func setuppickerType(){
        pickerType = UIPickerView()
        pickerType.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(pickerType)
    }
    func setupbuttonAdd(){
        buttonAdd = UIButton(type: .system)
        buttonAdd.setTitle("Add Expense", for: .normal)
        buttonAdd.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(buttonAdd)
    }
    
    //MARK: initialize the constraints...
    func initConstraints(){
        NSLayoutConstraint.activate([
            textFieldTitle.topAnchor.constraint(equalTo: self.safeAreaLayoutGuide.topAnchor, constant: 32),
            textFieldTitle.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
            
            textFieldAmount.topAnchor.constraint(equalTo: textFieldTitle.bottomAnchor, constant: 16),
            textFieldAmount.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
            
            labelType.topAnchor.constraint(equalTo: textFieldAmount.bottomAnchor, constant: 16),
            labelType.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
            
            pickerType.topAnchor.constraint(equalTo: labelType.bottomAnchor, constant: 8),
            pickerType.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
            
            buttonAdd.topAnchor.constraint(equalTo: pickerType.bottomAnchor, constant: 16),
            buttonAdd.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
        ])
    }
    
   
    
    //MARK: unused methods...
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

This file should be very straightforward to understand. Now that we have added our front end, we will now get to the controller code (AddExpenseViewController).