Collection view carousels
Using the compositional layout — part 1
--
Previously we have discussed the new collection view architecture and used it to create a list-like layout, use custom cells and the cell configuration feature.
In this article it will be presented how to use compositional layout to create carousel like sections. We are going to create breed group vertical sections where dog breed cards can be scrolled horizontaly. This example will be based on the previous cell configuration article.
One important thing to highlight is that, using compositional layout this could be the layout for a specific section, using other configuration for different sections, as we can see in the App Store application.
Compositional layout elements
In order to understand this changes lets first check the layout components:
There are 4 elements that defines the collection view layout:
- Item — Is a visual component that holds a single piece of information, one of the collection view cells.
- Group — A group is a repetitive pattern of items. In this example, we have a vertical scrollable layout with columns. The group in this case is this repetitive pattern of 6 item columns to makes a row.
- Section — A section is a set of related information. It is built from groups put together.
- Layout — Is the collection of sections. They can keep the same layout (as we are doing in this example), but each section can hold its own template, making it very flexible.
The layout for this article follows the pattern bellow:
The item holds one dog breed, with a thumbnail image and the name of it. As it is the pattern that is repeated, the group holds just one element, the section holds groups of breeds and have its header, naming that group. The layout scrolls vertically, but for each group, it may be needed to scroll the groups (and containing items) horizontally to check all breeds belonging to that group.
In the next part of this article, the code changes needed to implement this layout will be presented.
