SwiftUI Academy · Les

Het Layout-protocol

Implementeer sizeThatFits en placeSubviews.

Les 3 van 413 stappen

Het Layout-protocol is een gratis SwiftUI Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject SwiftUI Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus SwiftUI Academy bevat in totaal 4 lessen.

Verder dan stacks

Wanneer stacks en rasters niet volstaan, kunt u met het protocol Layout uw eigen container schrijven die onderliggende weergaven precies positioneert zoals u wilt. 🧩

Twee verplichte methoden

Voldoe aan Layout door sizeThatFits en placeSubviews te implementeren: de twee stappen die elke aangepaste indeling nodig heeft.

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

Uw eigen grootte bepalen

In sizeThatFits meet u de onderliggende weergaven en geeft u de totale grootte terug die uw container wil innemen.

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

Het voorstel

De ProposedViewSize is de ruimte die de bovenliggende weergave aanbiedt. U bepaalt hoe u die gebruikt of de inhoud daarin verkleint.

let width = proposal.width ?? 0

De subviews-proxy

Het argument subviews is een verzameling proxy's. Vraag elke proxy om de voorkeursgrootte voordat u de weergave positioneert.

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

Onderliggende weergaven positioneren

In placeSubviews doorloopt u de verzameling en roept u voor elke subview place aan met een exact punt en een anker.

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

De aanroep place

Elke aanroep van place stelt de oorsprong, het ankerpunt en het groottevoorstel voor die ene onderliggende weergave in.

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

Een cursor bijhouden

Een eenvoudige indeling houdt een x-cursor bij, plaatst elke onderliggende weergave en verhoogt de cursor daarna met de breedte plus de tussenruimte.

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
}

Uw indeling gebruiken

Een type Layout gebruikt u net als een stack: wikkel uw weergaven erin en ze worden volgens uw code gerangschikt.

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

Optionele cache

Met de parameter cache kunt u dure metingen tussen doorgangen opslaan. Gebruik Void wanneer u geen cache nodig hebt.

Het is gebaseerd op waarden

Omdat een Layout een struct is, kan SwiftUI deze goedkoop opnieuw uitvoeren, waardoor aangepaste containers snel en voorspelbaar blijven. ⚡

Korte controle

Haal u de twee methoden voor de geest die elke Layout moet implementeren.

Beantwoord dit in de interactieve les

Samenvatting

U kunt nu een aangepaste container bouwen met het protocol Layout: meten in sizeThatFits en positioneren in placeSubviews. 🎉

Gratis beginnen

Leer Swift met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 30
Lessen: 120

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Het Layout-protocol” gratis?

Ja — de volledige tekst van “Het Layout-protocol” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus SwiftUI Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus SwiftUI Academy bevat in totaal 4 lessen.

Wat leer ik in “Het Layout-protocol”?

Implementeer sizeThatFits en placeSubviews. Je oefent met SwiftUI Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met SwiftUI Academy te beginnen?

Ervaring vooraf is niet nodig. SwiftUI Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Het Layout-protocol”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over SwiftUI Academy?

Ja. Elke les over SwiftUI Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar SwiftUI Academy