Swift Academy · Lección

Medición de subvistas

Consulte los tamaños de las subvistas durante el diseño.

Medición de subvistas es una lección gratuita de Swift Academy en CoddyKit. Esta es la lección 2 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 Swift Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Swift Academy incluye 4 lecciones en total.

La medición dirige el layout

Antes de poder colocar los hijos, debe medirlos. El layout de SwiftUI es una negociación: el padre propone tamaños, los hijos responden y usted reconcilia las respuestas.

Preguntar a una subvista por su tamaño

Cada proxy de Subviews responde a sizeThatFits(_:) para una ProposedViewSize determinada. El proxy devuelve el tamaño que tendría ese hijo con esa propuesta.

let size = subview.sizeThatFits(.unspecified)

Las tres propuestas de consulta

Para conocer la flexibilidad de un hijo, consúltelo de tres formas: .zero revela su mínimo, .infinity su máximo y .unspecified su tamaño ideal.

let minSize = subview.sizeThatFits(.zero)
let maxSize = subview.sizeThatFits(.infinity)
let ideal = subview.sizeThatFits(.unspecified)

Proponer un ancho específico

Para texto que debe ajustarse, proponga un ancho concreto y deje la altura en nil. El hijo informa de la altura que necesita con ese ancho.

let proposal = ProposedViewSize(width: 200, height: nil)
let fit = subview.sizeThatFits(proposal)

Prioridad de layout

Cada subvista expone una priority (establecida mediante .layoutPriority). Cuando el espacio es limitado, asigne primero a las vistas secundarias de mayor prioridad su tamaño ideal.

for subview in subviews {
    let p = subview.priority
    // distribute space to higher priority first
}

Lectura de valores personalizados

Las subvistas pueden transportar datos tipados mediante una LayoutValueKey. El layout lee subview[MyKey.self] para influir en la colocación, por ejemplo, en el espaciado de cada elemento.

private struct RankKey: LayoutValueKey {
    static let defaultValue: Int = 0
}
let rank = subviews[0][RankKey.self]

Establecer un valor de layout

Una vista establece su valor de layout con el modificador layoutValue(key:value:), lo que permite que las vistas secundarias comuniquen indicaciones a su layout.

Text("Featured").layoutValue(key: RankKey.self, value: 10)

Espaciado entre subvistas

Las subvistas exponen preferencias de spacing. Use subview.spacing.distance(to:along:) para obtener el espacio recomendado entre dos vistas secundarias adyacentes a lo largo de un eje.

let gap = subviews[0].spacing.distance(
    to: subviews[1].spacing, along: .horizontal)

Acumulación de tamaños

Un layout horizontal suma los anchos de las vistas secundarias y toma la mayor altura. Medir primero todas las vistas secundarias permite calcular el tamaño del contenedor antes de colocar ninguna.

let sizes = subviews.map { $0.sizeThatFits(.unspecified) }
let totalWidth = sizes.reduce(0) { $0 + $1.width }
let maxHeight = sizes.map(\.height).max() ?? 0

Volver a medir durante la colocación

En placeSubviews debe volver a medir (o reutilizar los tamaños almacenados en caché) para que las posiciones coincidan con lo que ha indicado. Las mediciones son llamadas proxy económicas, no renderizados reales.

func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
    for s in subviews {
        let size = s.sizeThatFits(.unspecified)
        // use size to position s
        _ = size
    }
}

Respetar la propuesta del elemento principal

Respete siempre la propuesta que recibe. Si el elemento principal propone un ancho fijo, coloque las vistas secundarias dentro de él; no desborde silenciosamente, ya que el layout se recortará.

let containerWidth = proposal.width ?? .infinity

Comprobación rápida: medición

Compruebe su comprensión de la medición de subvistas.

Resumen: medición de subvistas

La medición es el núcleo de un layout personalizado. Consulte las vistas secundarias con .zero, .infinity y .unspecified para conocer sus tamaños mínimo, máximo e ideal, proponga anchos concretos para el contenido que se ajusta en varias líneas y respete la prioridad de layout y las preferencias de espaciado.

Los valores personalizados de LayoutValueKey permiten que las vistas secundarias transmitan indicaciones. Mida de forma coherente en ambos métodos del protocolo para que el tamaño indicado y la colocación siempre coincidan.

Preguntas frecuentes

¿La lección «Medición de subvistas» es gratis?

Sí — el texto completo de «Medición de subvistas» 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 Swift Academy, actualiza a CoddyKit PRO. El curso de Swift Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Medición de subvistas»?

Consulte los tamaños de las subvistas durante el diseño. Practicas Swift 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 Swift Academy?

No se requiere experiencia previa. Swift 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 2 de 4.

¿Cuánto tiempo toma la lección «Medición de subvistas»?

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 Swift Academy?

Sí. Cada lección de Swift 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 Swift Academy