UIKit Development

Collection Views and Compositional Layout

Build flexible lists, grids, and mixed layouts from compositional items, groups, sections, and supplementary views.

Intermediate5 min read2 guided activities

Before you begin

What you will understand

Choose collection views for flexible data presentation.
Compose layouts from items, groups, and sections.
Create adaptive list and grid sections.
Add headers and orthogonal scrolling deliberately.

Learning stage

Concept Explanation

UICollectionView separates data, reusable presentation, layout, and interaction. It can represent a simple list, grid, carousel, or a screen combining several section styles. This flexibility makes it the default choice for many modern data-driven UIKit screens.

Compositional layout builds from the inside out: an item sits in a group, groups repeat inside a section, and sections form the complete layout. Fractional, absolute, and estimated dimensions express different sizing intent. Content insets and inter-item spacing belong at the level whose repetition they should affect.

A section provider can choose layout based on the section model and current environment. Supplementary items represent headers and footers. Orthogonal scrolling creates horizontal movement inside a vertical collection, but use it sparingly because nested gestures and partially visible content can reduce discoverability.

Item: smallest layout unit corresponding to presented content.
Group: row, column, or custom arrangement of items.
Section: repeating groups plus section behavior.
Supplementary view: header or footer attached to layout.
Orthogonal scrolling: section movement perpendicular to the main axis.

Learning stage

Syntax & Examples

This compositional section adapts from two to four columns based on available width.

CourseGridLayout.swiftswift

func makeLayout() -> UICollectionViewLayout {
  UICollectionViewCompositionalLayout { _, environment in
    let columns = environment.container.effectiveContentSize.width > 700 ? 4 : 2

    let item = NSCollectionLayoutItem(
      layoutSize: .init(widthDimension: .fractionalWidth(1),
                        heightDimension: .fractionalHeight(1))
    )
    item.contentInsets = .init(top: 6, leading: 6, bottom: 6, trailing: 6)

    let group = NSCollectionLayoutGroup.horizontal(
      layoutSize: .init(widthDimension: .fractionalWidth(1),
                        heightDimension: .estimated(180)),
      repeatingSubitem: item,
      count: columns
    )

    let section = NSCollectionLayoutSection(group: group)
    section.contentInsets = .init(top: 12, leading: 14, bottom: 24, trailing: 14)
    return section
  }
}

The section provider uses effective content width, so it responds to window size rather than a hard-coded device name.

Learning stage

Real-World Usage

Connect the UIKit concept to complete, maintainable application features.

Combine featured carousels, category rows, and grids on one screen.
Create adaptive galleries and dashboards.
Present a collection as an inset grouped list.
Add pinned section headers when they improve orientation.

Learning stage

Common Mistakes

Identify lifecycle, ownership, identity, layout, accessibility, and user-experience risks.

Using device-model checks instead of available container width.
Giving estimated dimensions without constraints that resolve content size.
Adding horizontal carousels for every section.
Putting spacing at the wrong composition level.
Coupling layout section indexes to unrelated global state.

Learning stage

Practice Exercises

Build the behavior in a small Xcode project and inspect it across realistic states.

Activity 1

Build a mixed learning dashboard

Create a featured horizontal section, an adaptive course grid, and a list section with headers.

Hint: Represent section kind in a model and switch on it inside the section provider.

Activity 2

Adapt by width

Change a grid from one to four columns as effective container width grows, including split view.

Hint: Inspect the layout environment rather than UIScreen bounds.

Learning stage

Knowledge Check

Answer each question before revealing the explanation.

QUESTION 1

What is the compositional-layout hierarchy?

A.Items form groups, and groups repeat in sections
B.Controllers form windows
C.Cells contain data sources
D.Constraints form models

Reveal answer

Items form groups, and groups repeat in sections

The full collection layout is composed from section definitions built from groups and items.

QUESTION 2

Why use the layout environment's effective content size?

Reveal answer

It reflects the actual space available to the collection, including resizing and multitasking.

Device names do not reliably describe the current window width.

Learning stage

Interview Preparation

Explain the design in terms of lifecycle, identity, ownership, system behavior, and trade-offs.

How do you design a compositional collection layout?

Short answer: Model section kinds, compose item/group/section geometry, and adapt from the environment's available space.

Explore the detailed answer

I start from content requirements, define item sizing, group repetition, section insets and supplementaries, then choose per-section behavior through a provider. Estimated sizes require a self-sizing content chain, and horizontal sections are reserved for product meaning rather than decoration.

Possible follow-ups

• When would you use estimated dimensions?
• How do supplementary views differ from decoration views?

Learning stage

Key Takeaways

Compositional layout turns complex collection screens into explicit, reusable section geometry that can adapt to the actual container.

Collection views support more than grids.
Compose item, group, then section.
Choose dimensions by intent.
Adapt to effective content width.
Use supplementaries and orthogonal scrolling purposefully.