Using Custom cells to customize UITableViewCells

This tutorial shows how to use the cell style Custom in a Storyboard to customize the views of the cell:

Using Custom cells to customize table cells

  1. Use your TableExample project from the introductory UITableViewController tutorial or download TableExample.zip as a starting point.

  2. Open the storyboard and for the LabelCell in the Fruits-Controller, configure Custom as Cell Style:

    Cell Style: Custom
  3. Drag a Label and an Image View from the Object Library to the cell:

    Cell Style Custom Views
  4. Select the Image View and configure the Content Mode Center and Clips to Bounds in the Attributes Inspector so that images are displayed full-size but centered and cropped:

    Content Mode Centered and Clips to Bounds for Image View
  5. Select the Label and use Pin to add a Layout Constraint - 10pt to the Left, constrained to margins:

    Custom Cell Label Pin
  6. Use the Align button to create a Constraint Vertically in Container. Select Update Frames for Items of New Constraints to see the layout constraints in effect:

    Custom Cell Label Center
  7. Select the Image and use Pin to add Layout Constraints of zero to the Top, Right and Bottom. Disable Constrain to margins so that there are no margins between the image and the table view cell. Configure a fixed width of 125pt and use the Update Frames option to see the layout constraints in effect:

    Custom Cell Label Pin
  8. Check that the cell looks like this:

    Cell With Constraints

    Hint: Since Xcode 8 you can zoom the storyboard view larger - for example to 200%. This is really helpful for editing finicky layout constraints.

  9. Open FruitsTableViewController.swift in the source code editor, and above the controller class, declare a class FruitTableViewCell for the cell:

    import UIKit
    
    class FruitTableViewCell: UITableViewCell {
    }
    
    class FruitsTableViewController: UITableViewController {
        // ...
    }

    Hint: You could also create a separate Cocoa Touch Class in a separate file. But as cells defined in a storyboard are tightly coupled to the TableViewController, defining both in the same Swift file makes sense.

  10. Set FruitTableViewCell as Custom Class for the cell:

    Custom Cell - Custom Class
  11. Open the Assistant Editor and select Automatic so that you see the source code besides the selected element in the storyboard:

    Custom Cell Assistant Editor
  12. Drag an IBOutlet connection from the storyboard view on the left side to the FruitTableViewCell-class on the right side for the Label and the ImageView. Name them label and fruitImageView (caution: you cannot name the same as existing UITableViewCell properties like textLabel, image or imageView):

    Custom Cell Outlets

    The source of the class should like this:

    class FruitTableViewCell: UITableViewCell {
        @IBOutlet weak var label: UILabel!
    @IBOutlet weak var fruitImageView: UIImageView!
    }
  13. Customize the controller code in tableView(cellForRowAt:) to make use of the new cell class and its properties:

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "LabelCell", for: indexPath) as! FruitTableViewCell
    
        let fruitName = fruits[indexPath.row]
    cell.label?.text = fruitName
    cell.fruitImageView?.image = UIImage(named: fruitName)
    
        return cell
    }
  14. Run the app and check that the result looks like this:

    Custom Cell Result

Example code

Ralf Ebert Ralf Ebert is an independent software developer and trainer for Mac OS X and iOS. He makes the Page Layers and Straight ahead apps and conducts iOS trainings in Germany since 2009.