Table View Controller Tutorial

Objective

This app is built to demonstrate adding a UITableViewController to your app. A UITableViewController allows the use of static cells. The goal of using static cells is to achieve the look of a Settings screen similar to the iPhone Settings screen. In such a table view the cells are pre-determined so static cells are ideal.

Drag a Table View Controller onto your Main.storyboard

Create a subclass of UITableViewController and name the new file SettingsViewController.

Edit the SettingsViewController to look like this

import UIKit
class SettingsViewController: UITableViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

Set the class name in the Identiy inspector to the newly create SettingsViewController subclass of the generic UITableViewController.

Drag a Navigation Item control to the SettingsViewController Navigation bar in the storyboard canvas and name the title “Settings”.

Change the Table View content from Dynamic Prototypes to Static Cells in the Attributes Inspector.

There should be 2 sections so add one more section for the Table View.

The Table View cells, sections can be edited using the Document outline of Xcode.

The cells row size can be customized in the Size inspector

Updated SettingsViewController

import UIKit
class SettingsViewController: UITableViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // setting a background color to differentiate from cells
        view.backgroundColor = .orange
    
        // set a zero height view for the footer to remove empty cells
        tableView.tableFooterView = UIView(frame: .zero)
    }
}

Drag a Map Kit View over to the Map Cell. Set the constraints to all the edges of the cell at value 0.

Drag six UILabel controls to represent a Name, Email, Phone attribute along with the value labels for a fictional Person object.

Key Label constraints are set up as follows:

Value label constraints are set up as follows:

Error due to MKMapView being undeclared. We need to import MapKit

After importing MapKit the updated SettingsViewController should be as follows:

import UIKit
import MapKit

class SettingsViewController: UITableViewController {
    
    // labels
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var emailLabel: UILabel!
    @IBOutlet weak var phoneLabel: UILabel!
    
    // mapview
    @IBOutlet weak var mapView: MKMapView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // setting a background color to differentiate from cells
        view.backgroundColor = .orange
        
        // set a zero height view for the footer to remove empty cells
        tableView.tableFooterView = UIView(frame: .zero)
        
        // set ui elements
        configureView()
    }
    
    func configureView() {
        nameLabel.text = "John Appleseed"
        emailLabel.text = "appleseed@test.com"
        phoneLabel.text = "555-456-5688"
        
        // set the center of the map to New York
        let annotation = MKPointAnnotation()
        annotation.coordinate = CLLocationCoordinate2DMake(40.6974034,-74.1197636)
        
        mapView.setCenter(annotation.coordinate, animated: true)
        mapView.addAnnotation(annotation)
        
    }
}

Control-drag UILabels to the SettingViewController

Control-drag the MapView to the SettingsViewController

The completed Main.storyboard file. A View Controller embedded in a Navigation Controller. The View Controller has a UIButton centered vertically and horizontally called “Settings”. Tapping on the “Settings” button performs a push segue to the Table View Controller (SettingsViewController). The SettingsViewController consists of six UILabel’s and a Map View. The UI elements are updated in the SettingsViewController using test values. In a production app the values of the SettingsViewController would be injected via an initializer or property on the SettingsViewController.

Here is our completed Table View tutorial UI.