Diseño de una aplicación usando componentes del UIKit para Storyboards

Yo decidi hacer un layout en plan reproductor de musica 😄

Estoy haciendo este curso con storyboards para MacOS, usando Xcode 14.2 y Mac Ventura 13.2.

El background de la view no puede cambiarse y los bordes del botón tampoco, lo dejo cómo apunte por si alguien hace lo mismo que yo, antes de que pase media hora buscándolo.

El Stack View tiene un parecido a Flexbox de CSS en la forma de distribuir los elementos en un contenedor

Tal vez sea importante mencionar que la forma de añadir esa reglas para que se ajusten los elementos al tamaño del dispositivo, se llama AutoLayout, y que es definido como:

“Un sistema de diseño basado en restricciones (constraints), para construir interfaces de usuario de tamaño dinámico. Permite crear diseños de interfaz de usuario que se adaptan dinámicamente a todos los tamaños de pantalla sin necesidad de configurar manualmente el marco de cada vista.”

Definición de Kodeco (Raywenderlich)

Distribuciones de un StackView en UIKit

En UIKit, el StackView es un contenedor flexible que se utiliza para organizar y gestionar la disposición de múltiples vistas. Una de las características clave del StackView es su capacidad para distribuir las vistas contenidas dentro de él de diferentes maneras. A continuación, se presentan las cinco distribuciones disponibles:

1. Fill

La distribución Fill permite que las vistas dentro del StackView se expandan y llenen todo el espacio disponible horizontal o verticalmente, dependiendo de la dirección del StackView.

2. Fill Equally

La distribución Fill Equally distribuye el espacio disponible de manera uniforme entre todas las vistas contenidas en el StackView. Esto significa que todas las vistas tendrán el mismo ancho o alto, dependiendo de la dirección del StackView.

3. Fill Proportionally

La distribución Fill Proportionally asigna el espacio disponible a las vistas proporcionando un tamaño relativo basado en sus pesos. Puedes asignar un peso a cada vista, y el StackView ajustará su tamaño proporcionalmente de acuerdo con los pesos asignados.

4. Equal Spacing

La distribución Equal Spacing distribuye el espacio disponible entre las vistas de manera uniforme, pero no ajusta el tamaño de las vistas. Esto significa que todas las vistas mantendrán su tamaño original, pero el espacio entre ellas será igual.

5. Equal Centering

La distribución Equal Centering distribuye el espacio disponible entre las vistas de manera que el espacio entre cada par de vistas sea igual. Esto es útil cuando se desea que las vistas estén centradas horizontal o verticalmente dentro del StackView.

Estas son las cinco distribuciones disponibles en UIKit para un StackView. Cada una tiene sus propias características y se puede elegir según las necesidades de diseño de tu aplicación.

¡Espero que esta información sea útil! Si tienes alguna otra pregunta, no dudes en preguntar.

Antes de ir a la siguiente clase, primero deben hacer esta y ya despues la que sigue,