Collection view lists

Implementing headers

In the previous article we have created a collection view using a single list section, making it very similar to a table view. In this article this example will be pushed further including header cells. This version is implemented in the list_header branch in the article repository. We use the breeds grouped according to the American Kennel Club classification that is provided by The Dog API.

The sequence is very similar to the previous one, with some additional steps and a few code changes:

Fig. 1 — Collection view with list layout setup and usage flow

We have the main steps of the previous example: layout creation, data source setup and data source usage. The important changes from the previous code will be presented in the following sections

Collection view layout creation

The layout creation is very similar to the previous example, using a plain list and just including the header as a supplementary view.

The headerMode property of the layout list configuration can be configured to use a supplementary view as header, the first item in that section or no header at all.

Data source setup

For clarity purposes, the breed cell was not changes on this example, so we could keep the same code used before.

We need to create a header cell registry to define an populate our section headers:

The use the SupplementaryRegistration to register this cell. It is also a generic type associated with a cell class, that is also a UICollectionViewListCell in this case.

This registration demands to identify the kind of the supplementary view, as we can have several (badges, headers, footers, custom views). It also needs a closure to populate the supplementary view, that takes the supplementary view, the element kind and its index path in order to populate it.

For this cell we are using the plain header configuration and populating its text with the name of the section, that holds a breed group. Similarly to the treatment applied to the regular cells, we apply the configuration to the supplementary view.

The data source of this example was also changed to use a string as the section identifier, so each breed group can be used as its section identifier. There is no changes besides that on the data source creation itself, but we need to create the supplementary view provider, that will return the header cell whenever needed:

The supplementaryViewProvider property is a closure that is feed with the collectionView, the supplementary view kind identifier and its indexPath and shall return the suitable supplementary view. This code uses the dequeueConfiguredReusableSupplementary function using the header registration to do so.

Populate the data source

The last step has just small changes to adpat to the data model changes. The data source is initiated with an empty snapshot:

This data source is update when the view appears, using the breedGroups function of our API access service.

We create a section for each breed group and append to it every breed belonging to that group using the appendItems function. Finally the new snapshot is applied to the data source, what shall be performed in the main queue as it is an UI operation.

This changes will result in a sectioned table view-like collection:

Fig. 2 — Collection view list with sections

We can se the layout difference using the layout configuration as insetGrouped instead of plain:

Fig. 3 — Collection view with inset grouped layout

We could use one of the predefined layout templates to implement lists using the new collection view layout. In the next article it will be presented how to use custom cells instead of the standard ones.