Las Sizes Classes en Swift UI

Hola AEPI Coders, hoy nos metemos con un tema que genera cierta confusión cuando trabajamos con los diseños en vertical y horizontal en nuestras aplicaciones para IOS, vas a ver que es mas fácil de lo que parece, para ello, tan solo vamos a necesitar la llamada a una variable de entorno o tambien conocida como environment values. Para explicar este concepto para a diseñar una aplicación muy sencilla con Swift UI, la cual cambiará su diseño si el Iphone está en posición vertical u horizontal. Lo primero es crear una aplicación que llamaremos EjemploSizeClasses, usando Swift UI como sistema de diseño.

Para detectar la orientación del dispositivo debemos usar una variable de entorno:

@Environment(\.horizontalSizeClass) var sizeClass

De momento nuestro código quedará de la siguiente manera:

struct ContentView: View {
    // valores de entorno o environmentValues
    @Environment(\.horizontalSizeClass) var sizeClass
}

Esta variable de entorno a la que hemos llamado sizeClass, almacenará la posición del Iphone.

El siguiente paso es crear dos estructuras, una para el diseño horizontal y otra para vertical:

// Diseño vertical
struct compactDesign: View {
   var body: some View {
      ZStack{
         Color.green.edgesIgnoringSafeArea(.all)
         VStack{
            Image("emoji")
               .resizable()
               .frame(width: 130, height: 130, alignment: .center)
               .clipShape(Circle())
            Text("Jesus Jimenez")
               .font(.largeTitle)
               .foregroundColor(.white)
               .bold()
            Text("Calle Gutierre de Cetina")
               .foregroundColor(.white)
               .font(.subheadline)
               .italic()
         }
      }
   }
}

// Diseño horizontal
struct regularDesign: View {
   var body: some View {
      ZStack{
         Color.blue.edgesIgnoringSafeArea(.all)
         HStack{
            Image("emoji")
               .resizable()
               .frame(width: 130, height: 130, alignment: .center)
               .clipShape(Circle())
            VStack(alignment: .leading, spacing: 10) {
               Text("Jesus Jimenez")
                  .font(.largeTitle)
                  .foregroundColor(.white)
                  .bold()
               Text("Calle Gutierre de Cetina")
                  .foregroundColor(.white)
                  .font(.subheadline)
                  .italic()
            }
         }
      }
   }
}

Una vez tenemos las estructuras definidas, tan solo nos queda hacer uso de la variable sizeClass desde la estructura principal ContentView, determinando cual es la orientación del Iphone y aplicando el diseño correspondiente:

struct ContentView: View {
    
    // valores de entorno o environmentValues
    @Environment(\.horizontalSizeClass) var sizeClass
    
    var body: some View {
        if sizeClass == .compact {
            compactDesign()
        } else {
            regularDesign()
        }
    }
}

Si ahora corremos la aplicación en u emulador, por ejemplo Iphone 13 Pro Max, veremos cómo nos cambia el diseño si giramos el telefono.

Si te ha gustado comparte!!

Jesús Jiménez