SwiftUI12 min read

Mastering Custom Layouts in SwiftUI: A Deep Dive

SwiftUI's declarative nature simplifies UI development, but sometimes built-in containers aren't enough. When you need pixel-perfect control or entirely novel arrangements, custom layouts are your answer. This article delves into the `Layout` protocol, empowering you to design and implement bespoke view hierarchies.

The Need for Custom Layouts in SwiftUI

SwiftUI provides a powerful set of layout containers like VStack, HStack, ZStack, Grid, and Form. For many common UI patterns, these are perfectly adequate. However, there are scenarios where you'll find their capabilities too restrictive:

Irregular Grids: Imagine a photo gallery with varying aspect ratios where you want to fill available space smartly, not just uniform cells.
Circular or Radial Arrangements: Displaying data points in a circle, like a segmented control or a watch face, is difficult with standard stacks.
Overlapping Views with Specific Rules: Think of card-stack UIs or complex data visualizations where views need to overlap in a calculated manner.
Dynamic, Contextual Layouts: Layouts that adapt not just to size, but also to user input, data changes, or specific business logic that doesn't fit standard patterns.

The Layout protocol, introduced in iOS 16 and macOS 13, provides the tools to address these advanced layout needs directly within SwiftUI's declarative paradigm. It allows you to define how child views are measured and placed, giving you ultimate control over your UI.

Understanding the Layout Protocol

The Layout protocol is a powerful abstraction that enables you to define custom layout logic. To conform to it, you must implement two primary methods:

sizeThatFits(proposal: subviews: cache:): This method is responsible for determining the ideal size of your custom layout, given a proposed size and its subviews. SwiftUI calls this to negotiate sizes up the view hierarchy. You'll query each subview for its preferred size given the proposal, and then return an overall size for your custom layout.
placeSubviews(in: proposal: subviews: cache:): Once SwiftUI has determined the final size and position for your custom layout (the bounds rectangle), this method is called. Your job here is to iterate through your subviews and use the place(at: anchor: proposal:) method on each subview to position them within the provided bounds. This is where the magic of arranging views happens.

There are also optional methods that provide more advanced capabilities:

spacing(subviews: cache:): Customizes spacing between subviews.
hash(into: subviews: cache:): Informs SwiftUI when layout properties change, so it can re-layout.
explicitAlignment(of: in: proposal: subviews: cache:): Customizes alignment guides for subviews within your layout.
symmetry(subviews: cache:): Provides information about layout symmetry for animation purposes.
animate(graph: in: subviews: cache:): Directly controls animations during layout changes.

For most initial custom layouts, you'll focus on sizeThatFits and placeSubviews.

Building a Simple Custom Layout: Radial Layout

Let's create a RadialLayout that arranges its child views in a circle. This is a classic example that goes beyond what HStack or VStack can easily achieve. Our layout will distribute subviews evenly around a central point, adapting to the available size.

First, we define our RadialLayout struct conforming to Layout. We'll need a spacing property to control the distance between views, and an angularOffset to rotate the entire layout if desired.

swift

import SwiftUI

struct RadialLayout: Layout {
    var radius: CGFloat
    var angularOffset: Angle

    init(radius: CGFloat = 100, angularOffset: Angle = .zero) {
        self.radius = radius
        self.angularOffset = angularOffset
    }

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        // We'll calculate a size large enough to contain all subviews in a circle.
        // For simplicity, let's assume a fixed radius for now, 
        // and views won't exceed a certain max dimension within the circle.
        // A more robust implementation would check each subview's size.
        let diameter = radius * 2
        return CGSize(width: diameter, height: diameter)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        let totalAngle = 2 * .pi
        let angleIncrement = totalAngle / CGFloat(subviews.count)

        let center = CGPoint(x: bounds.midX, y: bounds.midY)

        for (index, subview) in subviews.enumerated() {
            let angle = CGFloat(index) * angleIncrement + angularOffset.radians

            // Calculate position on the circle
            let x = center.x + radius * cos(angle)
            let y = center.y + radius * sin(angle)

            // Get the subview's proposed size
            let subviewSize = subview.sizeThatFits(.unspecified)

            // Place the subview. We want its center to be at (x, y).
            subview.place(at: CGPoint(x: x - subviewSize.width / 2, y: y - subviewSize.height / 2), 
                          anchor: .topLeading, 
                          proposal: .constant(subviewSize))
        }
    }
}

