6.2. Add Expense Screen

The screen would be something like this:

We have:

• Two TextFields

• One Button to choose the type of expense

• One Button (use the Camera icon as the background) to pick the image for receipt.

• FInally, the Add Expense Button.

AddExpenseView

Let's open the AddExpenseView.swift file and update the code. Remove the PickerView and add two buttons (to select expense type and pick receipt image).

Let's see the updated code in the following:

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

import UIKit

class AddExpenseView: UIView {
    var textFieldTitle: UITextField!
    var textFieldAmount: UITextField!
    var buttonSelectType: UIButton!
    var buttonTakePhoto: UIButton!
    var buttonAdd: UIButton!

    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .white
        
        setuptextFieldTitle()
        setuptextFieldAmount()
        setupbuttonSelectType()
        setupbuttonTakePhoto()
        setupbuttonAdd()
        
        initConstraints()
    }
    
    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 setupbuttonSelectType(){
        buttonSelectType = UIButton(type: .system)
        buttonSelectType.setTitle("Select the type of expense:", for: .normal)
        buttonSelectType.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(buttonSelectType)
    }
    func setupbuttonTakePhoto(){
        buttonTakePhoto = UIButton(type: .system)
        buttonTakePhoto.setTitle("", for: .normal)
        buttonTakePhoto.setImage(UIImage(systemName: "camera.fill"), for: .normal)
        buttonTakePhoto.contentHorizontalAlignment = .fill
        buttonTakePhoto.contentVerticalAlignment = .fill
        buttonTakePhoto.imageView?.contentMode = .scaleAspectFit
        buttonTakePhoto.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(buttonTakePhoto)
    }
    func setupbuttonAdd(){
        buttonAdd = UIButton(type: .system)
        buttonAdd.setTitle("Add Expense", for: .normal)
        buttonAdd.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(buttonAdd)
    }
    
    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),
            
            buttonSelectType.topAnchor.constraint(equalTo: textFieldAmount.bottomAnchor, constant: 16),
            buttonSelectType.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
            
            buttonTakePhoto.topAnchor.constraint(equalTo: buttonSelectType.bottomAnchor, constant: 16),
            buttonTakePhoto.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
            buttonTakePhoto.widthAnchor.constraint(equalToConstant: 100),
            buttonTakePhoto.heightAnchor.constraint(equalToConstant: 100),
            
            buttonAdd.topAnchor.constraint(equalTo: buttonTakePhoto.bottomAnchor, constant: 16),
            buttonAdd.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
        ])
    }
    
   
    
    //MARK: unused functions...
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

Setting up the Buttons

buttonSelectType:

Let's look into the setup method for buttonSelectType:

func setupbuttonSelectType(){
    buttonSelectType = UIButton(type: .system)
    buttonSelectType.setTitle("Select the type of expense:", for: .normal)
    buttonSelectType.translatesAutoresizingMaskIntoConstraints = false
    self.addSubview(buttonSelectType)
}

It looks pretty straight forward now. At some point, we need to tweak the setup a little.

buttonTakePhoto:

Let's look into the setup method:

func setupbuttonTakePhoto(){
    buttonTakePhoto = UIButton(type: .system)
    buttonTakePhoto.setTitle("", for: .normal)
    buttonTakePhoto.setImage(UIImage(systemName: "camera.fill"), for: .normal)
    buttonTakePhoto.contentHorizontalAlignment = .fill
    buttonTakePhoto.contentVerticalAlignment = .fill
    buttonTakePhoto.imageView?.contentMode = .scaleAspectFit
    buttonTakePhoto.translatesAutoresizingMaskIntoConstraints = false
    self.addSubview(buttonTakePhoto)
}

This button is a little different. We set a background to it, which shows a camera icon instead of text. So, we set an empty title to it. Then set an image of the system name, "camera.fill". (I found the name using the SF Symbols app). These couple of lines are very important.

For example, buttonTakePhoto.contentHorizontalAlignment = .fill means that the contents of this button can fill the whole width of the button. In our case, the content is the camera image inside the button. The same idea works with the next line: buttonTakePhoto.contentVerticalAlignment = .fill to allow the image of the button fill the height of the button.

Then, we set the frame of the image so that the image can be loaded with the content mode scaleAspectFit. (buttonTakePhoto.imageView?.contentMode = .scaleAspectFit).

The Constraints

The constraints here are pretty straightforward, except for the buttonTakePhoto. Let's look into the constraints for the Button:

buttonTakePhoto.topAnchor.constraint(equalTo: buttonSelectType.bottomAnchor, constant: 16),
buttonTakePhoto.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
//MARK: setting buttonTakePhoto's height and width...
buttonTakePhoto.widthAnchor.constraint(equalToConstant: 100),
buttonTakePhoto.heightAnchor.constraint(equalToConstant: 100),

We set the height and width of buttonTakePhoto. When you are working with images, you should set a frame size. The best way to set the frame size is to do it using the constraints. Use widthAnchor as the width and heightAnchor as the height of the frame.