Las Sizes Classes en Swift UI

logo swiftui

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

  • Share:

Deja un comentario

Your email address will not be published.

    Enviar un mensaje




    Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

    ACEPTAR
    Aviso de cookies
    Call Now Button