// How to use RadialLayout
struct RadialLayoutExample: View {
    var body: some View {
        RadialLayout(radius: 120, angularOffset: .degrees(90)) {
            ForEach(0..<8) { i in
                Text("\(i)")
                    .font(.largeTitle)
                    .frame(width: 50, height: 50)
                    .background(Color.blue)
                    .cornerRadius(10)
                    .foregroundColor(.white)
            }
        }
        .frame(width: 300, height: 300)
        .border(Color.red)
    }
}

struct RadialLayoutExample_Previews: PreviewProvider {
    static var previews: some View {
        RadialLayoutExample()
    }
}

In this example, sizeThatFits currently returns a fixed diameter, which works for simple cases. For production, you'd want to query subviews for their sizeThatFits and calculate a minimum bounding box that accommodates all of them. The placeSubviews method then iterates, calculates an angle for each subview, and positions it on a circle of the specified radius around the layout's center.

swift

import SwiftUI

struct RadialLayout: Layout {
    var radius: CGFloat
    var angularOffset: Angle

    init(radius: CGFloat = 100, angularOffset: Angle = .zero) {
        self.radius = radius
        self.angularOffset = angularOffset
    }

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        // Calculate a size large enough to contain all subviews in a circle.
        // A more robust implementation would consider subview sizes.
        let diameter = radius * 2 + subviews.map { $0.sizeThatFits(.unspecified).width }.reduce(0, max)
        return CGSize(width: diameter, height: diameter)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        guard !subviews.isEmpty else { return }

        let totalAngle = 2 * .pi
        let angleIncrement = totalAngle / CGFloat(subviews.count)

        let center = CGPoint(x: bounds.midX, y: bounds.midY)

        for (index, subview) in subviews.enumerated() {
            let angle = CGFloat(index) * angleIncrement + angularOffset.radians

            // Calculate position on the circle
            let x = center.x + radius * cos(angle)
            let y = center.y + radius * sin(angle)

            // Get the subview's proposed size
            let subviewSize = subview.sizeThatFits(.unspecified)

            // Place the subview. We want its center to be at (x, y).
            subview.place(at: CGPoint(x: x - subviewSize.width / 2, y: y - subviewSize.height / 2), 
                          anchor: .topLeading, 
                          proposal: .constant(subviewSize))
        }
    }
}

// How to use RadialLayout
struct RadialLayoutExample: View {
    var body: some View {
        RadialLayout(radius: 120, angularOffset: .degrees(90)) {
            ForEach(0..<8) { i in
                Text("\(i)")
                    .font(.largeTitle)
                    .frame(width: 50, height: 50)
                    .background(Color.blue)
                    .cornerRadius(10)
                    .foregroundColor(.white)
            }
        }
        .frame(width: 300, height: 300)
        .border(Color.red)
    }
}

Advanced Techniques: Caching and Proposals

The cache parameter available in Layout protocol methods is crucial for performance. Layout calculations can be expensive, especially with many subviews. By using a custom Layout.Cache type, you can store intermediate calculation results and reuse them across multiple layout passes or when only minor changes occur.

swift

struct RadialLayoutWithCache: Layout {
    var radius: CGFloat
    var angularOffset: Angle

    init(radius: CGFloat = 100, angularOffset: Angle = .zero) {
        self.radius = radius
        self.angularOffset = angularOffset
    }

    // Define a custom cache type
    struct Cache {
        var idealSubviewSizes: [CGSize]
    }

    func makeCache(subviews: Subviews) -> Cache {
        // Calculate and store ideal sizes once
        print("\n--- Creating Cache ---")
        let sizes = subviews.map { $0.sizeThatFits(.unspecified) }
        return Cache(idealSubviewSizes: sizes)
    }

