Collection View improvements
Since WWDC 2019 Apple make several improvements on collection views, specially on data management and layout. These improvements make easier to use and update those visual elements that are so important in all Apple platforms.
We are going to focus the examples on iOS apps here. This repository has a sample app that uses The Dog API to present information about different dog breeds and, through this practical example, show how to use the new structure and features of collection views. If you want to use this code, please request an API key and update the code as indicated in the README.md file.
Concepts
Collection view architecture uses separation of concerns to implement it in a more composable and maintainable way. There are three main elements: data, layout and presentation.
- Data — it represents what must be presented: the information itself. The Diffable Data Source APIs, introduced in iOS 13, allows creating uniquely identified sections and cells, using the Hashable protocols. As those pieces of data are uniquely identified, any change in their state can be managed by the collection view with no need of an explicit batch update, what removes a lot of boilerplate code and complexity. Also, iOS 14 introduces section snapshots, that makes easier manage data per section basis, making composition easier as well as some common features, are collapsible/expandable elements.
- Layout — it represents where a piece of data shall be presented. The compositional layout API allows declaratively defining simple layout elements that can be composed to create more complex ones. It also allows scroll sections orthogonally to the collection view scroll direction, a feature that is becoming very common. The list configuration also creates a way to make a section, or even the whole collection view, behave as a table view.
- Cell — Cells present the data elements within a given layout. The cell registration process was simplified with the new collection view API as well as its population, that is now less coupled with the index path information. List cells can be used to mock the basic table view cell layouts and view configuration allows an easier way to manage cells data and state dependent elements.
This architecture redesign improves the separation of concerns and makes it easier to work with collection views, specially with complex layouts and data hierarchy. In the other hand it introduces new concepts and a new way of dealing with both data and layouts, thus, there is a learning curve to use this new approach even for developers who are already used to collection views.
Article Structure
This article is composed by several parts to address specific topics on this subject. Here, the main concepts associated with the architectural model change were discussed.
Then, a discussion about how those concepts and elements work together is important. In this article (and its complementary parts) it will be discussed further, presenting the execution flow.
After this conceptual part, it will be presented one of the predefined layouts made available that make collection view sections looks and behaves like table views with a practical example. This is presented in this article and its related parts.
Using this example, we can discuss the modern cell configuration approach, that isolates cell population from its visual components. This article address such functionality.
Another useful layout is sections that run orthogonally to the collection view scroll direction, such as carousels. The compositional layout makes very easy to implements it and also allows discussing the compositional layout concepts and how to provide a layout for each collection view section. This is the main subject, with a practical example, of this article.
In the next article, as mentioned before, it will be discussed how these concepts are tight together and an overview on how to setup both the collection layout and its data.
References
This series of articles was strongly based on the following references. Those are great sources of additional information:
Advances in UI data sources — This session from WWDC 2019 presents the diffable data sources
Advances in collection view layout — This session, also from WWDC 2019, presents the compositional layout mechanism and associated concepts.
Modern cell configuration — This session from WWDC 2020 presents a mechanism to isolate cell population from its visual components, improving code decoupling and maintenability.
Advances in diffable data sources — This WWDC 2020 session presents diffable data sources improvements, specially to create hierarchical data.
Advances in UICollectionView — This session, also from WWDC 2020, presents some predefined collection view session layouts that allows creating expandable sessions and tableview-like sessions.
Implementing Modern Collection Views — This source code presents a lot of samples on how to use the new collection view features and its potential. It is a great reference for starting developing using this new architecture.
