Using Auto Layout in UITableView for Dynamic Cell Layouts & Variable Row Heights

Using Auto Layout in UITableView for Dynamic Cell Layouts & Variable Row Heights

22 May 2024 Stephan Petzl Leave a comment Tech-Help

Auto Layout is an essential tool for iOS developers when creating user interfaces that need to adapt to different screen sizes and orientations. One common challenge is using Auto Layout within UITableViewCells to let each cell’s content and subviews determine the row height dynamically, while maintaining smooth scrolling performance. This article will guide you through the steps to achieve this.

Conceptual Description

The primary goal is to set up your UITableViewCells in a way that their heights can adjust dynamically based on their content. The following steps will help you achieve this.

1. Set Up & Add Constraints

In your UITableViewCell subclass, add constraints so that the subviews of the cell are pinned to the edges of the cell’s contentView. Ensure that the content compression resistance and content hugging constraints in the vertical dimension for each subview are not overridden by higher-priority constraints.


        // In your UITableViewCell subclass
        override func updateConstraints() {
            if !didSetupConstraints {
                // Add constraints here
                didSetupConstraints = true

2. Determine Unique Table View Cell Reuse Identifiers

For each unique set of constraints in the cell, use a unique cell reuse identifier. Avoid adding cells with completely different sets of constraints to the same reuse pool as this can lead to performance issues.

3. Enable Row Height Estimation

For iOS 8 and later, enable self-sizing table view cells by setting the table view’s rowHeight property to UITableView.automaticDimension and assigning a value to the estimatedRowHeight property.

        self.tableView.rowHeight = UITableView.automaticDimension;
        self.tableView.estimatedRowHeight = 44.0; // or any average height

4. Do a Layout Pass & Get The Cell Height (for iOS 7 support)

Instantiate an offscreen instance of the table view cell for height calculations. Configure the cell with the exact content it would hold if displayed, force the cell to layout its subviews, and use the systemLayoutSizeFittingSize method to find the required height.

        func calculateHeightForConfiguredSizingCell(cell: UITableViewCell) -> CGFloat {
            let height = cell.contentView.systemLayoutSizeFittingSize(UILayoutFittingCompressedSize).height + 1.0
            return height

5. Use Estimated Row Heights

Providing a temporary estimate for row heights of cells that are not yet onscreen helps in maintaining smooth scrolling performance.

6. Add Row Height Caching (if needed)

If performance issues persist, consider implementing caching for cell heights. Let the Auto Layout engine solve the constraints the first time, then cache the calculated height for that cell and use the cached value for future requests.

Practical Example

Here’s a practical example of setting up a UITableView with dynamic cell heights:

        override func viewDidLoad() {
            self.tableView.estimatedRowHeight = 80
            self.tableView.rowHeight = UITableView.automaticDimension

        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! MyCustomCell
            cell.myLabel.text =[indexPath.row]
            return cell


By following these steps, you can ensure that your UITableViewCells dynamically adjust their heights based on their content, providing a better user experience. For more detailed information, you can refer to our documentation.

Enhancing Your Workflow with Repeato

While setting up dynamic cell heights can be complex, maintaining and testing your iOS applications shouldn’t be. Repeato, our no-code test automation tool for iOS and Android, simplifies the process of creating, running, and maintaining automated tests for your apps. With its computer vision and AI-based approach, Repeato allows you to focus on creating a great product instead of spending time on creating and maintaining tests. Learn more about how Repeato can enhance your development workflow here.

Like this article? there’s more where that came from!