SwiftUI Academy · Lektion

Benutzerdefinierte Alignment Guides

Richten Sie Ansichten in der Hierarchie präzise aus.

Benutzerdefinierte Alignment Guides ist eine kostenlose SwiftUI Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Lining Things Up

Stacks align children using a shared edge or center. Alignment guides let you fine-tune exactly where that line falls. 📏

Built-in Alignments

An HStack takes a vertical alignment like .top or .center, while a VStack takes a horizontal one.

HStack(alignment: .top) {
    Text("A")
    Text("Big")
}

The alignmentGuide Modifier

The alignmentGuide modifier overrides where a single view exposes a given alignment to its parent.

Text("Hi")
    .alignmentGuide(.top) { d in d[.bottom] }

Reading Dimensions

The closure gets a ViewDimensions value, letting you read d.width, d.height, or any named guide.

Text("Hi").alignmentGuide(.leading) { d in
    d.width / 2
}

Shift the Guide

Returning a different number moves the view relative to its peers, since the parent lines up everyone on that returned value.

Custom Alignment ID

For reuse, define a type conforming to AlignmentID with a defaultValue for unaligned cases.

struct MidBadge: AlignmentID {
    static func defaultValue(in d: ViewDimensions) -> CGFloat {
        d[.bottom]
    }
}

Name It on Alignment

Extend VerticalAlignment or HorizontalAlignment with a static property bound to your AlignmentID.

extension VerticalAlignment {
    static let midBadge = VerticalAlignment(MidBadge.self)
}

Use the Custom Line

Pass your named alignment to a stack, then tag the views that should snap to that custom line.

HStack(alignment: .midBadge) {
    Avatar()
    Label()
}

Tag the Participants

Each view that should share the line sets alignmentGuide for your custom alignment to the point it wants to match.

Label()
    .alignmentGuide(.midBadge) { d in
        d[VerticalAlignment.center]
    }

Cross-Hierarchy Power

Custom guides shine when views live in different containers but must still align, like a caption to an icon center across columns. ✨

Mind the Default

Any view that does not set your custom guide falls back to its defaultValue, so pick that default thoughtfully.

Quick Check

Recall what the alignmentGuide closure receives.

Recap

You can now override alignment with alignmentGuide and define custom AlignmentID types to align views across the hierarchy. 🎉

Häufig gestellte Fragen

Ist die Lektion „Benutzerdefinierte Alignment Guides“ kostenlos?

Ja — der vollständige Text von „Benutzerdefinierte Alignment Guides“ 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 „Benutzerdefinierte Alignment Guides“?

Richten Sie Ansichten in der Hierarchie präzise aus. 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 2 von 4.

Wie lange dauert die Lektion „Benutzerdefinierte Alignment Guides“?

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