6.1. Updating the TableView Cell to accommodate an ImageView

Let's open TableViewExpenseCell.swift file to add an ImageView. Let's add a new variable named, imageViewReceipt of type UIImageView in the file, set it up, and initialize its constraints. Add the following code to TableViewExpenseCell.swift file:

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

import UIKit

class TableViewExpenseCell: UITableViewCell {
    //codes omitted...
    
    //MARK: declaring the ImageView for receipt image...
    var imageReceipt: UIImageView!
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        //Codes omitted...
        
        //MARK: defining the ImageView for receipt image...
        setupimageReceipt()
        
        initConstraints()
    }
    
    //Codes omitted...
    
    //Adding the ImageView for receipt...
    func setupimageReceipt(){
        imageReceipt = UIImageView()
        imageReceipt.image = UIImage(systemName: "photo")
        imageReceipt.contentMode = .scaleToFill
        imageReceipt.clipsToBounds = true
        imageReceipt.layer.cornerRadius = 10
        imageReceipt.translatesAutoresizingMaskIntoConstraints = false
        wrapperCellView.addSubview(imageReceipt)
    }
    
    //MARK: initializing the constraints...
    func initConstraints(){
        NSLayoutConstraint.activate([
            wrapperCellView.topAnchor.constraint(equalTo: self.topAnchor,constant: 10),
            wrapperCellView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 10),
            wrapperCellView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -10),
            wrapperCellView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -10),
            
            labelTitle.topAnchor.constraint(equalTo: wrapperCellView.topAnchor, constant: 2),
            labelTitle.leadingAnchor.constraint(equalTo: imageReceipt.trailingAnchor, constant: 8),
            labelTitle.heightAnchor.constraint(equalToConstant: 32),
            labelTitle.widthAnchor.constraint(lessThanOrEqualTo: wrapperCellView.widthAnchor),
            
            labelAmount.topAnchor.constraint(equalTo: labelTitle.bottomAnchor, constant: 2),
            labelAmount.leadingAnchor.constraint(equalTo: labelTitle.leadingAnchor),
            labelAmount.heightAnchor.constraint(equalToConstant: 32),
            labelAmount.widthAnchor.constraint(lessThanOrEqualTo: labelTitle.widthAnchor),
            
            labelType.topAnchor.constraint(equalTo: labelAmount.bottomAnchor, constant: 2),
            labelType.leadingAnchor.constraint(equalTo: labelTitle.leadingAnchor),
            labelType.heightAnchor.constraint(equalToConstant: 32),
            labelType.widthAnchor.constraint(lessThanOrEqualTo: labelTitle.widthAnchor),
            
            imageReceipt.leadingAnchor.constraint(equalTo: wrapperCellView.leadingAnchor, constant: 8),
            imageReceipt.centerYAnchor.constraint(equalTo: wrapperCellView.centerYAnchor),
            //MARK: it is better to set the height and width of an ImageView with constraints...
            imageReceipt.heightAnchor.constraint(equalTo: wrapperCellView.heightAnchor, constant: -20),
            imageReceipt.widthAnchor.constraint(equalTo: wrapperCellView.heightAnchor, constant: -20),
            
            wrapperCellView.heightAnchor.constraint(equalToConstant: 104)
        ])
    }
    
    //codes omitted...

}

In the above code, we have a few very important key points to discuss:

Defining the ImageView imageReceipt:

• Let's look into the method where we define the new imageReceipt ImageView (setupimageReceipt()). We wrote: imageReceipt.image = UIImage(systemName: "photo"). We are trying to set a default image for the ImageView. For the default image, we select an iOS system image named "photo" (). Xcode ships with these system images. But we need to know the names of those images. Fortunately, we can easily find the names of the system images. You need to install an Apple developer app called "SF Symbols" on your Mac. Download, install, and learn how to use the app.

• Next, we write imageReceipt.contentMode = .scaleToFill to say, fill the ImageView with the image by resizing it. For more details on contentMode, read: https://www.delasign.com/blog/uiimageview-content-modes/

• We write imageReceipt.clipsToBounds = true to say, clip the image if it overflows the ImageView frame.

• We write imageReceipt.layer.cornerRadius = 10 to make the corners of the ImageView rounded with a radius of 10.

Constraints of the ImageView imageReceipt:

• We place the ImageView to the left of the cell. So, for all the other UI elements, we set their leadingAnchor to imageReceipt's trailingAnchor with a gap of 8 points. For example: labelTitle.leadingAnchor.constraint(equalTo: imageReceipt.trailingAnchor, constant: 8).

• It's better to define the heights and widths of the UI elements while designing the cell. We set the heights of the Labels to 32 points. For example, labelTitle.heightAnchor.constraint(equalToConstant: 32). Also, we define the constraints of the Labels so that they can take all the remaining space in the cell after we populate the ImageView. For example, labelTitle.widthAnchor.constraint(lessThanOrEqualTo: wrapperCellView.widthAnchor). lessThanOrEqualTo means that it will try to occupy the whole width of the wrapper; if it can't, it will occupy the remaining space.

• We are using the width of the cell to create a square ImageView by writing: imageReceipt.heightAnchor.constraint(equalTo: wrapperCellView.heightAnchor, constant: -20). It means if the wrapper's width is 104, the frame size of the ImageView will be 84x84.

• Finally, we add all the constraint values (2+32+2+32+2+32+2) and define the wrapper's height to 104.

Now that we are done with the file, we move to the Add Expense Screen.

Appendix

Installing and using SF Symbols app

• Download the SF Symbols app from here: https://developer.apple.com/sf-symbols/

• Open the .DMG file

• Then Install the .pkg file by double-clicking on it:

• Let's open the app. Press Command + Space to open the spotlight search. Then look for SF Symbols and press return to open it. \

  
• Now we can use the app to find the appropriate iOS system icon/symbol for us and fetch the name of it. Here I am finding the name for the icon I will use:\