UICollectionViewCompositionalLayout Complete Guide

UICollectionView is a powerful tool for building complex layouts in iOS. The UICollectionViewCompositionalLayout introduced in iOS 13 provides new possibilities for creating custom layouts. This comprehensive guide explores how Compositional Layout works and how to create complex grouped, nested layouts and enhanced views.

The layout system consists of three main components: Item (the smallest unit representing a single data block), Group (which contains items and specifies layout direction), and Section (a group of data corresponding to how data is organized in the data source).

In iOS 6, the UICollectionView API was divided into three categories: Data, Layout, and Presentation. In iOS 13, Apple introduced Diffable Data Source and Compositional Layout as new components for managing data and creating layouts.

NSCollectionLayoutSize allows defining width and height using absolute values, estimated values, or fractional dimensions. Groups (NSCollectionLayoutGroup) must specify axis direction to determine scrolling behavior and contain items. Sections can have different layouts and support background, headers, and footers.

The guide covers creating layouts with different item distributions per section using sectionProvider, nested layout groups for complex designs like App Store UIs, orthogonal scrolling behaviors (continuous, paging, groupPaging), custom layouts using NSCollectionLayoutGroup.custom, and supplementary views including badges, headers, footers, and decoration items.

Key concepts include NSCollectionLayoutAnchor for positioning supplementary items, boundary supplementary items for headers/footers with pinToVisibleBounds option, and decoration items for section backgrounds. The Diffable Data Source provides declarative data management with automatic diffing between snapshots.