Prototype Cells in Tableview Tutorial in iOS8 with Swift

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 written in Swift so you will need Xcode 6. It can be downloaded at Apple's developer portal.

Update: Feb 14, 2017. The rewritten version in Swift for iOS 10.2 and Xcode 8.2.1 is available here.

Open Xcode and create a new Single View Application. For product name, use iOS8SwiftPrototypeCellsTutorial 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 add the images to the project. Select the Copy items if needed checkbox.

Go to the storyboard. In Xcode 6 view controllers are now square by default, so that you can create one user interface use just for multiple devices. In iOS8 you can layout the storyboard using constraints and size classes. Since this app is only going to be for the iPhone, you can disable size classes. In the File Inspector untick Use Size Classes.

Choose Keep size class data for: iPhone, and click Disable Size Classes.

Remove the View Controller from the Storyboard and drag a Table View Controller to the empty canvas. Go to the Editor Menu and choose Embed in -> Navigation Controller. Double-click the Title Bar in the Table View Controller and insert the titlle Transportation. 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. 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. 

Go to the ViewController.swift file. Since we have changed the default View Controller into an Table View Controller we also need to update the class declaration line in

class ViewController: UITableViewController {

Next, we create an array containing the transport items. We will yuse this array to fill in the title and image inside the Table View Cells.

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

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

 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. Add the tableView:cellForRowAtIndexPath method

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    var cell = tableView.dequeueReusableCellWithIdentifier("transportCell") as! UITableViewCell
    cell.textLabel?.text = transportItems[indexPath.row]
    var imageName = UIImage(named: transportItems[indexPath.row])
    cell.imageView?.image = imageName
    return cell

The dequeueReusableCellWithIdentifier 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 iOS8PrototypeCellsTutorial at the ioscreator repository on github.