Modern iOS collection views

A new approach to work with an old friend — part 2

In the previous articles we have discussed briefly the concepts and architecture of the new collection view layout and population approach and an overview of how its parts connect.

This article is proposed to give more detail and a stepwise view of how to implement the modern collection view approach using compositional layout and diffable data sources.

Collection View Setup

The diagram bellow presents the steps to setup the collection view layout and data handling:

Fig. 1 — Collection view setup sequence

Lets detail step by step this, using the flow presented in the previous article and this sequence diagram:

1. Create Layout Template

The first step is creating the collection view structure, preparing its layout.

1. Create section provider — The section provider is a function that receives as parameter the section index and its containing environment, such as trait collection and display scale factor. This environment conforms to the NSCollectionLayoutEnvironment protocol. This function, based on such information, returns the layout of that given section: an object of the UICollectionViewLayout class.
2. Create the collection view layout and register the section provider — With a defined section provider it is possible to create the collection view layout using the UICollectionViewCompositionalLayout class. This class can be initiated with a single specific section or using a provider for complex, heterogeneous layouts.
3. Associate layout to collection view — The layout created can be linked to the collection view through its collectionViewLayout property.

2. Register cells

Then, it is time to register the cell templates that will be used by the collection view.

1. Create the cell registration — The cell registration is made by creating a UICollectionView.CellRegistration struct. This is a generic struct associated with a Cell type (inherited from UICollectionViewCell) and an Item that refers to the uniquely identified data structure presented on that given cell. The cell registration also requires a cell population handler: a function that receives, as parameters, the cell created or recycled that will be populated, its index path and the item unique identifier. Based on those information, it is possible to populate the given cell with the item relevant data. The cell registration also allows to associate a xib file that holds the cell, so it still possible to create it using Interface Builder. This handler is responsible for part of what cellForItem(at:) does: populate a given cell with the relevant information.
2. Create the supplementary views registration — Collection views allows using supplementary views for several purposes: headers, footers, badges, cell and section additional custom elements. Those views are registered in a simmilar way to regular cells: the cell registration used a UICollectionView.SupplementaryRegistration generic with a View associated type. The supplementary view registration requires a population handler, with the view, its kind (a String which identifies which kind of supplementary view is that) and its index path. Based on this information, the supplementary view provided can be populated accordingly.

3. Data source

At this point, the collection view is set. It has a defined layout for all its sections and which types of cell and supplementary views can be used, as well as its populating functions. This structure defines how the collection view will be structured and presented.

The data source will answer another question: what shall be presented?

1. Creating the cell provider — The cell provider is a function that receives as parameters the target collection view, the index path and the unique identifier of a given item and, based on it, returns which UICollectionViewCell shall be used. The dequeueConfiguredReusableCell method can be used, using the cell registration previously created to recover the adequate cell type. This handler is also responsible for part of what cellForItem(at:) does: dequeue the proper cell template for a given index path.
2. Creating the data source — The data source is, as named, the source of all information presented by a collection view. Since 2019 both table and collection views can use diffable data sources. This data sources are able to manage data changes (insertions, removals and rearrangements) due to its uniquely identifiable characteristics. We can create a UICollectionViewDiffableDataSource object, that is a generic type associated with a SectionIdentifierType and an ItemIdentifierType, Hashable types that uniquely identify a section and item respectivelly. The data source also requires which collection view will hold its information and a cell provider closure, that was previously mentioned.
3. Create the supplementary view provider — If the collection view needs at least one supplementary view, it is possible to create a supplementary view provider: a function that receives the collection view, its kind (the type of supplementary view) and its index path and returns the proper UICollectionReusableView for it. The dequeueConfiguredReusableSupplementary function can be used in a very simmilar way to dequeueConfiguredReusableCell: using the supplementary view registration to get the proper view and populate it.
4. Associate the supplementary view provider to the collection view — The supplementary view provider that was created can be associated to the data source using its supplementaryViewProvider property.

At this point the collection view is completely set: it has a defined layout (from the section provider) , the proper cells and views to be used (from the diffable data source cell and supplementary view providers) on each element as well as its population methods (from the population handlers associated with the registration structures). We just need to populate the data source to automatically reflect it to its associated collection view.

In the next part of this article, we are going to discuss how to populate the data source.