12.3. Setting up the ViewController with TableView

Now we will patch up the view to the controller. Let's open up MainScreen -> ViewController.swift file, and add the following code there:

//
//  ViewController.swift
//  App12
//
//  Created by Sakib Miazi on 6/1/23.
//

import UIKit

class ViewController: UIViewController {

    let mainScreen = MainScreenView()
    
    override func loadView() {
        view = mainScreen
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        title = "My Contacts"
        
        //MARK: Make the titles look large...
        navigationController?.navigationBar.prefersLargeTitles = true
        
        //MARK: Put the floating button above all the views...
        view.bringSubviewToFront(mainScreen.floatingButtonAddContact)
    }
}

In the above code,

• On line 21, we set the title to "My Contacts."

• On line 24, we tell the navigation controller that we prefer large titles, not the default smaller ones.

• On line 27, we bring the floating button on top of all the views.

If you run the app now, it'd look like this:

Patching the Table View

We need to create a data model for the contacts to display them. Let's create a data model (a struct) Contact in Data Models -> Contact.swift file.

Create a new Group named 'Data Models' and add Contact.swift file inside.

//
//  Contact.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

import Foundation

struct Contact: Codable{
    var name: String
    var email: String
    var phone: Int
    
    init(name: String, email: String, phone: Int) {
        self.name = name
        self.email = email
        self.phone = phone
    }
}

Now let's open the ViewController.swift file, and add an array of Contacts for the table view.

//
//  ViewController.swift
//  App12
//
//  Created by Sakib Miazi on 6/1/23.
//

import UIKit

class ViewController: UIViewController {
    //codes omitted...    
    
    var contactsList = [Contact]()
    //codes omitted...
}

Adopting TableView protocols

Let's separate the adoption of the protocols from ViewController.swift. So, let's create a file Main Screen -> ContactsTableViewManager.swift and write the following code there:

//
//  ContactsTableViewManager.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

import Foundation
import UIKit

extension ViewController: UITableViewDelegate, UITableViewDataSource{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return contactsList.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: Configs.tableViewContactsID, for: indexPath) as! ContactsTableViewCell
        cell.labelName.text = contactsList[indexPath.row].name
        cell.labelEmail.text = contactsList[indexPath.row].email
        cell.labelPhone.text = "\(contactsList[indexPath.row].phone)"
        return cell
    }
}

Here we are extending ViewController and adopting UITableViewDelegate and UITableViewDataSource protocols in a separate file.

Then open up ViewController.swift again, and patch the delegate and data source of the table view in ViewController.

//
//  ViewController.swift
//  App12
//
//  Created by Sakib Miazi on 6/1/23.
//

import UIKit

class ViewController: UIViewController {

    //codes omitted...        
    override func viewDidLoad() {
       //codes omitted...
        
        //MARK: patching table view delegate and data source...
        mainScreen.tableViewContacts.delegate = self
        mainScreen.tableViewContacts.dataSource = self
        
        //MARK: removing the separator line...
        mainScreen.tableViewContacts.separatorStyle = .none
        
        //codes omitted...
    }
}