Blog

First experiment in UI Collection View Layout

In this WWDC 2019, Apple introduced many great enhancements and new features such as SwiftUI, Core ML 3 framework or Combine. But I’ve got my eyes on UICollectionViewCompositionalLayout, a new extension of UICollectionViewLayout.

In my opinion, UICollectionView played an important role in app development. It’s not that easy to customize UICollectionView to create a complicated layout. For example, if you want to create a fancy showcase for a company products, you usually find a third-party library to make a complex layout for the collection view, otherwise, tons of codes should be written by yourself. Luckily, Apple now gives us UICollectionViewCompositionalLayout to make the job much easier.

The purpose of this post is to share my experiment about UICollectionViewCompositionalLayout. My aim is to create a really simple application which shows you how easy was that to customize the layout with just a little  amount of code involved.

Let’s start with a setup for UICollectionView

Next, I want to create a menu for my simple application. A function called menuLayout() will return a UICollectionViewCompositionalLayout for the UICollectionView.  I set the values of ‘fractionalWidth’ equal to 1.0, in oder to make a list of menu items (which looks like a UITableView).

As you can see, with just a few code, the layout is fully set up. We need to give the collection view a data source by using UICollectionViewDiffableDataSource for the collection view.

And don’t forget to create Section Identifier Type and Item Identifier Type for the data source : a ‘Menu’ enum with raw value type as string, it should be case iterable. Just like this:

Let’s run the program and see what we have here

It looks promising, isn’t it?

Above is a simple example for us to get started with UICollectionViewCompositionalLayout. If we want to make a fancy layout, like the Appstore for instance, we need to take a deep look into it.

NSCollectionLayoutItem

NSCollectionLayoutItem is for setting up the item in the group, it decides what is the size of an item, or how to calculate the item dimensions. NSCollectionLayoutSize is needed to initialize NSCollectionLayoutItem. By this, we can set up the size, edge spacing and content insets.

For example, I add a separator view and giving these items some spacing by the following code

It looks much better after we adjusted the spacing between items

 

If you set NSCollectionLayoutSize.heightDimension = .fractionalWidth(0.5), it means the height of the item will be equal to half of group width and and vice versa. Or if you use estimated, it quickly calculates the size of item, group to fit with your setup. You may want to play around with these variants yourself to find more interesting things.

Here is an example of  a grid view with estimated height dimensions:

 

Estimated Grid Collection View

NSCollectionLayoutGroup

NSCollectionLayoutGroup is extending NSCollectionLayoutItem and you can add into it as many items as you want to.

In order to initialize NSCollectionLayoutGroup, you have to define at least 3 things:

  • The direction is horizontal or vertical.
  • Size of group (layoutSize).
  • How many items in the group (subitem).

The layout will render number of groups, depending on how many sub items that we defined above and how many items that we have in the data source.

For example, we have one group in the section, and group’s sub-items has two items, datasource contains ten items, then five groups will be drawn. interItemSpacing variable supplies additional spacing between items along the layout axis of the group.

Horizontal direction

Vertical direction

Other than these 2 default directions, we can also create our own custom variant by using NSCollectionLayoutGroupCustomItem. The crucial point is that we can have a group nested inside another group. Following is an example of a complex layout with multiple groups.

I added randomly some nested group in the following code and here is the result

Nested group

NSCollectionLayoutSection

We can have multiple sections in a collection view, each section can have one or more groups with different directions.

Let’s play around with the section and its variables.

And here is the result:

UICollectionViewCompositionalLayout

UICollectionViewCompositionalLayout is the “main character”. We can initialize it with NSCollectionLayoutSection or with closure, this closure will be called when layout needs information about the section. Initializing it with UICollectionViewCompositionalLayoutConfiguration, we can set space between sections and scroll direction. Using UICollectionViewCompositionalLayout you can set up different behavior for each sections.

Conclusion

Apple made me WOW when they first introduced UICollectionViewCompositionalLayout. With this new layout, developers can create all the custom layouts without miserably finding a third-party library. In the next blog post, I will try to “copy” the layout of Apps tab in the iPhone Appstore.

Stay tuned for more!

 

DemoSource Code

Reference: Advances in Collection View Layout