Blog

Collection View Layout in Practice

As we already know, the new collection View Layouts make it easy to build rich interactive collections. Learn how to make dynamic and responsive layouts that range in complexity from basic lists to an advanced, multi-dimensional browsing experience.

In the last post, we talked about UICollectionViewCompositionalLayout, and we built a simple application. But together with the layout, UICollectionView needs its Datasource. In this article, I want to share more about UICollectionViewDiffableDataSource and NSDiffableDataSourceSnapshot, which also were introduced in the last WWDC 2019.

UICollectionViewDiffableDataSource

As usual, this data source class is to serve the data for UICollectionView. It is initialized with closure which provides cells for the collection view. Bellow is the usage of UICollectionViewDiffableDataSource initialization for my collection view layout.

Additionally, you can find more optional closures which provide Supplementary View for the collection view (header, footer or leading, trailing view).

Before this, developers usually find it hard to maintain the number of items in the datasource and the number that we defined in the collection view delegate methods. Now, everything is simplified, just tell the data source that you have new data and after this, all changes will be done in the UICollectionView automatically and you will see your new update appears nicely.

NSDiffableDataSourceSnapshot

This struct is a snapshot of the data, UICollectionViewDiffableDataSource is using this data. Snapshot has all methods for data manipulation like insert, move, delete, append and reload.

This structure holds two generic elements SectionIdentifierType, ItemIdentifierType: they are section and element identifiers and they can be any object or struct (which implements Hashable protocol). Item identifiers will be passed to the UICollectionViewDiffableDataSource cellProvider closure.

Snapshot must has at least one section, in the section you can freely add elements with section identifier or without it.

With Snapshot, you can either get current snapshot from datasource and you update it later on, or create a new one, append items and sections to it, and then use apply method to pass it into datasource. For example:

Now, don’t forget to define the section’s header and footer for the datasource. In this example, I want to create header for each section to describe what is the section about, and the footer for the last section to show some buttons and links. Let’s talk about the definition

NSCollectionLayoutBoundarySupplementaryItem

NSCollectionLayoutBoundarySupplementaryItem is for footers and headers. You can add this item to NSCollectionLayoutSection and UICollectionViewCompositionalLayoutConfiguration. The size you can set with NSCollectionLayoutSize, and where the item will be, using NSRectAlignment. For header you should set NSRectAlignment to .top, for footer, it should equals to .bottom.

Here is my example of how to use it:

Firstly, our Header and Footer view are subclasses of UICollectionReusableView, and you need to register them:

After that, we initialize the views by using supplementaryViewProvider.

Last but not least, we need to specify the sizes of them, and add them into the layouts:

 

We, as iOS developers, are so familiar with the AppStore and you know that the AppStore is where Apple shows off all the best apps and games in the world. It looks great, UI & UX are optimized for the users. My idea is to create the same layout as Apple does, in this demo, I want to simulate the Games Tab with some dummy data. The key point is that I only use the UICollectionViews, avoid using complicated view hierarchy just to see how far we can go with it.

After I added some more sections, for example: Featured games, what we are playing, new games we love, games of the month, etc., let’s take a look at the demo

The AppStore Layout

 

Summary

At the end of the day, I think Apple finally did what they should have done a long time ago, it provides a powerful tool that helps us open our minds to creativity.

Find full source code at GitHub

Previous post: ‘First experiment in UICollectionViewCompositionalLayout’