Uso de Geometry Reader para Interfaces Responsivas

Curso de SwiftUI: Porteo y Ciclo de Vida de Aplicaciones

Contenido del curso

Introducción

1
Desarrollo de Apps para iPadOS con Subi UI y SWIFT
00:57 min

Proceso de porteo de una app iOS a iPadOS

Proceso de mejora como desarrollador de apps con SwiftUI

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:13

Uso de Geometry Reader para Interfaces Responsivas

Curso de SwiftUI: Porteo y Ciclo de Vida de Aplicaciones

Clase 6 de 11

Clase 6 / 11

Recursos

Cuando diseñas interfaces en SwiftUI, no siempre sabes en qué tamaño de pantalla se ejecutará tu app. Para resolver esto existe un contenedor especial llamado GeometryReader, que permite leer las dimensiones del elemento padre y usar esas medidas como referencia para dimensionar las vistas hijas. A continuación se explica paso a paso cómo implementarlo y cuándo conviene usarlo.

¿Cómo preparar el VStack antes de usar GeometryReader?

Antes de incorporar el GeometryReader, es necesario que el contenedor VStack ocupe todo el espacio disponible. Para lograrlo se aplica el modificador frame con valores máximos en ancho y alto [00:52]:

swift VStack { // contenido } .frame(maxWidth: .infinity, maxHeight: .infinity)

maxWidth: .infinity indica que el stack se expandirá horizontalmente hasta el límite de su contenedor.
maxHeight: .infinity hace lo mismo en sentido vertical.

Con esto, las líneas azules del preview confirman que el VStack abarca toda la pantalla.

¿Qué es GeometryReader y cómo se implementa?

GeometryReader es un contenedor que recibe un parámetro —comúnmente llamado geometry— con la información de tamaño (size) del espacio que ocupa [01:42]. Su sintaxis básica es:

swift GeometryReader { geometry in VStack { // vistas internas } }

El objeto geometry expone la propiedad size, que a su vez contiene width (ancho) y height (alto) del contenedor. Gracias a esto puedes dimensionar cualquier vista hija de forma relativa en lugar de absoluta.

¿Cómo usar geometry.size para dimensionar una imagen?

Partiendo de una imagen con tamaño fijo de 100×100 puntos [02:28]:

swift Image("Plazy") .resizable() .aspectRatio(contentMode: .fit) .frame(width: 100, height: 100)

Se puede reemplazar el valor fijo por una fracción del contenedor [03:10]:

swift Image("Plazy") .resizable() .aspectRatio(contentMode: .fit) .frame( width: geometry.size.width / 2, height: geometry.size.height / 3 )

geometry.size.width / 2: la imagen ocupa la mitad del ancho disponible.
geometry.size.height / 3: la imagen ocupa un tercio del alto disponible.

De esta forma, el frame depende de la geometría del contenedor y no de puntos absolutos.

¿Cuándo conviene usar GeometryReader en lugar del sistema de puntos?

El sistema de puntos sigue siendo la opción más sencilla y directa para la mayoría de los casos. GeometryReader resulta útil cuando:

No sabes en qué tipo de pantalla se mostrará la interfaz.
Necesitas que una vista siempre ocupe un porcentaje exacto de su contenedor.
Realizas operaciones matemáticas internas —divisiones, multiplicaciones— sobre las dimensiones reales del layout [04:10].

Sin embargo, puede añadir complejidad innecesaria si solo requieres tamaños fijos. La recomendación es reservarlo para escenarios donde debas basarte explícitamente en el tamaño del contenedor [04:42].

¿Qué viene después de dominar GeometryReader?

Una vez que comprendes cómo adaptar vistas al contenedor con GeometryReader, el siguiente paso natural es aprender a modificar código dependiendo del dispositivo específico, por ejemplo, distinguir entre un iPhone y un iPad [05:00]. Esto complementa la estrategia de interfaces adaptativas que comenzaste con GeometryReader.

Si ya probaste dividir y multiplicar las dimensiones del contenedor, comparte en los comentarios qué proporción te funcionó mejor para tu diseño.

Introducción

Desarrollo de Apps para iPadOS con Subi UI y SWIFT

Proceso de porteo de una app iOS a iPadOS

Adaptación de Aplicaciones iOS a iPadOS con SwiftUI

Sistema de Puntos vs. Píxeles en Desarrollo iOS

Adaptación de Assets en iOS para Diferentes Resoluciones

Modificadores de Offset y Position en SwiftUI

Uso de Geometry Reader para Interfaces Responsivas

Adaptación de vistas según dispositivo en Xcode y SwiftUI

Proceso de mejora como desarrollador de apps con SwiftUI

Ciclo de Vida de Aplicaciones Móviles en SwiftUI

Ciclo de Vida de una Aplicación en SwiftUI: Estados y Manejo

Ciclo de Vida de Vistas en SwiftUI: onAppear, onChange y onDisappear

Recomendaciones para Desarrolladores iOS: UIKit y SwiftUI

Uso de Geometry Reader para Interfaces Responsivas

Progreso del curso

Introducción

Proceso de porteo de una app iOS a iPadOS

Proceso de mejora como desarrollador de apps con SwiftUI

Recursos

Recursos