    func updateCache(_ cache: inout Cache, subviews: Subviews) {
        // Update cache if subviews change or if cached data needs re-calculation
        print("--- Updating Cache ---")
        cache.idealSubviewSizes = subviews.map { $0.sizeThatFits(.unspecified) }
    }

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout Cache) -> CGSize {
        print("sizeThatFits for proposal: \(proposal)")
        // Use cached ideal sizes
        let maxSubviewWidth = cache.idealSubviewSizes.map { $0.width }.reduce(0, max)
        let maxSubviewHeight = cache.idealSubviewSizes.map { $0.height }.reduce(0, max)
        
        let diameter = radius * 2 + max(maxSubviewWidth, maxSubviewHeight)
        return CGSize(width: diameter, height: diameter)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout Cache) {
        print("placeSubviews in bounds: \(bounds)")
        guard !subviews.isEmpty else { return }
        
        let totalAngle = 2 * .pi
        let angleIncrement = totalAngle / CGFloat(subviews.count)

        let center = CGPoint(x: bounds.midX, y: bounds.midY)

        for (index, subview) in subviews.enumerated() {
            let angle = CGFloat(index) * angleIncrement + angularOffset.radians

            let x = center.x + radius * cos(angle)
            let y = center.y + radius * sin(angle)

            // Use cached subview size if available, or re-calculate if necessary
            let subviewSize = (index < cache.idealSubviewSizes.count) ? 
                               cache.idealSubviewSizes[index] : 
                               subview.sizeThatFits(.unspecified)

            subview.place(at: CGPoint(x: x - subviewSize.width / 2, y: y - subviewSize.height / 2), 
                          anchor: .topLeading, 
                          proposal: .constant(subviewSize))
        }
    }
}

// Usage is the same as RadialLayout
struct RadialLayoutWithCacheExample: View {
    @State private var toggleRadius = false

    var body: some View {
        VStack {
            RadialLayoutWithCache(radius: toggleRadius ? 150 : 100, angularOffset: .degrees(90)) {
                ForEach(0..<8) { i in
                    Text("\(i)")
                        .font(.largeTitle)
                        .frame(width: 50, height: 50)
                        .background(Color.orange)
                        .cornerRadius(10)
                        .foregroundColor(.white)
                }
            }
            .frame(width: 300, height: 300)
            .border(Color.purple)

            Button("Toggle Radius") {
                toggleRadius.toggle()
            }
        }
    }
}

The ProposedViewSize parameter in sizeThatFits and placeSubviews is crucial for understanding SwiftUI's layout behavior. It tells your layout what size SwiftUI's parent view suggests it should be. ProposedViewSize.unspecified means there's no strong preference, ProposedViewSize.zero means as small as possible, and a precise CGSize means a specific dimension. Your layout should try to respect this proposal while also accommodating its content.

Caching can significantly reduce redundant calculations, especially when dealing with complex view hierarchies or during animations where sizeThatFits might be called frequently for the same subviews.

swift

import SwiftUI

struct RadialLayoutWithCache: Layout {
    var radius: CGFloat
    var angularOffset: Angle

    init(radius: CGFloat = 100, angularOffset: Angle = .zero) {
        self.radius = radius
        self.angularOffset = angularOffset
    }

    // Define a custom cache type
    struct Cache {
        var idealSubviewSizes: [CGSize]
    }

    func makeCache(subviews: Subviews) -> Cache {
        // Calculate and store ideal sizes once
        print("\n--- Creating Cache ---")
        let sizes = subviews.map { $0.sizeThatFits(.unspecified) }
        return Cache(idealSubviewSizes: sizes)
    }

    func updateCache(_ cache: inout Cache, subviews: Subviews) {
        // Update cache if subviews change or if cached data needs re-calculation
        print("--- Updating Cache ---")
        cache.idealSubviewSizes = subviews.map { $0.sizeThatFits(.unspecified) }
    }

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout Cache) -> CGSize {
        print("sizeThatFits for proposal: \(proposal)")
        // Use cached ideal sizes
        let maxSubviewWidth = cache.idealSubviewSizes.map { $0.width }.reduce(0, max)
        let maxSubviewHeight = cache.idealSubviewSizes.map { $0.height }.reduce(0, max)
        
        let diameter = radius * 2 + max(maxSubviewWidth, maxSubviewHeight)
        return CGSize(width: diameter, height: diameter)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout Cache) {
        print("placeSubviews in bounds: \(bounds)")
        guard !subviews.isEmpty else { return }
        
        let totalAngle = 2 * .pi
        let angleIncrement = totalAngle / CGFloat(subviews.count)

        let center = CGPoint(x: bounds.midX, y: bounds.midY)

        for (index, subview) in subviews.enumerated() {
            let angle = CGFloat(index) * angleIncrement + angularOffset.radians

            let x = center.x + radius * cos(angle)
            let y = center.y + radius * sin(angle)

            // Use cached subview size if available, or re-calculate if necessary
            let subviewSize = (index < cache.idealSubviewSizes.count) ? 
                               cache.idealSubviewSizes[index] : 
                               subview.sizeThatFits(.unspecified)

            subview.place(at: CGPoint(x: x - subviewSize.width / 2, y: y - subviewSize.height / 2), 
                          anchor: .topLeading, 
                          proposal: .constant(subviewSize))
        }
    }
}

