MacKuba

Previously:

iOS ships by default with the UICollectionView flow layout, which is great in simple cases

However, doing custom layouts is very complex, requires boilerplate code, thinking about performance etc.

New in iOS 13 and macOS 10.15: Compositional Layout

Compositional layout is composable, flexible and fast

It works by taking small layout groups (line-based, i.e. using flow layout) and composing them together into bigger pieces

Available on iOS, tvOS and macOS (same API)

UI/NSCollectionViewCompositionalLayout  ⭢  NSCollectionLayoutSection  ⭢  NSCollectionLayoutGroup  ⭢  NSCollectionLayoutItem

NSCollectionLayoutSize – defines size (width + height) for an item or group:

.fractionalWidth(0.5) – half of the width of the container

.fractionalHeight(0.5) – half of the height of the container

.absolute(200)

.estimated(200) – tells iOS how much you think it’s going to be, but the final value is calculated from AutoLayout

Both width and height can be proportional to either container’s width or height

NSCollectionLayoutItem – specification of a single cell type, with a definition of size, insets etc.

NSCollectionLayoutGroup – basic unit of layout, usually some row or column of items

• can be horizontal, vertical or custom
• has its defined size and contains a number of items
• custom group includes a NSCollectionLayoutGroupCustomItemProvider
• can contain other nested groups as items

NSCollectionLayoutSection – section of the collection view, like before

• includes a single group

UICollectionViewCompositionalLayout – sets up the layout for the UICollectionView, manages whole view

• includes a section or a section provider (closure)
• section provider takes section index and a “layout environment” object and returns a specification for that section

NSCollectionLayoutSupplementaryItem – generic supplementary item like a badge on the item

NSCollectionLayoutBoundarySupplementaryItem – an item that can stick to the edge when scrolling (header/footer)

• can be added to a section or the whole layout

NSCollectionLayoutDecorationItem – an item that is displayed in the background of a section

NSCollectionLayoutAnchor – specifies how a supplementary item is anchored to its containing item/group

• includes edges (top, leading etc.) and offset from the edges (fractional)

Supplementary and decoration item types have to be registered using: layout.register(Klass.self, for…Kind: “background”)

Horizontal scrolling like in the App Store app sections:

section.orthogonalScrollingBehavior = …

• continuous – scrolls to any position
• continuousGroupLeadingBoundary – stops between groups
• paging – stops at multiplies of the width of the container
• groupPaging – shows each item of the main group in whole
• groupPagingCentered – as above, but centers the group