Saying Hello to UICollectionView Compositional Layout

Photo by Ivy Barn on Unsplash

In the WWDC-2019 Apple introduced some great features and frameworks. All developers are focusing on new frameworks and features like SwiftUI, Combine, RealityKit, etc, and try to figure out what they can do with it.

There are many small but very helpful features for existing apps that somehow didn’t get the attention of most developers and one of them is UICollectionViewCompositionalLayout.

All of us know we are using UITableView and UICollectionView everywhere for Application UI. UICollectionView is evolved from UITableView, and for more complex UICollectionView we have to use UICollectionViewFlowLayout or create some custom one extending UICollectionViewLayout. But stop! Have you ever tried to do that? If yes then you would probably be knowing that using this takes some extra effort, especially if you want to achieve nice behaviour.

All these hard things are stopping most developer to create this on their own and use the third-party libraries to fulfill their needs. That’s why Apple has introduced UICollectionViewCompositionalLayout and this class begins the era of declarative programming. I know you are excited to learn this new way to introduce UICollectionView.

Image credits: tenor

Introduction

Compositional layouts are a declarative kind of API that allows us to build large layouts by stitching together smaller layout groups. Compositional layouts have a hierarchy that consists of Item, Group, Sections, and Layout.

Image credits: Apple

To build any compositional layout, the following four classes need to be implemented:

• NSCollectionLayoutSize: The width and height dimensions are of the type NSCollectionLayoutDimension which can be defined by setting the fraction width/height of the layout (percentage relative to its container), or by setting the absolute or estimated sizes.
• NSCollectionLayoutItem: This is your layout’s cell that renders on the screen based on the size.
• NSCollectionLayoutGroup: It holds the NSCollectionLayoutItem in either horizontal, vertical, or custom forms.
• NSCollectionLayoutSection: This is used to initialise the section by passing along the NSCollectionLayoutGroup. Sections eventually compose the compositional layouts.

Implementation

In this project, I have used the UICollectionViewCompositionalLayout with UICollectionViewDiffableDataSource. You can use the normal collection to display the content instead of CollectionViewDiffableDataSource. In this project, we are mainly focusing on UICollectionViewCompositionalLayout so we will not discuss UICollectionViewDiffableDataSource.

I’m going to assume that you have already got a collection view setup, possibly with Diffable DataSource. In this project, we are using a collection cell with an image. So let’s implement UICollectionViewCompositionalLayout.

First, create one method returning UICollectionViewCompositionalLayout. You have to assign that method to collectionViewLayout in the initialization method.

You can see from the above method UICollectionViewCompositionalLayout initializer takes an instance of NSCollectionLayoutSection. In other words, a layout is built using sections. These sections are built using NSCollectionLayoutGroupinstances. A single section can contain multiple groups as well. Groups are considered to be the biggest workhorse of a compositional layout. You will typically do most configuration work on groups.

Here we have used NSCollectionLayoutGroup.horizontal to create the layout group. By making the layout group horizontal all items added to the group will be positioned horizontally. This means that the group will position items on the horizontal axis until it has filled up its width, and then it starts positioning items on the next “line” until that contains as many items as can be fit in the group’s width and so forth.

Here we have used fraction width and height for NSCollectionLayoutSize, which means it will fractionally set width and height according to device width and height. We can also use absolute and estimated height and width as well. Absolute will provide an exact height and width. By using estimated will be determined when the content is rendered. There is one restriction for estimated is that you must not set contentInsets for element otherwise, Layout will warn you and won’t draw respectively. You can play with this all sizes and check the changes for more understanding.

You can see that by implementing this you have started the collection to give some layout but still, there is no space between two items, groups, or sections. So let’s add some space between them.

Adjusting the spacing between items, groups, and sections

There are two possible ways to give the space to your collection view cells.

1. Assign edge insets on the items, groups, or sections.
2. Assign a spacing between individual items and groups.

By using edge insets you can apply like below.

item.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)

You can also provide spacing using the following code.

group.interItemSpacing = .fixed(15)

Now it looks good after providing the spacing between items, groups. But still, if I want some more complex UI like one image as full width and then below there are three images in one group and then again repeat that group. Let’s see how can we implement that.

You can see from the above code there are many changes than before. Let’s see one by one.

1. We have created a large item that we have to put on the upper side of the group. And provide the edge insets.
2. We have created a small item that we have to put on the lower side of the group. And provide the edge insets.
3. Now we have created one group for bottom implementation and assign three items in that group.
4. Then we have created one group for full implementation, in that we have assigned two items first top item and second bottom group.
5. Then create a section with that final group and using that section created the final layout.

By implementing this code you can see some beautiful and complex grid like below.

That’s it you have implemented your first project with UICollectionViewCompositionalLayout.

Image credit: Giphy

Conclusion

We have seen how powerful UICollectionViewCompositionalLayout is, but there is a lot more in UICollectionViewCompositionalLayout. We will cover that some other day. Till then enjoy coding and play with this new feature in UICollectionView.

If you have any questions then feel free to ask in the comments.