// Usage is the same as RadialLayout
struct RadialLayoutWithCacheExample: View {
    @State private var toggleRadius = false

    var body: some View {
        VStack {
            RadialLayoutWithCache(radius: toggleRadius ? 150 : 100, angularOffset: .degrees(90)) {
                ForEach(0..<8) {
                    Text("\($0)")
                        .font(.largeTitle)
                        .frame(width: 50, height: 50)
                        .background(Color.orange)
                        .cornerRadius(10)
                        .foregroundColor(.white)
                }
            }
            .frame(width: 300, height: 300)
            .border(Color.purple)

            Button("Toggle Radius") {
                toggleRadius.toggle()
            }
        }
    }
}

Tips for Effective Custom Layouts

Start Simple: Begin with sizeThatFits and placeSubviews. Only add complexity (like caching or animation hooks) when necessary.
Respect Proposals: In sizeThatFits, consider the proposal parameter carefully. If a fixed size is proposed, try to honor it unless it makes your content unreadable. When querying subviews, use subview.sizeThatFits(proposal) to get their preferred sizes within the given constraints.
Coordinate Systems: Remember that placeSubviews operates within the coordinate space of your custom layout. bounds.origin is typically (0,0) if your layout hasn't been offset.
Debugging: Use print statements or breakpoints within sizeThatFits and placeSubviews to understand the flow and inspect proposal, bounds, and subview sizes. This is crucial for fixing unexpected layout behaviors.
Performance: Leverage caching (makeCache, ) for complex layouts with many subviews or many layout passes (e.g., during animations). Avoid unnecessary calculations inside or .

Relying Solely on Stacks and Grids

Becoming a stronger iOS Engineer

THE MYTH or PROBLEM: Relying Solely on Stacks and Grids

Developers often believe SwiftUI's built-in `HStack`, `VStack`, `ZStack`, and `Grid` views cover all layout needs. However, for truly unique, irregular, or performance-critical compositions, these can be limiting, leading to complex nested views or `GeometryReader` abuses that perform poorly and are hard to maintain.

swift

Spacer()
// Many nested Stacks, overlay, background, alignmentGuide...
ZStack {
  ForEach(items) {
    Image($0.image)
      .rotationEffect(angle(for: $0))
      .offset(x: sin(angle) * radius, y: cos(angle) * radius)
  }
}

WHAT HAPPENS INTERNALLY? SwiftUI Layout Pass

SwiftUI's layout engine performs a two-pass process: 1. **Preference Pass (Size Proposal):** Parents propose sizes to children, and children return their preferred sizes. This moves up the hierarchy. 2. **Layout Pass (Placement):** Parents tell children their final size and position, moving down the hierarchy. The `Layout` protocol hooks directly into this process.

Parent View (e.g., VStack)

Custom Layout (e.g., RadialLayout)

Another View

1. Parent proposes size

A parent view (or the top-level view) proposes a size to its children.

2. Child responds (sizeThatFits)

The custom `Layout`'s `sizeThatFits` is called to determine its ideal size based on its subviews and the proposal.

3. SwiftUI finalizes frame

SwiftUI determines the final frame for the custom layout based on its preferred size and parent's constraints.

4. Child places subviews (placeSubviews)

The custom `Layout`'s `placeSubviews` is called to position its child views within its allocated `bounds`.

Visualized execution hierarchy.

Powerful Guarantees

Precise Control

You get exact control over the measurement and placement of each subview.

Performance Optimization

Through caching, you can avoid redundant, expensive layout calculations.

Seamless Animation

Animated layout changes are largely handled for free when layout parameters change.

Declarative Design

Maintain SwiftUI's declarative paradigm even with complex layout logic.

REAL PRODUCTION EXAMPLE: Tag Cloud Layout

A news app needs a dynamic tag cloud where tags are arranged in a multi-line, left-aligned, tightly packed layout, but with irregular widths and dynamic line wrapping that respects a maximum width, efficiently reusing space.

Impact / Results

Optimized space usage for varying tag lengths

Natural flow for localized content

Reduced view hierarchy complexity

THE FIX or SOLUTION: Implementing a `FlowLayout` with `Layout` protocol

