TableViewController

In the previous sections of this tutorial, we have discussed the tableviews which are used to display a vertically scorable list in tabular form in iOS applications.

We have also created the applications in which we have added tableview to the UIViewController class with the custom prototype cells. However, we have not used TableViewControllers to manage the tableview so far in this tutorial.

In this section of this tutorial, we will use a tableviewcontroller for the tableviews. We will also create the example projects using prototype and static cells.

A TableViewController can be defined as a ViewController that specializes in managing the tableview. The TableViewController is responsible for maintaining the table along with its data and events. For this purpose, it uses the delegate and DataSource of its tableview property. The TableViewController is an instance of the UITableViewController class that inherits UIViewController.

We inherit the UITableViewController class when we need to display only tableview using our view controller and no other content since we can only add the tableview to a TableViewController in the interface builder. The TableViewController automatically provides the tableView property, and it already adopts the protocol UITableViewDelegate and UITableViewDataSource.

In addition to the tableview, the UITableViewController provides the following benefits.

It loads the tableview archived in the storyboard or the nib file. The TableViewController provides the tableview property to access the tableview in the storyboard.
It conforms to the UITableViewDelegate and UITableViewDatasource protocol by default. The subclass overrides the delegate and DataSource methods to provide the tableview implementation.
It automatically reloads the data for its tableview on the first appearance in the viewWillAppear(: ) method. It clears the selection every time the tableview is displayed.
It automatically toggles the edit mode of the table when the user taps an edit| done button in the navigation bar.
It automatically resizes the tableview on the appearance or disappearance of the onscreen keyboard.

Adding TableViewController to the interface

To add the TableViewController to the interface builder, consider the following instructions.

Create a new project in the XCode. We will get the following set of files in this newly created XCode Project.

In the image shown above, we got the project files that are generated by the XCode to run a single view iOS application. It also generates a ViewController.swift file, which is assigned to a Single View Controller in the storyboard. Delete this file and create a new subclass of UITableViewController, as shown in the following image.

In Main.storyboard file, delete the ViewController, search for the TableViewController in the object library, and drag the result to the interface.

It will add the tableviewcontroller in the storyboard.

If we run the above project, it will give the following output as the empty tableview.

Components of TableViewController

The following image displays various visible components in the tableviewcontroller.

TableView: The UITableViewController contains an in-built tableview. The tableview in the storyboard can be accessed by using tableView property in the TableViewController subclass. The tableview is an instance of the UITableView class.
TableViewCell: The tableview cell displays the actual content of the tableview controller. TableViewCell is an instance of the UITableViewCell class. The cell contains a content view of type UIView. We can add custom subviews to the content view in the tableview cell. However, there are two types of cells that can be displayed in the TableViewController: I.e., static cells to display static data and the prototype cell to customize a prototype of the data displayed in the cell.
NavigationController: The navigation controller is the one which controls the relationship among the ViewControllers in the storyboard. All the ViewControllers embed in the NavigationController contain the navigation bar where we can put title and bar button items. The navigation bar is the instance of the UINavigationBar class. We can show or hide the navigation bar for a tableview controller accordingly.

Example 1: Creating Simple TableViewController

In this example, we will create a simple TableViewController, in which we will show the grid of data shown in tabular form.

Project Structure

The custom tableviewcontroller subclass inherits the UITableViewController class and conforms to UITableViewDelegate and UITableViewDataSource protocol, which makes the custom subclass overriding all the methods of UITableViewDelegate and UITableViewDataSource protocol. The structure of the project containing TableViewController is shown in the following image.

Interface Builder

In Main.storyboard, delete the existing UIViewController, search for the UITableViewController, and drag the result to the storyboard. This will create the tableview controller with a prototype cell, shown in the following image.

As the tableviewcontroller contains a prototype cell, we need to develop this prototype cell with the content views. In this example, we are developing a prototype cell having title, subtitle, and detail. For this purpose, we will drag the UILabel to TableViewCell, as shown in the following image.

Here, we will also need a UITableViewCell subclass to contain the outlet connections of these UILabels.

MyTableViewCell.swift

import UIKit

class MyTableViewCell: UITableViewCell {
    @IBOutlet weak var titleLbl: UILabel!
    @IBOutlet weak var subTitleLbl: UILabel!
    @IBOutlet weak var detailLbl: UILabel!
    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
    }


}

MyTableViewController.swift

import UIKit


class MyTableViewController: UITableViewController {


    var titleArr = Array<String>()
    var subTitleArr = Array<String>()
    var detailArr = Array<String>()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        subTitleArr = ["Goa","Himachal Pradesh","Uttarakhand","Andman and Nicobar", "Mumbai"]
        titleArr = ["Punjim","Shimla","Dehradun","PortBlair","maharashtra"]
        detailArr = ["7 m", "2276 m", "447 m","16 m","14 m"]
        
    }


    // MARK: - Table view data source


    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }


    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return titleArr.count
    }


    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! MyTableViewCell


        cell.titleLbl.text = titleArr[indexPath.row]
        cell.subTitleLbl.text = subTitleArr[indexPath.row]
        cell.detailLbl.text = detailArr[indexPath.row]


        return cell
    }
    
    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 130
    }
}

Output

TableViewController Static Cells

Unlike TableView, we can also embed static cells in TableViewControllers. To add static cells, we need to change the cell type in attribute inspector of interface builder, as shown in the following image.

By default, it is selected to Dynamic Prototypes. However, we can make it to static cells, as shown in the above image.

If we change it to static cells, the tableviewcontroller will change its content to have a static section having three static cells, as shown in the following image.

We can increase the number of sections in the tableview and also the number of rows included by each section. Our TableViewController will look like the following image if we increase the number of sections in the tableview.