How to make self sizing cells in Swift both for table & collection views supporting orientation changes and dynamic font types.

TL;DR: UPDATED for Swift 4 and Xcode 9. See the new example repository.


So let's start with a standard single-view template for iOS.

Name the project, and go straight to the Main.storyboard file. Select your ViewController, delete it and create a new UITableViewController scene. Set it as initial view controller and create a TableViewController.swift file with the corresponding class.

The setup is really self-descriptive. You've got a string array as data source, and the required implementation of the UITableViewDataSource protocol. The only thing that is missing is the TableViewCell class. Firstly, create the class itself, then with interface builder select the table view controller scene and drag a label to the prototype cell.

Set the class of the prototype cell to TableViewCell. The reusable identifier should be simply "Cell". Connect the dynamicLabel outlet to the view. Give the label top, bottom, leading, trailing constraints to the superview with the default value of 8.

Select the label, set the font to body style and the lines property to zero.

Now you are almost ready. You just need to set the estimated row height on the table view. Inside the TableViewController class change the viewDidLoad method like this:

The estimatedRowHeight property will tell the system that the tableview should try to figure out the height of each cell dynamically. You should also change the rowHeight property to automatic dimension, if you don't do then the system will use a static cell height - that one from interface builder that you can set on the cell. Now build & run.

You have a wonderful table view with self sizing cells. You can even rotate your device, it's going to work in both orientations.

One more thing

If you change the text size under the iOS accessibility settings, the table view will reflect the changes, so it'll adapt the layout to the new value.

The font size of the table view is bigger now:

You can also subscribe to the UIContentSizeCategoryDidChangeNotification to detect size changes and reload the UI.


So we've finished the easy part. Now let's try to achieve the same functionality with a collection view. UICollectionView is a generic class, that is designed to create custom layouts, because of this generic behaviour you will not be able to create self sizing cells from interface builder. You have to do it from code.

Before we start, we can still play with IB a little bit. Create a new collection view controller scene, and drag a push segue from the previous table view cell to this new controller. Finally embed the whole thing in a navigation controller.

Now create two classes:

  • CollectionViewController
  • CollectionViewCell

The cell is going to be the exact same as we used for the table view, but it's a subclass of UICollectionViewCell, and we are going to construct the layout directly from code.

We have a subclass for our cell, now let's create the view controller class. Inside the viewDidLoad method you have to set the estimatedItemSize property on the collection view. There if you give wrong size, the autorotation won't work as expected.

Inside the rotation methods, you have to invalidate the collection view layout, and recalculate the visible cell sizes when the transition happens.

There are two helper methods to calculate the preferred width for the estimated item size and to recalculate the visible cell sizes.

That's it, let's pack everything together and build the code.

You can even have multiple columns if you do the appropriate calculations.

There is only one thing that I could not solve, but that's just a log message. If you rotate back the device some of the cells are not going to be visible and the layout engine will complain about that those cells can not be snapshotted.

Snapshotting a view that has not been rendered results in an empty snapshot. Ensure your view has been rendered at least once before snapshotting or snapshot after screen updates.

If you can make this message disappear somehow (OS_ACTIVITY_MODE=disable), please don't hesitate to submit a pull request for the example repo on gitlab. 😉

External sources