Self-Sizing Table View Cells

Learn how to enable self-sizing table view cells and make them resize on-demand while supporting Dynamic Type. By Chuck Krutsinger .

Leave a rating/review
Download materials
Save for later
Share
Update note: Chuck Krutsinger updated this tutorial for Xcode 12, iOS 14 and Swift 5. Joshua Greene wrote the original, and Kevin Colligan wrote an earlier update.

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.
Note: This tutorial assumes you have a basic familiarity with Auto Layout and table views.

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!

Stylized cartoon image of a French man wearing a beret, on top of a orange star. Auteur.

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:

Auteurs scenes overview

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.

Auteurs list and details views with truncated information

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:

Set AuteurTableViewCell class

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:

Add bio label to AuteurTableViewCell

Important: Setting the number of lines is very important for dynamically sized cells. A label with its number of lines set to 0 will grow based on how much text it shows. A label with its number of lines set to any other number will truncate the text once it’s out of available lines.

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:

Connect bioLabel outlet to the label on the AuteurTableViewCell

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.

Note: If you’re not familiar with Auto Layout, or if you’d like a refresher to understand how to set up Auto Layout constraints, look at our Auto Layout in iOS tutorial.

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:

Add constraints to the bio label

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:

After running with Auto Layout, each row of the Auteurs list shows the name on top of the word Bio.

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.