SwiftUI Academy · Lektion

Das Layout-Protokoll

Implementieren Sie sizeThatFits und placeSubviews.

Das Layout-Protokoll ist eine kostenlose SwiftUI Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des SwiftUI Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der SwiftUI Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Beyond Stacks

When stacks and grids are not enough, the Layout protocol lets you write your own container that positions children exactly how you want. 🧩

Two Required Methods

Conform to Layout by implementing sizeThatFits and placeSubviews, the two steps every custom layout needs.

struct MyLayout: Layout {
    func sizeThatFits(...) -> CGSize { ... }
    func placeSubviews(...) { ... }
}

Sizing Yourself

In sizeThatFits, you measure the children and return the total size your container wants to occupy.

func sizeThatFits(proposal: ProposedViewSize,
    subviews: Subviews,
    cache: inout ()) -> CGSize {
    CGSize(width: 200, height: 100)
}

The Proposal

The ProposedViewSize is the space the parent offers. You decide how to use or shrink within it.

let width = proposal.width ?? 0

The Subviews Proxy

The subviews argument is a collection of proxies. Ask each one for its preferred size before placing it.

for view in subviews {
    let size = view.sizeThatFits(.unspecified)
}

Placing Children

In placeSubviews, you loop and call place on each subview with an exact point and an anchor.

func placeSubviews(in bounds: CGRect,
    proposal: ProposedViewSize,
    subviews: Subviews,
    cache: inout ()) {
}

The place Call

Each place call sets the origin, the anchor point, and the size proposal for that one child.

view.place(at: point,
           anchor: .topLeading,
           proposal: .unspecified)

Walk a Cursor

A simple layout keeps an x cursor, placing each child then advancing by its width plus spacing.

var x = bounds.minX
for view in subviews {
    let s = view.sizeThatFits(.unspecified)
    view.place(at: CGPoint(x: x, y: bounds.minY),
               proposal: .unspecified)
    x += s.width
}

Using Your Layout

A Layout type is used just like a stack: wrap your views in it and they get arranged by your code.

MyLayout {
    Text("One")
    Text("Two")
}

Optional Cache

The cache parameter lets you store expensive measurements between passes; use Void when you do not need it.

It Is Value-Based

Because a Layout is a struct, SwiftUI can re-run it cheaply, keeping custom containers fast and predictable. ⚡

Quick Check

Recall the two methods every Layout must implement.

Recap

You can now build a custom container with the Layout protocol by measuring in sizeThatFits and positioning in placeSubviews. 🎉

Häufig gestellte Fragen

Ist die Lektion „Das Layout-Protokoll“ kostenlos?

Ja — der vollständige Text von „Das Layout-Protokoll“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des SwiftUI Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der SwiftUI Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Das Layout-Protokoll“?

Implementieren Sie sizeThatFits und placeSubviews. Du übst SwiftUI Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um SwiftUI Academy zu starten?

Keine Vorkenntnisse erforderlich. SwiftUI Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Das Layout-Protokoll“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser SwiftUI Academy-Lektion Code schreiben und ausführen?

Ja. Jede SwiftUI Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu SwiftUI Academy