Las Sizes Classes en Swift UI
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