UIStackView en UIKit con Swift en Español - Curso iOS
Un UIStackView en UIKit sirve para agrupar vistas una al lado de la otra, o una debajo de la otra con el mínimo esfuerzo. Esto significa que nosotros no nos encargamos de añadir las constraints de Auto Layout, sino que lo hace el UIStackView por nosotros.
Hoy en SwiftBeta vamos a crear nuestro primer UIStackView. Los UIStackViews nos sirven para colocar una colección de vistas una encima de otra, o una al lado de la otra, depende de como configuremos nuestro StackView, si horizontal o vertical. Vamos a ver estas dos configuraciones en el post de hoy. Al usar un UIStackView nos ahorramos crear las constraints de sus subvistas, ya que el StackView lo hace por nosotros. Es decir, si queremos apilar una serie de vistas, el UIStackView lo hace por nosotros. Como ejemplo práctico vamos a crear una vista que va a simular una pantalla de In App Purchases, donde un user podrá seleccionar el precio de la In App Purchase que quiere consumir dentro de nuestra app.
Creamos el proyecto en Xcode
Lo primero de todo que vamos hacer es crear el proyecto en Xcode. Recurda seleccionar como interfaz Storyboard (UIKit). Y una vez creado el proyecto nos vamos al ViewController. Allí dentro vamos a crear nuestro primer UIStackView.
Hemos creado nuestro UIStackView, lo hemos añadido a la vista del ViewController y hemos añadido las constraints. Ahora mismo las vistas de nuestro StackView están vacías. Lo que vamos hacer es crear varios UIButton y los vamos a añadir a las arrangedSubviews del StackView.
Ahora si compilamos, vamos a ver el resultado de nuestro StackView con los UIButtons que hemos añadido.
En el simulador aparece que nuestro StackView ha distribuido las vistas una al lado de la otra, pero podemos especificar el eje vertical o horizontal. En este caso, por defecto es el eje horizontal, vamos a cambiar esta propiedad en nuestro StackView.
Si te fijas, ahora en lugar de añadir un UIButton uno al lado del otro, lo que ha hecho ha sido poner uno encima del otro. Pero, aún podemos configurar más parámetros de nuestro UIStackView, como por ejemplo el margen que queremos entre las vistas que hay dentro del StackView. Para ello, vamos a modificar un propiedad llamada spacing del UIStackView.
Vamos a compilar y vamos a ver el resultado
Poco a poco ya va cogiendo forma nuestro UIStackView. Puedes jugar con más propiedades dentro del StackView, como por ejemplo el alignment o la distribución. Vamos a ver la primera, si añadimos un alignment de leading, center o trailing podemos ver como cambiar el tamaño de nuestros UIButtons dentro del StackView:
Vamos a compilar nuestra aplicación para ver el resultado:
Vamos a borrar el alignment, y vamos a continuar. Lo que vamos hacer ahora es añadir un UILabel. Este UILabel será el título de nuestra pantall:
Si compilamos la aplicación este sería el resultado:
Justo lo que queríamos!
Conclusión
Hoy hemos aprendido a crear un UIStackView y hemos visto lo fácil que es añadir subvistas dentro de él. Es fácil y simple, nos ahorramos añadir constraints para posicionar todas las subvistas.
UIKit es el framework de UI que usamos para crear las pantallas de nuestras app. Con la llegada de SwiftUI, poco a poco hay más apps que están migrando a esta tecnologia, pero aún así saber UIKit es indispensable en una empresa que aún trabaje con UIKit
Aprende a usar childViewControllers en tu app iOS. A medida que creamos una app podemos extraer responsabilidades en ViewControllers. De esta manera simplificamos mucho nuestro código y lo podemos reutilizar en múltiples partes de nuestra app.