Guías de alineación personalizadas
Alinee las vistas con precisión en toda la jerarquía.
Guías de alineación personalizadas es una lección gratuita de SwiftUI 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 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.
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. 🎉
Aprende Swift con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 30
- Lecciones
- 120
Preguntas frecuentes
¿La lección «Guías de alineación personalizadas» es gratis?
Sí — el texto completo de «Guías de alineación personalizadas» 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 «Guías de alineación personalizadas»?
Alinee las vistas con precisión en toda la jerarquía. 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 2 de 4.
¿Cuánto tiempo toma la lección «Guías de alineación personalizadas»?
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
- Fundamentos de GeometryReader
- Guías de alineación personalizadas
- El protocolo Layout
- Crear un Flow Layout