UITableViewCell in iOS 14

In a world were SwiftUI gets all the talk when it comes to building UI for iOS apps, UIKit got some surprising shout outs during the WWDC 2020, one of which was the “Modern cell configuration” presentation, where we saw some great updates to UITableViewCell coming our way, starting iOS 14. If you’ve already worked with the new “appearance states” of UINavigationBar and UITabbar in iOS 13, this should feel like a seamless transition because Apple seems to bring the same approach to UITableViewCell as well.

Configurations

UITableViewCell in iOS 14 comes with Configurations. Apple defines a configuration as “the appearance of a view for a specific state”. If you’ve worked with complex tableview cells, there is a pretty good chance that you stumbled upon some lagging behavior at one point or another. As per Tyler Fox, one of the UIKit team engineers, configurations are lightweight, more efficient and they should help smoothing the scrolling animation and eliminate previous laggy behaviour. One of the reasons for that is that configurations are value types, so they are not expensive to create.

Each configuration can be implemented based on a state with the help of UICellConfigurationState. By default, UICellConfigurationState has 13 states that you can play with to take your UITableViewCellor UICollectionViewCell game to the next level. Some are inherited from UIViewConfigurationState (which can be used for configuring states for your header and footer), but you can also add your own custom states.

To be able to set up our configurations we will have to use the brand new updateConfiguration(using state: UICellConfigurationState) function on UITableViewCell. This method will be called before the cell is displayed and after any configuration state changes. You can also enforce its execution by calling setNeedsUpdateConfiguration() on your cell.

In our cell class, we will override this function and start updating our configurations in 3 easy steps:

1. Always start with a fresh configuration. For content configuration, you can do this by calling the cell’s defaultContentConfiguration() function. What calling updated(for: state) does is asking for the default configuration for the specific state.
2. Configure each state according to your preference. For our scope, just configuring the isSelected state should be enough to understand how configurations work. Obviously, you should go for a switch if you will work with more than just these 2 states.
3. Apply your new configuration to the cell for rendering.

As you can see we are not modifying the cell itself but rather a new configuration state that we later apply to the cell to render.

There are 2 types of configurations:

• Content configurations. As the name suggests, content configurations can help you manipulate the content of the cell like image, text, secondary text, layout metrics and behaviors.
• Background configurations can help with the manipulation of background color, visual effect, stroke, insets and corner radius. All cells will inherit a default background configuration even if we don’t specify one.

Now let’s see how we can update the background of our cell as well. You probably guessed it already, with the same 3 steps:

1. Start with a new configuration. Here we use a new way of getting a configuration, by calling a default configuration for a preferred style. To do that we used UIBackgroundConfiguration which will give us the default iOS background configuration for the listGroupedCell() style. If we would want to do this for the content configuration as well we could use UIListContentConfiguration .
2. Define each state.
3. Apply the configuration to the cell for rendering.

Now let’s see the result:

Each cell is now configured according to its state and updates automatically once the state changes.

One thing to notice here is the image of the cell. We change its tint color on the isSelected state, but we don’t mention it for the other state and it still changes back its color. Because we start with a fresh configuration, the color is not being persisted through both states, it just uses the default one that came with the defaultContentConfiguration() method.

It is important to know that applying a background configuration will override any changes you make to the backgroundColor and backgroundView properties of the cell and set them to nil. The same behavior applies the other way around, so if you set the backgroundColor property on a cell, the background configuration will become nil

This is also the case for content configuration. It will override your imageView , textLabel and detailTextLabel properties and the other way around.

All the mentioned properties that will be overriden both by background configurations or content configurations will be deprecated in future releases.

Wrapping up

The purpose of this article was to show how we should change our mindset for using UITableViewCell in iOS 14. It seems that, by making this type of improvements to it, Apple is trying to send a message that UIKit will still be around for a while.

Where to go next:

For a more in depth presentation of UITableViewCell in iOS 14, check out the WWDC 2020 “Modern Cell Configuration” video: https://developer.apple.com/videos/play/wwdc2020/10027/