Customizing collection view layouts

At a glance

Project structure

ImageFeed/
├── AppDelegate.swift
├── FriendsViewController.swift
├── FeedViewController.swift
├── Model/Person.swift
├── Layouts/
│   ├── ColumnFlowLayout.swift
│   └── MosaicLayout.swift
├── Cells/
│   ├── PersonCell.swift
│   └── MosaicCell.swift
├── Controls/AvatarView.swift
└── Utilities/Utilities.swift

Structure observations

• Layout algorithms are reusable objects, separate from data source and navigation code.
• Person / PersonUpdate describe list data and simulated remote changes.
• Cells own presentation/reuse cleanup; controllers own model arrays and Photos integration.

Overall architecture

flowchart LR
    Storyboard["Storyboard"] --> Friends["FriendsViewController"]
    Friends --> Column["ColumnFlowLayout"]
    Friends --> People["[Person]"]
    Friends -->|"selected Person"| Feed["FeedViewController"]
    Feed --> Mosaic["MosaicLayout"]
    Feed --> Photos["Photos / PHAsset"]
    Column -->|"responsive itemSize + animations"| FriendsCV["Friends collection"]
    Mosaic -->|"cached layout attributes"| FeedCV["Feed collection"]
    People --> PersonCell["PersonCell"]
    Photos --> MosaicCell["MosaicCell"]

Reference code

ImageFeed/FeedViewController.swift:23 — the feed installs the fully custom layout as a strategy when it constructs its collection view.

override func viewDidLoad() {
    super.viewDidLoad()

    let mosaicLayout = MosaicLayout()
    collectionView = UICollectionView(
        frame: view.bounds,
        collectionViewLayout: mosaicLayout
    )
    collectionView.delegate = self
    collectionView.dataSource = self
    collectionView.register(
        MosaicCell.self,
        forCellWithReuseIdentifier: MosaicCell.identifer
    )
}

Interpretation

Controllers provide data and navigation; layout subclasses own geometry. ColumnFlowLayout reuses flow layout’s engine and changes sizing/update attributes, while MosaicLayout must calculate, cache, invalidate, size, and query every attribute itself.

Ownership and state

classDiagram
    FriendsViewController *-- PersonArray : private people
    FriendsViewController --> FeedViewController : segue injects person
    FeedViewController *-- PHAssetArray : assets
    FeedViewController *-- AvatarView : title view
    UICollectionView *-- UICollectionViewLayout : active strategy
    MosaicLayout *-- LayoutAttributesArray : cachedAttributes
    MosaicLayout *-- CGRect : contentBounds
    ColumnFlowLayout *-- IndexPathArray : insert/delete transition state
    UICollectionView *-- PersonCell : reuse lifecycle
    UICollectionView *-- MosaicCell : reuse lifecycle
    MosaicCell *-- String : assetIdentifier guard

Ownership evidence

ImageFeed/Layouts/MosaicLayout.swift:17 — the custom layout owns cached attributes and content bounds, resetting both before deriving frames for the current collection.

class MosaicLayout: UICollectionViewLayout {
    var contentBounds = CGRect.zero
    var cachedAttributes =
        [UICollectionViewLayoutAttributes]()

    override func prepare() {
        super.prepare()
        guard let collectionView = collectionView else { return }

        cachedAttributes.removeAll()
        contentBounds = CGRect(
            origin: .zero,
            size: collectionView.bounds.size
        )
        let count = collectionView.numberOfItems(inSection: 0)
        // Derive and cache one frame per item.
    }
}

FriendsViewController also declares private flowLayout and feedViewController properties, but the inspected source does not use them after declaration; the active feed destination comes from the segue, and the list layout is storyboard-provided.

Class and protocol design

There is no app-defined protocol. Subclass polymorphism is the primary abstraction: UIKit calls the common layout API, and each concrete layout implements a different geometry strategy.

Access control

Reference code

ImageFeed/Layouts/ColumnFlowLayout.swift:10 — fixed geometry and transition bookkeeping are private to the layout.

class ColumnFlowLayout: UICollectionViewFlowLayout {
    private let minColumnWidth: CGFloat = 300.0
    private let cellHeight: CGFloat = 70.0

    private var deletingIndexPaths = [IndexPath]()
    private var insertingIndexPaths = [IndexPath]()
}

Logic ownership and placement

Design patterns

Naming conventions

• Layout types name geometry: ColumnFlowLayout and MosaicLayout.
• FriendsViewController and FeedViewController name feature screens, not generic collection mechanics.
• PersonUpdate cases use collection-operation verbs: delete, insert, move, reload.
• Cache/state names are direct: cachedAttributes, contentBounds, deletingIndexPaths.
• MosaicCell.identifer preserves the source’s misspelling; identifier would be the conventional spelling.

Architecture takeaways

• Use a flow-layout subclass when its placement model still fits; use a full layout subclass when geometry no longer does.
• A custom layout owns cache validity, content bounds, and efficient viewport queries.
• Keep collection model mutations synchronized with batch-update commands.
• Guard asynchronous cell results with stable identity and clear the identity on reuse.
• Make layout caches private in production to protect derived-state invariants.

Source map

• Official Apple documentation