Modern iOS collection views
A new approach to work with an old friend — part 1
--
In the previous article we discussed how collection view architecture was redesign to improve data manipulation and layouting. In this part of the article it will be presented how those parts fits together, giving a roadmap for a practical example.
General Flow
The general flow to setup and use the new collection view is presented on the diagram bellow:
The blue boxes indicates the steps and the green boxes closures that are used to handle this function in a future time in the life cycle.
The first step is defining the collection view layout, defining its sections' template. The collection view layout is managed by the UICollectionViewCompositionalLayout class that can handle an uniform or single section layout, as well as heterogeneous layouts for each section. In this general case, the compositional layout will use a section provider closure, that is feed with the section identifier and environment and returns the layout for that specific section. then, this layout can be set into the collection view.
Each piece of data shown into the collection view will be presented in a cell (that can be a regular or a supplementary one, as headers and footers). The next step is defining and registering into the collection view the cell layouts, so it can access those cells templates. It is controlled by Cell Registration and SupplementaryRegistration structures, that will be detailed next. The cell registrations must provide a cell population handler, that will be used to populate it with specific data for each cell. You can also decouple this population using cell configuration to manage the cell appearance and information considering both its data and state (such as normal, selected or even custom states). Cell configuration will also be discussed in an upcoming article.
At this point we have registered the general collection layout and also its cells template (and how these cell templates will be populated in proper time). The next step is define which data will populate this visual structure. Since 2019, Apple has provided diffable data source, sources of data composed by information that can be uniquely identified. Using that collection views can automatically manage information changes (updates, rearranges, removals and insertions) and even provide animation for those changes.
In order to implement this step we create the diffable data source and feeds it with a cell provider closure, that returns the cell template for a given element (using its indexPath and unique identifier as references).
It is important to notice that this approach is very componentized and based on closures. It is a point of attention that the cell population handler and cell provider divide the attributions of the cellForItem(at:) function.
The collection views structure and population mechanism is all set at this point. The next step is to populate it, what is done applying a data snapshot to the data source. A data snapshot is the current view of the presenting data in a given moment, updating it (applying to the data source) it is possible to compare to the previous data snapshot and update just what is needed, as all the information is uniquely identified. This process can be repeated as many times as needed.
This gives a brief overview on how to setup and use a collection view, in the next part of this article we will revisit it in a stepwise way.
