Desarrollo de iOS con Swift 2 - Diseños automáticos
Cuando creamos aplicaciones de iOS y agregamos elementos de interfaz de usuario en esa aplicación, pueden parecer perfectas en un dispositivo. Sin embargo, ahora deberíamos probar la misma aplicación en algún otro dispositivo. Sin duda, veremos cambios drásticos en la interfaz de usuario y es posible que algunos elementos no aparezcan también.
El diseño automático es la técnica que usaremos para resolver este problema. En este capítulo, entenderemos cómo hacer el diseño automático, aplicar restricciones y la vista de pila para que su aplicación se vea perfecta y mejor en cada dispositivo.
Comenzaremos creando una nueva aplicación de vista única.
Agregar elementos
Agregue una etiqueta en la parte superior central de la vista y otra en la parte inferior derecha de la vista, como se muestra a continuación:
Ahora, intenta cambiar la orientación y veremos que no aparece la parte inferior derecha, mientras que el Centro no está en el centro.
(Tip - No es necesario ejecutar el simulador para ver los diseños, simplemente haga clic en Ver como - iPhone x, en la parte inferior de la pantalla como se muestra en la siguiente captura de pantalla).
Seleccione la versión de iPhone y la orientación. Veremos que los elementos de la UI no están ordenados correctamente. Por lo tanto, cuando cambiemos nuestra orientación, dispositivo o ambos, la etiqueta inferior derecha desaparecerá y el centro no estará en el centro.
Esto sucede porque no hemos especificado la posición fija de los elementos. Para resolver esto, usaremos Restricciones.
Aplicar restricciones a los elementos de la interfaz de usuario
Haga clic en la etiqueta central, presione el control y arrastre a cualquier lugar dentro de la vista, suelte. Ahora debes estar viendo ...
Seleccione Center Horizontally in Container. Nuevamente, repita el paso anterior y elija Espaciado vertical a la guía de diseño superior.
Ahora, haga clic en el botón Agregar nueva restricción y seleccione la altura y el ancho, y haga clic en Agregar 2 restricciones.
Haga clic en la etiqueta de la parte inferior derecha, arrastre el control desde la etiqueta a cualquier lugar dentro de la vista y elija "Espacio final al margen del contenedor". Del mismo modo, elija Espaciado vertical a Guía de diseño inferior.
(Tip- Para seleccionar varias opciones a la vez, presione shift y elija las opciones. Asegúrese de no soltar turno hasta que haya seleccionado todo).
Después de aplicar todas las restricciones, la vista debería verse de la siguiente manera:
Vista de pila
La vista de pila funciona organizando los elementos en pilas. Después de organizar, definimos las restricciones solo una vez y todos los elementos se organizan en consecuencia. Para comenzar con la vista de pila, cree la siguiente vista, que no se verá mejor en otros dispositivos. Sin embargo, lo haremos adecuado para otros dispositivos en esta sección.
Ahora, seleccione los dos botones superiores: seleccione un botón, presione el comando y luego seleccione el segundo. Para incrustarlos en una vista de pila, vaya a editor → incrustar en → vista de pila.
OR
En la esquina inferior derecha, hay una opción 
Seleccione esta opción y esto incrustará las vistas en la vista de pila.
Vista de pila horizontal
La Vista de pila horizontal se vería como se muestra en la siguiente captura de pantalla.
Mientras esta vista de pila está seleccionada, vaya al inspector de atributos. Cambie la distribución para llenar por igual y el espaciado a 10.
Ahora, seleccione esta vista de pila y el botón inferior e incruste nuevamente en la vista de pila. Esta vez, el eje de la vista de pila será vertical, mientras que en la vista de pila anterior era horizontal.
Vistas de pila vertical
Ahora tu vista se verá así:
Mientras esta vista de pila está seleccionada, vaya a su inspector de atributos y asegúrese de que coincida con la captura de pantalla a continuación.
Ahora, su vista debería verse de la siguiente manera:
El último paso es establecer restricciones para esta vista de pila.
Seleccione la vista de pila → Haga clic en el botón Agregar nueva restricción.
Esto abrirá una nueva ventana en la que tendremos que seguir los pasos que se muestran en la siguiente captura de pantalla.
Agregar restricciones a la vista de pila
La siguiente captura de pantalla describirá cómo agregar restricciones a una vista de pila.
Eso es todo lo que haremos con los diseños automáticos. En el próximo capítulo, discutiremos sobre animaciones.
Eso es todo lo que haremos con los diseños automáticos. En el próximo capítulo, discutiremos sobre animaciones.