5.3. First screen, part 2: Setting up the View of the First Screen with TableView.

We have to build our first TableView here in this app. Before we build one, we need to understand what it is.

What is a TableView?

According to Apple developer documentation: Table views in iOS display rows of vertically scrolling content in a single column. Each row in the table contains one piece of your app’s content. For example, the Contacts app displays the name of each contact in a separate row, and the main page of the Settings app displays the available groups of settings. You can configure a table to display a single long list of rows, or you can group related rows into sections to make navigating the content easier.

A good example of a TableView is the Settings app on our iPhones or iPads.

Settings app

You can see that the Settings app has multiple groups of items in the list. For example, the first group has 'Sign in' and 'VPN' rows. The second group has the 'Screen Time' row. And the third group has 'General,' 'Accessibility,' and 'Privacy and Security' rows. These groups are called sections. Each group can have one or more rows.

Creating the View file of the first screen, FirstScreenView

Let's create a new file called 'FirstScreenView', just like what we did in the previous module. We will build the View of the First Screen in this file. Let's put the code in the file:

//
//  FirstScreenView.swift
//  App5_draft
//
//  Created by Sakib Miazi on 5/17/23.
//

import UIKit

class FirstScreenView: UIView {
    
    var tableViewExpense: UITableView!
    

    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .white
        
        //MARK: initializing a TableView...
        setupTableViewExpense()
        initConstraints()
    }
    
    func setupTableViewExpense(){
        tableViewExpense = UITableView()
        tableViewExpense.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(tableViewExpense)
    }
    
    //MARK: setting the constraints...
    func initConstraints(){
        NSLayoutConstraint.activate([
            tableViewExpense.topAnchor.constraint(equalTo: self.safeAreaLayoutGuide.topAnchor, constant: 8),
            tableViewExpense.bottomAnchor.constraint(equalTo: self.safeAreaLayoutGuide.bottomAnchor, constant: -8),
            tableViewExpense.leadingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leadingAnchor, constant: 8),
            tableViewExpense.trailingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.trailingAnchor, constant: -8),
        ])
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}

The FirstScreenView's background is set to white. The view only contains a TableView. We add 8 points of margin around the TableView using the constraints.

Patching FirstScreenView with ViewController

Then we will patch it up with the controller, ViewController. Open up View Controller.swift, and add the following code:

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

import UIKit

class ViewController: UIViewController {
    
    let firstScreen = FirstScreenView()
    
    override func loadView() {
        view = firstScreen
    }

    //codes omitted...
}

Designing each Cell/Row of the TableView:

Each row in our TableView (tableViewExpense) should look like this:

So we can see that there are three Labels there, displaying:

• The title of the expense.

• The amount the user spent.

• And the type of expense.

So, we need to design our TableView row. The view of the row is called a cell. We need to create a new Swift file to design the cell.

File -> New -> File... -> Cocoa Touch Class -> Next ->

Give the file's name as "TableViewExpenseCell" and set the file as the 'Subclass of' UITableViewCell. Then click Next. And then click Create.

Creating a Cell's View

Now, let's open the TableViewExpenseCell.swift file. You will see that there are two methods already given there (awakeFromNib() and setSelected()). We won't use them. Let's add the following code to the file:

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

import UIKit

class TableViewExpenseCell: UITableViewCell {
    var wrapperCellView: UIView!
    var labelTitle: UILabel!
    var labelAmount: UILabel!
    var labelType: UILabel!
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

    }
    
    //MARK: unused methods...
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

In the above code, you can see that we are adding four variables, three of which are Labels we know we have to put in the cell. We also added a UIView named wrapperCellView to hold all the UI elements inside. In other words, this wrapperCellView will act as a container for all the required UI elements of the cell. We use a UIView as a wrapper because UIViews have many configuration and styling options to create stable and nicer-looking cells.

Setting up the UI elements and initializing the constraints

Let's add the following codes in TableViewExpenseCell.swift file:

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

import UIKit

