Create the App Store with UICollectionView Compositional Layouts

Compositional Layouts with UICollectionView

Image for post
Image for post
Photo by Neven Krcmarek on Unsplash

Prerequisites:

Terminology:

UICollectionViewCell: The on-screen cell for the UICollectionView type

The Approach

UICollectionFlowLayout is great and is a concrete Layout given to you for use creating your Apps. But what if you want to create a more complex layout (the App Store layout is an often-chosen example of this) including multiple scrolling sections you’re likely to run into a problem (or two). In steps *Compositional Layouts* to help you with just that.

The classes for compositional layouts

NSCollectionLayoutSize The size

Diffable data source

The data source for this solution is a DiffableDataSource (sorry for those not familiar with this). However since UITableViewDataSource replaced by DiffableDataSource this is a more declarative way of using the UICollectionView API.

The code

The UIViewController where I have placed the code for the Apps page is in AppsCompositionalLayout.swift in the repo.

Placing a button on the navigation bar

An initial issue with creating this — the large navbar title disappears when the user scrolls, and the profile image slides up.

Image for post
Image for post
Image for post
Image for post
Click for Gist

Sections

I’ve created a protocol called LayoutSection that each section of my little App store will conform to. By section I mean in the following image there are two sections — the red section is FeatureSection and the purple section is NewUpdatedSection

Image for post
Image for post
Image for post
Image for post
Click for Gist
Image for post
Image for post
Click for Gist
Image for post
Image for post
Click for Gist
Image for post
Image for post
Click for Gist
Image for post
Image for post
Click for Gist

The datasource

The UICollectionViewDiffableDataSource leverages the sections enum defined, and the Sections protocol that allows us to configure each cell for the relevant index path. The use of AnyHashable is covered in the why why why section below!

Image for post
Image for post
Click for Gist

Configuring the header

The header is a property of the dataSource, as in this example we can return the appropriate header for each Section that is available from the enum here featured in the relevant UIViewController. I did put this into a function that is called in viewDidLoad()

Image for post
Image for post
Click for Gist

The snapshot

Once the header has been set up (this, one again, has been performed in viewDidLoad()). As you can see a snapshot has been set up and each Section is appended to to it — before being applied to the dataSource.

Image for post
Image for post
Click for Gist

Cells

I’d put the UICollectionViewCell instances in the pot as “nothing interesting”. I have created some programatically with constraints, and raised others from the xib file.

Image for post
Image for post
Image for post
Image for post
Click for Gist

WHY WHY WHY

This is an article rather than production code. I developed this for an iPhone SE, and some of the padding for the Layout is absolute no matter the size of the device — this is something that should be thought about if you are thinking of doing something like this for production code.

Conclusion

This article uses UICollectionViewDiffableDataSource AND UICollectionViewDiffableDataSource to create a clone of the Apple App Store. This has given a good opportunity to use features of iOS13 in quite a creative way.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store