Self-Sizing Table View Cells

If you’ve ever created custom table view cells, chances are you’ve spent a lot of time sizing table view cells in code. Frankly, this approach is tedious, difficult and error-prone.

In this tutorial, you’ll learn how to create and size table view cells dynamically to fit their contents. You might think, “That’s going to take a lot of work!” Actually, it’s quite simple, as you’ll soon see. This tutorial will cover the following:

• Creating table view cell layouts to size according to its content’s size.
• Enabling dynamic type for more extensive app accessibility support.
• Configuring Auto Layout to support dynamic cell sizes.
• Enabling a cell to expand or collapse in size.

Getting Started

Download the starter project by clicking the Download Materials button at the top or bottom of this tutorial.

Imagine you have a movie-crazy client who wants an app to show off the work of their favorite film directors. And not just any directors: auteurs.

“Auteurs?” you ask, “That sounds French.”

Oui, c’est ça. The auteur theory of film making arose in France in the 1940s. It basically means the director is the driving creative force behind a film. Not every director is an auteur — only those who have powerful creative control over the finished movie. Think Tarantino or Scorsese.

“There’s one problem,” your client says. “We started making the app, but we’re stumped at how to display the content in a table view. Our table view cells have to resize (gulp!) dynamically! Can you make it work?”

You suddenly feel the urge to don a spiffy beret and start shouting orders!

Back in the days of iOS 6, Apple introduced a wonderful new technology: Auto Layout. Developers rejoiced; parties commenced in the streets; bands wrote songs to celebrate its greatness.

Or perhaps not, but they should have. Auto Layout was a big deal.

Flash forward to now. With all the improvements to Interface Builder, it’s easy to use Auto Layout to create self-sizing table view cells!

With a few exceptions, all you have to do is:

1. Use Auto Layout for the UI elements inside the table view cells.
2. Set the table view’s rowHeight to UITableView.automaticDimension.
3. Set the estimatedRowHeight or implement the height estimation delegate method.

That’s what you’ll do to help your client.

Looking at the App’s Views

Open the Auteurs.xcodeproj in the starter folder. From the Project navigator, open Main.storyboard. You’ll see three scenes:

From left to right, they are:

• AuteurListViewController, a top-level navigation controller.
• Auteurs Scene, which shows a list of auteurs.
• Auteur Detail View Controller Scene, which displays the auteur’s films and information about each one.

Build and run.

You’ll see AuteurListViewController displaying a list of auteurs.

Whoa! Wait a minute. Not only is the app missing images of each auteur, but the information you’re trying to display is also cut off. You can’t just increase the cell size and call it a wrap because each piece of information and each image will be a different size. Your cell heights need to change dynamically, depending on each cell’s content.

Don’t panique! Self-sizing cells are très faciles — very easy.

Creating Self-Sizing Table View Cells

You’ll start by implementing dynamic cell heights in AuteurListViewController. To get dynamic cell heights working properly, create a custom table view cell, then set it up with Auto Layout constraints.

In the Project navigator, open AuteurTableViewCell.swift. Add the following property:

@IBOutlet weak var bioLabel: UILabel!

This is where the author’s bio information will be displayed.

Next, open Main.storyboard. In the Auteurs Scene, select the AuteurCell in the table view. In the Identity inspector, set the class to AuteurTableViewCell:

Click the ＋ button above the storyboard layout to open the Library. Drag and drop a label into the cell. Set the text to Bio. Set the new label’s Lines property, which is the maximum number of lines the label can have, to 0 in the Attributes inspector.

When you’re done, it’ll look like this:

Next, you need to connect the bioLabel outlet of AuteurTableViewCell to the label on the cell. One quick way to do this is to right-click AuteurCell in the Document Outline. Then, click-drag from the outlet’s empty circle to to the corresponding Bio label:

Adding Constraints to Each Subview

One way to get self-sizing views working with Auto Layout on a UITableViewCell is to pin the all edges of the subview. That means that each subview will have leading, top, trailing and bottom constraints. The intrinsic height of the subviews will then dictate the height of each cell. You’ll do this next.

Select bioLabel. Click the Add New Constraints button at the bottom of your storyboard. In this menu, select the four red lines near the top of the dialog. Next, change the leading and trailing values to 8 and click Add 4 Constraints. It’ll look like this:

This ensures that, no matter how big or small the cell may be, the bio label is always:

• 0 points from the top and bottom margins.
• 8 points from the leading and trailing margins.

Now that you’ve connected bioLabel to the top and bottom margins by 0 points, Auto Layout can determine the height of the cell!

Awesome, you’ve set up AuteurTableViewCell! Build and run. Now, you’ll see:

Yikes! That’s not right. Cut!

Before the cells can become dynamic, you need to write a bit of code. You’ll do that next.