class TableViewExpenseCell: UITableViewCell {
    //codes omitted...
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupWrapperCellView()
        setupLabelTitle()
        setupLabelAmount()
        setupLabelType()
        initConstraints()
    }
    
    func setupWrapperCellView(){
        wrapperCellView = UITableViewCell()
        wrapperCellView.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(wrapperCellView)
    }
    
    func setupLabelTitle(){
        labelTitle = UILabel()
        labelTitle.translatesAutoresizingMaskIntoConstraints = false
        wrapperCellView.addSubview(labelTitle)
    }
    func setupLabelAmount(){
        labelAmount = UILabel()
        labelAmount.translatesAutoresizingMaskIntoConstraints = false
        wrapperCellView.addSubview(labelAmount)
    }
    func setupLabelType(){
        labelType = UILabel()
        labelType.translatesAutoresizingMaskIntoConstraints = false
        wrapperCellView.addSubview(labelType)
    }
    
    func initConstraints(){
        NSLayoutConstraint.activate([
            wrapperCellView.topAnchor.constraint(equalTo: self.topAnchor),
            wrapperCellView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            wrapperCellView.bottomAnchor.constraint(equalTo: self.bottomAnchor),
            wrapperCellView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
            
            labelTitle.topAnchor.constraint(equalTo: wrapperCellView.topAnchor, constant: 4),
            labelTitle.leadingAnchor.constraint(equalTo: wrapperCellView.leadingAnchor, constant: 4),
            labelTitle.heightAnchor.constraint(equalToConstant: 20),
            
            labelAmount.topAnchor.constraint(equalTo: labelTitle.bottomAnchor, constant: 4),
            labelAmount.leadingAnchor.constraint(equalTo: labelTitle.leadingAnchor),
            labelAmount.heightAnchor.constraint(equalToConstant: 20),
            
            labelType.topAnchor.constraint(equalTo: labelAmount.bottomAnchor, constant: 4),
            labelType.leadingAnchor.constraint(equalTo: labelTitle.leadingAnchor),
            labelType.heightAnchor.constraint(equalToConstant: 20),
            
            wrapperCellView.heightAnchor.constraint(equalToConstant: 76)
        ])
    }
    //Codes omitted....
}

In the above code, you can see that wrapperCellView is a sub-view of this cell. All the other elements are the subviews of wrapperCellView. If you look into the constraints, the wrapperCellView covers the entirety of the cell.

labelTitle constraints:

• We anchored the labelTitle's top and leading anchors to the top and leading anchors of wrapperCellView with a margin of 4 points.

• We are also setting the height of the Label with the third constraint to 20 points: labelTitle.heightAnchor.constraint(equalToConstant: 20). (Yes, you can set the size of the UI elements using constraints; in many cases, it is better to use constraints to set the heights and widths of a UI element).

The constraints for labelAmount and labelType are very similar to the constraints of labelTitle.

In the last constraint of the constraints array, we finally set the height of the wrapperCellView. The wrapperCellView is the container of other UI elements, so we need to set up the height of the container after we set the heights of other elements. We count the height of the container by adding the heights of the UI elements and the margins. (4+20+4+20+4+20+4 = 76).

Alright, we are done with designing our cell.

Patching the Cell with the TableView

Now let's open the FirstScreenView.swift file and add tableViewExpense.register(TableViewExpenseCell.self, forCellReuseIdentifier: "expenses") to the method setupTableViewExpense():

func setupTableViewExpense(){
    tableViewExpense = UITableView()
    tableViewExpense.register(TableViewExpenseCell.self, forCellReuseIdentifier: "expenses")
    tableViewExpense.translatesAutoresizingMaskIntoConstraints = false
    self.addSubview(tableViewExpense)
}

Here, we are registering the tableViewExpense with the cell we just designed. The most important part is forCellReuseIdentifier: "expenses" . It means when we access this table view from the controller, we need to use the cells the table view holds. We set an identifier, "expenses," for the cells. If you design multiple cells to display multiple kinds of information, you can later identify them with the identifier you set here.

That's it. We set up the view of the first screen and added a TableView with a designed Cell.