Staggered UIs with Compositional Layout
In almost every application, we need a scrollable list where we can show the data. This is because we cannot accommodate everything in a 5 inch screen, we need scrolling. Now be it movies on Netflix, groceries on BigBasket, restaurants on Zomato or furniture on Pepperfry — scrollable lists are everywhere.
To present the data in a more organised way, generally these lists are divided in categories having similar products. So products that belong to a category are generally scrolled horizontally in the list, while the categories are scrolled vertically.
Of course this structure is subject to various factors like design, ease of access, discoverability etc, but from a bird’s eye view, the layout remains the same. A vertically scrollable list having items, which may or may not scroll horizontally.
To achieve this on iOS, the UIKit framework provides a component called UICollectionView which supports different types of layouts. In this article, we’ll focus on one of the layouts i.e Compositional Layout. It’s very new, very powerful and we’ll see it in detail, but to set the context, let’s start with the collection view layout.
UICollectionViewLayout
UICollectionViewLayout tells collection view about how to lay the cells in the view. For arranging them in grid format, UIKit provides a UICollectionViewFlowLayout and for more advanced layout, we can subclass UICollectionViewLayout.
From the official Apple documentation (more on this link),
A layout object determines the placement of cells, supplementary views, and decoration views inside the collection view’s bounds and reports that information to the collection view. The collection view then applies the provided layout information to the corresponding views so that they can be presented onscreen.
A flow layout is a type of collection view layout. Items in the collection view flow from one row or column (depending on the scrolling direction) to the next, with each row containing as many cells as will fit. Cells can be the same sizes or different sizes.
Using these layouts, we can display data in a uniform way. But sometimes, we come across designs which are a little complex to implement. The designs where the lists do not follow a fixed pattern or grid per se . For example, Instagram. Its search screen has a staggered layout. Here comes the easy way to do that i.e Compositional layout.
Compositional Layout
In WWDC 2019, Apple introduced UICollectionViewCompositionalLayout that makes it super easy when it comes to customize layouts. Although using UICollectionViewFlowLayout, we can achieve those complex designs but compositional layout provides way more easy implementation and maintenance of the code.
What Apple says about compositional Layout
A compositional layout is a type of collection view layout. It’s designed to be composable, flexible, and fast, letting you build any kind of visual arrangement for your content by combining — or compositing — each smaller component into a full layout.
Compositional layout is a sort of declarative API that helps to build larger layout by combining small layouts (groups) in sections to present highly complex designs. Let’s look at its composition.
Hierarchy of Compositional Layout.
Compositional layout comprises items, groups, sections and layout. To build any layout using this, these 4 classes need to be implemented.
- NSCollectionLayoutSize
For this, height and width dimension (NSCollectionLayoutDimension) needs to be given which can be given in three different ways.
fractionalWidth/ fractionalHeight — It allows us to set proportional width/ height to its parent width/ height.
absolute() — Using this, we can set fixed values to height and width.
estimate() — Using this, we can set item size as per content size and further system will decide its approximate size. - NSCollectionLayoutItem
This is the actual cell of layout that is rendered on screen based on size as set in NSCollectionLayoutSize. - NSCollectionLayoutGroup
Group is created by combining all the items together in different forms like vertical, horizontal or any custom. - NSCollectionLayoutSection
This section holds the groups to form the layout.
Compositional Layout in Action
Now that we have seen the basic structure of compositional layout, let’s build a screen having a list, having a different design for each of its sections using compositional layout.
From a higher level, for creating any layout, we need a section that consists of groups and further, groups consisting of other groups or items.
Once layout is defined, then as per the number of items, a view is created that can be scrolled horizontally or vertically (as configured).
Let’s start with the top end of the hierarchy i.e. the layout which will be passed to the collection view.
Here a section is being added that includes groups. The section comprises ‘containerGroup’ further having 3 groups and each group has fractional width as 1 that of parent view’s width and height as ⅓ of the parent group (‘containerGroup’).
Starting from the first layout, we have ‘containerGroup1’ that further has 2 groups ‘containerGroup1SubGroup1’ and ‘containerGroup1SubGroup2’ placed vertically.
‘containerGroup1SubGroup1’ has fractional width 1 and fractional height ⅔ of the parent group. Further it is divided into 2 parts, 1 item and 1 group i.e ‘containerGroup1SubGroup1Item1’ placed horizontally.
Here the first item has fractional width and height of ⅔ and 1 of their parent group respectively whereas the group has further 2 items (‘containerGroup1SubGroup1GroupItem’) having width as fractional 1 and height ½ of parent group.
‘containerGroup1SubGroup2’ having fractionalWidth as 1 that of main view’s width and height as ⅓ has 3 items (‘containerGroup1SubGroup2Item’) placed horizontally each having fractionalHeight 1 and fractionalWidth as ⅓ of parent group.
Combining these 2 groups will make the first group of layout.
For the second group ‘containerGroup2’ in ‘containerGroup’, we need to place four items together in a row horizontally. Each item ‘containerGroup2Item’ has fractionalWidth ¼ of parent group and fractionalHeight as 1.
For the last group i.e. ‘containerGroup3’, we are placing only 2 items (containerGroup3Item) together each having fractional width ½ to that of parent group and fractionalHeight as 1.
Once all groups are created, we’ll have our layout.
Here content insets are used with groups and items for having spacing among them. If required, interItemSpacing can also be given as per the layout.
By default, the section will have vertical scrolling in this case but to change this, we need to add the ‘orthogonalScrollingBehavior’ property with a section that will change the scrolling behavior for collectionView.
Setting the ‘orthogonalScrollingBehavior’ to continuous will change the scrolling to horizontal.
Conclusion
As we have seen, without compositional layout, it would have been very difficult to achieve the above layout with this ease. With flow layout, there would have been a lot of calculations and other complexities.
Compositional layout is an amazing feature provided by Apple to make complex layouts with less effort. It gives us the flexibility to customize the layout to a great extent.
You can have your coffee now!!! 😌
