Prototype Cells in Table View iOS Tutorial

When using Table Views inside the Storyboard, prototype cells can be used to create some predefined or even custom layouts of the Table View Cells. In this tutorial we will create a basic Prototype cell, which includes an (optional) image and a title. This tutorial is made with Xcode 8.2.1 and built for iOS 10.2.

Open Xcode and create a new Single View Application.

For product name, use IOS10PrototypeCellsTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

We will need an image to scale, so download the following images, unzip them and drag the images to the Assets Catalog.

Go to the storyboard. Remove the View Controller from the Storyboard and drag a Navigation Controller to the Scene. This will also add  the Table View Controller. Double-click the Title Bar in the Table View Controller and insert the titlle Transportation. Select the Navigation Controller and go to The Attribute inspector. In the View Controller section check the "Is Initial View Controller" checkbox.

The storyboard should look like this.

We will use a basic layout of our cells, so select the Table View Cell and go to the Attributes inspector. In the Table View Section change the style to Basic and insert as Identifier transportCell. We will need this Identifier as a reference into our code. Note the Image field is still empty. We will insert the images using an array. 

Since the ViewController is removed in the storyboard, the ViewController.swift file should also be removed. Next, add a new class to the project. Choose iOS -> Source -> Cocoa Touch Class. Name the class TableCiewController and make it a subclass of UITableViewController. 

Go to the Storyboard, Select the Table View Controller and go to the Identity inspector. In the Custom Class section change the Class to TableViewController

Go to the TableViewController.swift file and declare the following array.

let transportItems = ["Bus","Helicopter","Truck","Boat","Bicycle","Motorcycle","Plane","Train","Car","Scooter","Caravan"]

We will use only one section in the Table View. Change the numberOfSections(in:) method to

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

We also need to determine the number of rows in our Table View. Change the tableView:numberOfRowsInSection method to

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return transportItems.count
}

The array's count method returns the number of item inside the array which is equal to the number of rows needed. Finally we will need to fill our cells with data. Change the tableView:cellForRowAtIndexPath method to

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

    cell.textLabel?.text = transportItems[indexPath.row]
        
    var imageName = UIImage(named: transportItems[indexPath.row])
    cell.imageView?.image = imageName

    return cell
}

 

The dequeueReusableCell(withIdentifier:, for:) method returns a reusable cell located by our previously defined identifier. The cell is then filled with the current index of our array, the index is from the index path of the Table View. Note the filename of the UIImage(named) method needs no fille extension. This will be appended automatically for png files.

Build and Run the project. A Table View is displayed with our transport icons and titles.

You can download the source code of the IOS10PrototypeCellsTutorial at the ioscreator repository on github.