Creando interfaces de usuarios adaptativas con ViewThatFits

Libranner Santos

09 abril, 20253min de lectura

Crear aplicaciones que se adapten a diferentes dispositivos es uno de nuestros objetivos principales. Dentro del ecosistema Apple, utilizando SwiftUI, podemos desarrollar aplicaciones que funcionen en varios sistemas operativos y dispositivos. Sin embargo, cada dispositivo trae consigo diferentes configuraciones y capacidades. La habilidad de crear interfaces de usuario adaptativas es esencial. SwiftUI hará todo lo posible por sí solo para ofrecer una experiencia adaptada al dispositivo o sistema operativo de destino. No obstante, podemos emplear herramientas adicionales para mejorar la experiencia del usuario.

Una de estas herramientas es ViewThatFits, una vista que, partiendo de múltiples vistas hijas, selecciona aquella que mejor se adapta al espacio disponible.

Cómo usar ViewThatFits

En el siguiente código, dentro de ViewThatFits, tenemos tres vistas Circle. La primera tiene una altura de 200, la segunda de 100 y la tercera de 50.

import SwiftUI

struct AdaptiveView: View {
  var body: some View {
    ViewThatFits {
      Circle()
        .foregroundStyle(.red)
        .frame(height: 200)

      Circle()
        .foregroundStyle(.yellow)
        .frame(height: 100)

      Circle()
        .foregroundStyle(.green)
        .frame(height: 50)
    }
  }
}

Para visualizar esto, utilizaremos un Preview con el trait PreviewTrait.fixedLayout(width:height:), que nos permite asignar un ancho y alto fijo para el contenedor de la vista, en este caso AdaptiveView.

#Preview(traits: .fixedLayout(width: 80, height: 200)) {
  AdaptiveView()
}

Al asignar un ancho de 80, ViewThatFits seleccionará el círculo verde, ya que es el único que puede ajustarse al espacio disponible.

#Preview(traits: .fixedLayout(width: 110, height: 200)) {
  AdaptiveView()
}

Si asignamos un ancho de 110, obtendremos el círculo amarillo, ya que su ancho es de 100.

Finalmente, solo si asignamos un ancho de 200 o más al contenedor, obtendremos el círculo rojo.

#Preview(traits: .fixedLayout(width: 200, height: 200)) {
  AdaptiveView()
}

Cosas a tomar en cuenta

• ViewThatFits evalúa las vistas en el orden en que se indican en el código. Por lo tanto, si tenemos una idea clara de los tamaños que soportaremos, debemos colocar las vistas en el orden adecuado.
• Por defecto, ViewThatFits toma en cuenta ambos ejes, horizontal y vertical. Sin embargo, podemos centrarnos en un solo eje utilizando el constructor ViewThatFits.init(in:content:), especificando el eje deseado en el parámetro in.

Conclusión

Crear interfaces adaptativas es crucial para ofrecer a los usuarios una experiencia excelente. Esto es importante no solo en aplicaciones multiplataforma, sino también en aquellas destinadas a un solo sistema operativo, donde podemos encontrar diferentes tamaños de pantalla.