iOS
UICollectionView
UITableViewCell
dynamic height
Swift programming

UICollectionView inside a UITableViewCell -- dynamic height?

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Introduction

A UICollectionView inside a UITableViewCell can have dynamic height, but the table view will not infer that height automatically just because the collection has more items. The usual solution is to make the inner collection view report its content height and then let the table view use automatic row sizing.

The Core Layout Problem

The table view needs to know how tall the cell should be. A collection view, meanwhile, computes its own content size only after its layout has run. That means the outer cell needs a reliable way to connect the inner collection view's content height to Auto Layout.

There are two common approaches:

  • keep an explicit height constraint and update it after layout
  • subclass the collection view so its intrinsic content size follows contentSize

The second approach is often cleaner because it reduces manual constraint juggling.

A Self-Sizing Collection View

One robust pattern is to subclass UICollectionView and invalidate its intrinsic size whenever the content size changes.

swift
1import UIKit
2
3final class IntrinsicCollectionView: UICollectionView {
4    override var contentSize: CGSize {
5        didSet {
6            invalidateIntrinsicContentSize()
7        }
8    }
9
10    override var intrinsicContentSize: CGSize {
11        layoutIfNeeded()
12        return CGSize(width: UIView.noIntrinsicMetric, height: contentSize.height)
13    }
14}

This makes the collection view behave more naturally inside Auto Layout. The table-view cell can then expand based on the collection view's intrinsic height.

Example Cell Implementation

Here is a simplified cell that uses an intrinsic-size collection view:

swift
1import UIKit
2
3final class TagsTableViewCell: UITableViewCell {
4    @IBOutlet private weak var collectionView: IntrinsicCollectionView!
5
6    var items: [String] = [] {
7        didSet {
8            collectionView.reloadData()
9        }
10    }
11
12    override func awakeFromNib() {
13        super.awakeFromNib()
14        collectionView.dataSource = self
15        collectionView.delegate = self
16        collectionView.isScrollEnabled = false
17    }
18}
19
20extension TagsTableViewCell: UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
21    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
22        items.count
23    }
24
25    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
26        collectionView.dequeueReusableCell(withReuseIdentifier: "TagCell", for: indexPath)
27    }
28}

The key detail is isScrollEnabled = false. If the inner collection view scrolls vertically, it conflicts with the goal of making the table row grow to fit the collection content.

Enable Automatic Row Height on the Table View

The outer table view must also opt into Auto Layout-based sizing:

swift
tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 100

Without that, the row may stay fixed even if the collection view is reporting a correct height.

If You Use a Height Constraint Instead

A more manual pattern is to keep an outlet to the collection view height constraint and update it after reloadData() plus layoutIfNeeded().

swift
1collectionView.reloadData()
2collectionView.layoutIfNeeded()
3collectionViewHeightConstraint.constant =
4    collectionView.collectionViewLayout.collectionViewContentSize.height

This works, but it is easier to get the timing wrong, especially when the collection view layout recalculates after asynchronous data updates.

Refresh the Table View When Content Changes

If the collection view content changes after the cell is already visible, the table view may need a layout refresh:

swift
tableView.beginUpdates()
tableView.endUpdates()

That encourages the table view to recompute row heights from the updated constraints and intrinsic sizes.

Common Pitfalls

Expecting Auto Layout to infer the collection view height automatically without either an explicit constraint strategy or an intrinsic-size subclass usually fails.

Reading collectionViewContentSize.height too early, before the collection view has laid out its items, gives unstable or incorrect heights.

Leaving the inner collection view scrollable vertically conflicts with the goal of the table row expanding to fit the content.

Forgetting UITableView.automaticDimension on the outer table view keeps the row height fixed even when the inner layout is correct.

Using a collection layout that does not produce a stable content size will make the dynamic height unstable too.

Summary

  • A collection view inside a table-view cell needs an explicit strategy for reporting its height.
  • A self-sizing collection-view subclass is often the cleanest solution.
  • Disable inner vertical scrolling when the table row should grow to fit the content.
  • Enable UITableView.automaticDimension on the outer table view.
  • Refresh the table layout when the embedded collection changes after initial display.

Related reading
Free course
Beginner
7 lessons
2 hours
Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

All Rights Reserved.