Implementing modern collection views

At a glance

Project structure

Modern Collection Views/
├── Compositional Layout/
│   ├── Basics View Controllers/
│   ├── Advanced Layouts View Controllers/
│   ├── App Samples View Controllers/
│   ├── Cells and Supplementary Views/
│   └── Controllers/
├── Diffable/
├── Lists/
├── Outline/
├── Cell Configurations/
└── AppDelegate.swift
Modern Collection Views Mac/
├── Compositional Layout/
├── Diffable/
└── AppDelegate.swift

Structure observations

• Folders are architectural boundaries by API family, not layers of one application.
• Most examples keep Section/Item, layout construction, registrations, and initial snapshots beside one controller.
• Model helpers such as WiFiController, MountainsController, and conference controllers appear only when a demo needs changing or richer data.

Overall architecture

flowchart LR
    Catalog["Storyboard/menu catalog"] --> Demo["Feature view or window controller"]
    Demo --> Layout["Compositional layout"]
    Demo --> Registration["Cell/supplementary registration"]
    Demo --> DataSource["Diffable data source"]
    Model["Local items or helper controller"] --> Snapshot["Snapshot / section snapshot"]
    Snapshot --> DataSource
    Layout --> Collection["Collection or table view"]
    Registration --> DataSource
    DataSource --> Collection
    State["Selection, filter, reorder, configuration state"] --> Demo
    Demo --> Snapshot

Reference code

Modern Collection Views/Compositional Layout/Basics View Controllers/GridViewController.swift:53 — a typical demo owns registration, diffable data source, and initial snapshot in one feature scope.

private func configureDataSource() {
    let cellRegistration = UICollectionView.CellRegistration<TextCell, Int> { (cell, indexPath, identifier) in
        // Populate the cell with our item description.
        cell.label.text = "\(identifier)"
        cell.contentView.backgroundColor = .cornflowerBlue
        cell.layer.borderColor = UIColor.black.cgColor
        cell.layer.borderWidth = 1
        cell.label.textAlignment = .center
        cell.label.font = UIFont.preferredFont(forTextStyle: .title1)
    }

    dataSource = UICollectionViewDiffableDataSource<Section, Int>(collectionView: collectionView) {
        (collectionView: UICollectionView, indexPath: IndexPath, identifier: Int) -> UICollectionViewCell? in
        // Return the cell.
        return collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: identifier)
    }

    // initial data
    var snapshot = NSDiffableDataSourceSnapshot<Section, Int>()
    snapshot.appendSections([.main])
    snapshot.appendItems(Array(0..<94))
    dataSource.apply(snapshot, animatingDifferences: false)
}

Interpretation

The repeated controller-local setup is deliberate for a catalog: every example can be read and run independently. A production app could extract factories, but doing so here would obscure the specific layout or data-source concept.

Ownership and state

classDiagram
    UIViewController *-- UICollectionView : creates per demo
    UIViewController *-- UICollectionViewLayout : creates per demo
    UIViewController *-- UICollectionViewDiffableDataSource : retains
    UICollectionViewDiffableDataSource *-- NSDiffableDataSourceSnapshot : current identifiers
    ReorderableListViewController *-- Dictionary : backingStore source of truth
    WiFiSettingsViewController *-- WiFiController : dynamic model helper
    CustomConfigurationCell *-- CustomContentConfiguration : applies
    CustomContentConfiguration ..|> UIContentConfiguration
    CustomContentView ..|> UIContentView

Ownership evidence

Modern Collection Views/Lists/ReorderableListViewController.swift:24 — the reorder sample explicitly distinguishes controller-owned source data from the diffable presentation state.

var collectionView: UICollectionView!
var dataSource: UICollectionViewDiffableDataSource<Section, Item>!
lazy var backingStore: [Section: [Item]] = { initialBackingStore() }()

enum ReorderingMethod: CustomStringConvertible {
    case finalSnapshot, collectionDifference
}
var reorderingMethod: ReorderingMethod = .collectionDifference

Class and protocol design

The strongest protocol-oriented example is CustomContentConfiguration: UIContentConfiguration paired with CustomContentView: UIContentView. Most other variability uses generic diffable data-source types and closures rather than app-defined protocols.

Access control

Reference code

Modern Collection Views/Cell Configurations/CustomConfigurationViewController.swift:10 — identifier and controller implementation details are fully scoped to this feature.

private enum Section: Hashable {
    case main
}

Logic ownership and placement

Design patterns

Naming conventions

• Controllers name the exact concept: GridViewController, ReorderableListViewController, and WiFiSettingsViewController.
• Nested Section, Item, and ItemType types keep diffable identifiers close to their owner.
• Setup methods consistently use createLayout, configureHierarchy, and configureDataSource.
• macOS counterparts use WindowController; UIKit counterparts use ViewController.

Architecture takeaways

• Treat a sample catalog as independent feature compositions, not as one layered application.
• Keep stable identity types close to the snapshot owner and separate source data when edits must persist.
• Rebuild snapshots as projections of model state instead of manually synchronizing visible indexes.
• Extract reusable configuration values/views when appearance must respond systematically to cell state.

Source map

• Official Apple documentation