Member-only story
Super Easy Compositional UICollectionViews in Swift
Creating an orthogonal scrolling page is super easy with the modern compositional layouts in iOS 13+
In this article, I’ll be demonstrating how easy it is to create an orthogonal scrolling page by using UICollectionViewCompositionalLayout. We will have a detailed look of the view hierarchy to learn the core concepts of modern collection view in iOS 13, and build an orthogonal scrolling collection view step by step.
1. The Old Days of Using Nested UICollectionViews
Through the years, iOS developers strive to achieve cross-scrolling pages like Apple does within their App Store. Developers are impressed by how Apple mixes the horizontal scrolling and vertical scrolling within the same page.
Before iOS 13 was released, there was only one way to achieve this: wrapping the UICollectionView instance within the UICollectionViewCell of another UICollectionView. It certainly can be within an UITableViewCell; it just depends on whether you’re using an UICollectionView or UITableView as the parent view. But normally UICollectionView is more popular, as it is more flexible for a customised layout. The internal UICollectionView implements horizontal flow layout, while the outer UICollectionView implements vertical flow layout or vice versa.
The architecture has been fine for years, but it will easily become messy when page and data goes massive, as the two instances of UICollectionView implement different data sources and hook up with different delegates. You need to define different instances of UICollectionViewLayout for them too.
2. Detailed Look of Modern Compositional Layout
The compositional collection view is built on several core compositional elements. Let’s take a detailed look at them on the hierarchy.
