Modern iOS collection views
A new approach to work with an old friend — part 3
--
Previously, we have discussed the new collection view architecture and related concepts, an overview of the collection view setup and usage flow and a detailed stepwise view on how to setup it. In this article we are focusing on the collection view usage.
The collection view at this point is completely set: its layout, its cell providers and how to populate them. The next step is to populate the data source associated with it to automatically populate it. To do so, we create a data snapshot, the current view of the data to be presented and apply it to the data source. This last step can be roughly related to the reloadData and reloadSections and reloadItems functions.
The diagram bellow presents a general sequence on how it is done and what happens under the hood.
We can notice that there is just two steps to implement this: create the snapshot and apply it. Most of the heavy lifting is done by the collection view and data source mechanisms, using the providers we defined previously.
1. Create Data Snapshot
The data snapshot is created using the NSDiffableDataSourceSnapshot, a generic struct associated with the SectionIdentifierType and ItemIdentifierType, hashable types that defines the section and item unique identifiers. Notice that this is compatible with the UICollectionViewDiffableDataSource we used when setting up the collection view.
Next, the snapshot can be populated: the appendSections function allows appending new collection view sections and the appendItems function allows appending items into the end of a given section already included. There is also functions to insert elements and sections into specific positions, delete or move them.
You can create a new snapshot or recover the current snapshot associated with a data source using the snapshot function and update it.
This methods creates or updates a snasphot, that represents the current state of the presenting data, leaving it ready to be presented.
2. Applying Data Changes
The data snapshot can be applied to a compatible data source (with the same section and item identifier types). Then, the data source identifies the changes from its current state and presentes those change into the associated collection view. The apply function is responsible to do so. You can use it and it is done!
To understand and connect this process to all setup we have done before, it is interesting to understand what is happening under the hood from this point on:
After the apply function is triggered, there is an interation between all sections: based on its identifier, the proper layout is recovered from the section provider (associated with the compositional layout).
Then, a new interation is done on the sections list: It looks for supplementary views, if defined, using the supplementary view provider (associated with the data source itself) and populates its using the supplementary view population handler (define while creating its registration).
For each section, there is an inner iteration between its items. First a cell is created or reused, using the cell provider (associated with the data source) and populated using the cell population handler (defined while creating its registration).
Wrapping up
This is the main flow to create and populate a collection view. It has a bigger number of steps compared to the previous approach, but makes each step smaller and clear. It also makes specially easier to create more complex or heterogeneous layouts.
Based on this architecture, Apple provides a series of pre-defined layouts that are very useful such as lists (similar to table views), hierarchical expandable sections and sliding sections (as carousels). In the next article we are going to put in practice this concepts creating an app that use a list section.
