In iOS14, Apple introduced the list layout in UICollectionView, allowing developers to easily create a list using [UICollectionViewListCell](https://developer.apple.com/documentation/uikit/uicollectionviewlistcell) — A collection view cell that comes along with iOS14 which provides list features and default styling.
Even though UICollectionViewListCell is highly customisable, there are still situations where we might need to create our own custom cell in order to fit our app’s requirements.
In this article, let’s look at how we can create a custom cell and use it alongside a custom content configuration to build a list in a UICollectionView.
This is a continuation of my previous article “ Building a List with UICollectionView in Swift “. Therefore, if you are not familiar with building a list using a collection view, I highly recommend you check it out before proceeding.
The Sample App
The following animated GIF showcases what we are trying to build in this article.
The sample app we going to build
As you can see, all the cells in the list have a layout that is different from the usual side-by-side image-text layout. Instead, they all have a custom top-bottom image-text layout.
Furthermore, the appearance of the custom cells will change based on the state of the cell. When the cell is selected, its text will become red and the text’s weight will become heavy. The same goes for the symbol.
The Concept
Before we start implementing the custom cell, we must first understand what is content configuration, content view, and also the relationship between a custom cell, a content configuration, and a content view.
A content view is a UIView subclass that conforms to the [UIContentView](https://developer.apple.com/documentation/uikit/uicontentview?language=obj_7)protocol. It defines the layout and appearance of the custom cell. It is also in charge of displaying the correct data and appearance based on the provided content configuration.
A content configuration will be the content view’s view model and it conforms to the [UIContentConfiguration](https://developer.apple.com/documentation/uikit/uicontentconfiguration) protocol. On top of that, it is also in charge of generating a content view instance for the custom cell. Thus, you can treat it as a bridge that links up both content view and custom cell.
A custom cell of a UICollectionView list is a subclass of [UICollectionViewListCell](https://developer.apple.com/documentation/uikit/uicollectionviewlistcell). It has only 1 task - generate a properly configured content configuration object based on the state (selected, highlighted, disabled, etc.) of the cell and then assign the configuration to itself.
To summarize, the custom cell will create and assign a **content configuration **object to itself. The content configuration object will then generate a content view for the custom cell, and the **content view **will display the data provided by the content configuration object.
Don’t worry if all these sound a bit confusing to you, I am sure things will clear up once we start looking into the sample code.
#xcode #swift #software-development #mobile-development #ios-development