SwiftUI Academy · Lección

El protocolo Layout

Implemente sizeThatFits y placeSubviews.

El protocolo Layout es una lección gratuita de SwiftUI Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de SwiftUI Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de SwiftUI Academy incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

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. 🎉

Preguntas frecuentes

¿La lección «El protocolo Layout» es gratis?

Sí — el texto completo de «El protocolo Layout» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de SwiftUI Academy, actualiza a CoddyKit PRO. El curso de SwiftUI Academy incluye 4 lecciones en total.

¿Qué aprenderé en «El protocolo Layout»?

Implemente sizeThatFits y placeSubviews. Practicas SwiftUI Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar SwiftUI Academy?

No se requiere experiencia previa. SwiftUI Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «El protocolo Layout»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de SwiftUI Academy?

Sí. Cada lección de SwiftUI Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a SwiftUI Academy