swift

struct FlowLayout: Layout {
    var spacing: CGFloat

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        var currentX: CGFloat = 0
        var currentY: CGFloat = 0
        var lineHeight: CGFloat = 0
        var maxWidth: CGFloat = 0

        for subview in subviews {
            let subviewSize = subview.sizeThatFits(.unspecified)
            if currentX + subviewSize.width > proposal.width ?? .infinity {
                // New line
                currentX = 0
                currentY += lineHeight + spacing
                lineHeight = 0
            }
            currentX += subviewSize.width + spacing
            lineHeight = max(lineHeight, subviewSize.height)
            maxWidth = max(maxWidth, currentX)
        }
        return CGSize(width: maxWidth - spacing, height: currentY + lineHeight)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        var currentX: CGFloat = bounds.minX
        var currentY: CGFloat = bounds.minY
        var lineHeight: CGFloat = 0

        for subview in subviews {
            let subviewSize = subview.sizeThatFits(.unspecified)
            if currentX + subviewSize.width > bounds.maxX {
                // New line
                currentX = bounds.minX
                currentY += lineHeight + spacing
                lineHeight = 0
            }
            subview.place(at: CGPoint(x: currentX, y: currentY), 
                          anchor: .topLeading, 
                          proposal: .constant(subviewSize))
            currentX += subviewSize.width + spacing
            lineHeight = max(lineHeight, subviewSize.height)
        }
    }
}

INTERVIEW PERSPECTIVE

Common Question

“Explain the role of `sizeThatFits` and `placeSubviews` in SwiftUI's `Layout` protocol.”

Strong Answer

In `Layout` protocol, `sizeThatFits(proposal:subviews:cache:)` is for the *first pass* of SwiftUI's layout system. It determines the ideal size of the custom layout view itself, taking into account the proposed size from its parent and the intrinsic sizes of its subviews. `placeSubviews(in:proposal:subviews:cache:)` is for the *second pass*, where the custom layout receives its final bounding `CGRect` and is responsible for precisely positioning each of its `subviews` within that `bounds`, effectively arranging them visually.

Interviewers Expect you to understand:

Two-pass layout (measurement then placement)
Input proposals and output sizes/positions
Relationship between parent and child layout responsibilities

KEY TAKEAWAY

Embrace the `Layout` protocol for complex, irregular, or performance-critical UI arrangements. It's SwiftUI's declarative gateway to pixel-perfect control over view measurement and placement, enabling truly unique and efficient user interfaces.

Common Interview Questions

When should I use a custom `Layout` instead of existing SwiftUI containers?

You should consider a custom `Layout` when built-in containers (like `VStack`, `HStack`, `ZStack`, `Grid`) cannot achieve your desired arrangement or behavior. This includes complex overlapping designs, irregular grids, radial/circular layouts, or highly dynamic layouts that respond to specific business logic beyond simple stacking or wrapping. If you need pixel-perfect control over subview positioning, `Layout` is the way to go.

What is `ProposedViewSize.unspecified` and when should I use it?

`ProposedViewSize.unspecified` means there's no strong size constraint or preference from the parent. When you query a subview's `sizeThatFits(.unspecified)`, you're asking for its ideal or intrinsic size without any restrictive parent proposal. This is often used to determine the natural size of a view before attempting to fit it into a constrained space.

How do I make my custom layout animate smooth transitions?

SwiftUI's `Layout` protocol inherently supports animation. If you change properties of your custom layout (e.g., `radius` or `angularOffset` in `RadialLayout`) that are backed by `@State`, `@Binding`, `ObservableObject`, or `EnvironmentObject`, and those changes occur within an `withAnimation { ... }` block, SwiftUI will automatically animate the layout transitions for you. For more advanced control, you can implement the optional `animate(graph:in:subviews:cache:)` method.

What is the purpose of the `cache` parameter in `Layout` methods?

The `cache` parameter allows your custom layout to store and reuse expensive layout calculation results between different layout passes. Layout methods can be called frequently (e.g., during animations or device rotation). By computing things like ideal subview sizes or complex geometry calculations once and storing them in your custom `Cache` struct (defined by `makeCache` and `updateCache`), you can significantly improve performance and avoid redundant work.

Can I combine a custom `Layout` with standard SwiftUI views and modifiers?

#SwiftUI#Custom Layouts#Layout Protocol#UI Development#Declarative UI#iOS Development