Using Custom cells to customize UITableViewCells

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

Using Custom cells to customize table cells

Last update: July 18, 2018 | Tested with: Xcode 9.4 and Xcode 10 Beta 4
  1. Use your NewspaperExample project from the introductory UITableViewController tutorial or download NewspaperExample.zip as a starting point.

  2. Open the storyboard and for the LabelCell of the TableViewController, configure Custom as Cell Style:

    Cell Style: Custom
  3. Drag two Labels and an Image View from the Library to the cell and style and position them like this:

    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. For both the Labels use Add New Constraints to add a Layout Constraint of 0pt to the Left and Top with the option constrained to margins activated:

    Custom Cell Label Add New Constraints
  6. For the Image View, create constraints to the top, right and bottom (Disable constrained to the margins so that there are no margins between the image and the table view cell) and create a width and height constraint:

    Custom Cell Image Add New Constraints
  7. 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.

  8. Open StoriesTableViewController.swift in the source code editor, and above the controller class, declare a class HeadlineTableViewCell for the cell:

    import UIKit
    
    struct Headline {
        // ...
    }
    
    class HeadlineTableViewCell: UITableViewCell {
    }
    
    class StoriesTableViewController: 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.

  9. Set HeadlineTableViewCell as Custom Class for the cell:

    Custom Cell - Custom Class
  10. 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
  11. Drag an IBOutlet connection from the storyboard view on the left side to the HeadlineTableViewCell-class on the right side for the Labels and the ImageView. Name the outlets headlineTitleLabel, headlineTextLabel and headlineImageView (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 HeadlineTableViewCell: UITableViewCell {
    
        @IBOutlet weak var headlineTitleLabel: UILabel!
    @IBOutlet weak var headlineTextLabel: UILabel!
    @IBOutlet weak var headlineImageView: UIImageView!
        
    }
  12. 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! HeadlineTableViewCell
    
        let headline = headlines[indexPath.row]
        cell.headlineTitleLabel?.text = headline.title
    cell.headlineTextLabel?.text = headline.text
    cell.headlineImageView?.image = UIImage(named: headline.image)
    
        return cell
    }
  13. Run the app and check that the result looks like this:

    Custom Cell Result

Btn download 3c20f11b8e Download the finished example project
Btn read 3c0e607615 iOS Developer Blog
Btn subscribe 930758687e Subscribe: Email · Twitter
Btn training bbbdf557d2 Next iOS training: 25. Februar - 01. März 2019, Stuttgart
Btn about 5378472193 About me · Contact