Muchas gracias por leer mi artículo espero que lo disfrutes y sobretodo que puedas rescatar ideas y así ayudarte en tu aprendizaje.
SwiftUI
Es un framework creado con el lenguaje oficial de Apple, Swift. Una de las grandes ventajas es que nos permite desarrollar aplicaciones de forma mucho más rápida en comparación con UIKit y sobretodo se tardarán mucho menos en compilar debido a que utilizan menos código que una aplicación creada con UIKit. Otro punto a mencionar (considero importante), SwiftUI es el futuro del desarrollo móvil para el ecosistema de Apple y su contraparte será descontinuado.
El concepto más importante que debemos comprender de SwiftUI es que todo lo que veremos en pantalla será una vista o View, a cada View podemos asignarles modificadores, el cual son denomiandos ViewModifier, estos permiten personalizar nuestras vistas y conseguir el diseño que buscamos.
Explicando con ejemplo
Actualmente estoy tomando un tutorial sobre SwiftUI en donde estoy creando una aplicación y estoy utilizando pilas o stacks, el cual nos permiten renderizar nuestras vistas dentro de la App.
Stacks (Pilas)
- VStack -> Permite renderizar Views de forma Vertical
VStack {
// View
Text("🎯🎯🎯\nPUT THE BULLSEYE AS CLOSE AS YOU CAN TO")
// ViewModifier
.bold()
.kerning(2.0)
.multilineTextAlignment(.center)
.lineSpacing(4.0)
.font(.footnote)
Text("89")
.kerning(-1.0)
.font(.largeTitle)
.fontWeight(.black)
- HStack -> Cumple la misma función que un VStack pero de forma Horizontal
HStack {
Text("1")
.font(.callout)
.bold()
Slider(value: .constant(50.0), in: 1.0...100.0)
Text("100")
.font(.callout)
.bold()
}
- ZStack -> No lo e utilizado mucho, sólo para aplicar color al fondo de la pantalla de la app, pero no lo e utilizado con otros fines al mencionado.
De todas formas se vendrá un artículo hablando sobre los Stack en SwiftUI.
La gran ventaja de usar Stack es poder combinarlo entre sí y sacar mayor provecho en la creación de interfaces, dejo el código completo utilizado:
VStack {
Text("🎯🎯🎯\nPUT THE BULLSEYE AS CLOSE AS YOU CAN TO")
.bold()
.kerning(2.0)
.multilineTextAlignment(.center)
.lineSpacing(4.0)
.font(.footnote)
Text("89")
.kerning(-1.0)
.font(.largeTitle)
.fontWeight(.black)
HStack {
Text("1")
.font(.callout)
.bold()
Slider(value: .constant(50.0), in: 1.0...100.0)
Text("100")
.font(.callout)
.bold()
}
Button(action: {
print("Click the button")
}, label: {
Text("Click Me!")
.frame(width: 100, height: 46)
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
})
}
.padding(.all)
Como luce la pantalla con el código anterior:
Me despido, espero que haya sido bastante útil este artículo y sobretodo puedas sacar algo positivo. 😇
Top comments (0)