iOS: Table View Controller
The tableviews that are used in iOS applications to display a vertically scoreable list in tabular form were covered in earlier sections of this article.
Additionally, we have developed the applications in which we have customized prototype cells and added tableview to the UIViewController class. But up until now in this lesson, we haven’t managed the tableview using TableViewControllers.
We will use a tableviewcontroller for the tableviews in this phase of the tutorial. We will also use prototype and static cells to develop the example projects.
A ViewController with a focus on tableview management is known as a TableViewController. The table, its data, and its events are all under the control of the TableViewController. It makes use of its tableview property’s delegate and DataSource for this. An instance of the UITableViewController class, which derives from UIViewController, is the TableViewController.
class UITableViewController : UIViewController
- The tableview preserved in the nib file or storyboard is loaded. To access the tableview in the storyboard, use the tableview property provided by the TableViewController.
- By default, it complies with UITableViewDelegate and UITableViewDatasource protocol. To provide the tableview implementation, the subclass overrides the DataSource and delegate methods.
- Upon first appearance, it reloads the data for its tableview automatically using the viewWillAppear(: ) method. Each time the tableview is shown, the selection is cleared.
- When a user touches an edit| done button in the navigation bar, the table’s edit mode is automatically toggled.
- When the onscreen keyboard appears or disappears, the tableview automatically resizes.
Adding TableViewController to the interface
- In XCode, start a new project. The files included in this freshly made XCode Project are as follows.
The project files that XCode generates to execute a single view iOS application are seen in the above image. Additionally, a ViewController.swift file is created and assigned to a storyboard’s Single View Controller. Remove this file and make a new UITableViewController subclass, like the one in the picture below.
- Remove the ViewController from the Main.storyboard file, find the TableViewController in the object library, and drag the selection to the interface.
The tableviewcontroller will be added to the storyboard.
The empty tableview will be the result of running the aforementioned project.
Components of TableViewController
The tableviewcontroller’s visible components are shown in the accompanying image.
- TableView: A tableview is incorporated into the UITableViewController. The TableView property in the TableViewController subclass can be used to access the tableview in the storyboard. The tableview is a UITableView class instance.
- TableViewCell: The tableview cell shows the tableview controller’s real content. An instance of the UITableViewCell class is TableViewCell. A UIView-type content view is present in the cell. The content view in the tableview cell can have custom subviews added to it. However, the TableViewController can display two different types of cells: prototype cells, which allow you to customize a prototype of the data presented in the cell, and static cells, which display static data.
- NavigationController: The relationship between the ViewControllers in the storyboard is managed by the navigation controller. The navigation bar, which holds the title and bar button items, is included into every ViewController that is a part of the NavigationController. The UINavigationBar class instance is what makes up the navigation bar. Depending on the situation, we can display or conceal a tableview controller’s navigation bar.
Example 1: Creating Simple TableViewController
To display the data grid in tabular form, we will build a basic TableViewController in this example.
Project Structure
Because it adheres to the UITableViewDelegate and UITableViewDataSource protocols and inherits the UITableViewController class, the custom tableviewcontroller subclass overrides every function in the corresponding protocols. The project structure that includes TableViewController is depicted in the image below.
Interface Builder
Delete the current UIViewController from Main.storyboard, look for the UITableViewController, and drag it to the storyboard. As you can see in the accompanying screenshot, this will generate the tableview controller using a prototype cell.
We must construct this prototype cell with the content views because the tableviewcontroller contains one. We are creating a prototype cell with a title, subtitle, and detail in this example. To achieve this, drag the UILabel to TableViewCell, as the example in the figure below illustrates.
The output connections of these UILabels will need to be contained in a UITableViewCell subclass in this case.
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
TableViewControllers allow us to embed static cells as well, unlike TableView. As seen in the accompanying image, we must modify the cell type in the interface builder’s attribute inspector in order to add static cells.
It is set to Dynamic Prototypes by default. Nevertheless, as the figure above illustrates, we can reach static cells.
The tableviewcontroller’s content will alter to include a static section with three static cells if we change it to static cells, as seen in the accompanying image.
Both the total number of parts and the number of rows that each section includes in the tableview are scalable. If we increase the number of sections in the tableview, our TableViewController will appear as shown in the following image.
