iOS desde cero con Swift: Conceptos básicos de diseño automático

En el artículo anterior, creamos una aplicación simple con nada más que una etiqueta y un botón. A pesar de su simplicidad, la aplicación tenía algunos problemas de diseño. En este tutorial, aprenderás a resolver esos problemas utilizando el sistema de diseño de Apple, Auto Layout. Comencemos con un nuevo proyecto.

Introducción

Abre Xcode y crea un nuevo proyecto, eligiendo la plantilla de Aplicación de Vista Única. Asigna un nombre a la aplicación Auto Layout y configura los Dispositivos en Universal. Dile a Xcode dónde guardar el proyecto y haz clic en Crear.

Recuerda que anteriormente en esta serie, una aplicación universal se ejecuta en iPad y en iPhone (y en iPod Touch). Esto significa que la interfaz de usuario debe adaptarse al dispositivo en el que se está ejecutando. Exploremos cómo funciona eso y qué problemas debemos resolver para lograrlo.

En el proyecto, abre Main.storyboard y agrega cinco etiquetas a la vista del controlador de vista. Como puedes ver en la captura de pantalla siguiente, coloqué una etiqueta en el centro de la vista y una en cada una de sus esquinas.

Probablemente hayas notado que Xcode intenta ayudarte a colocar las etiquetas, mostrando líneas azules discontinuas cuando te acercas a los bordes o al centro de la vista. Sigue los consejos de Xcode y haz que las etiquetas se ajusten en los bordes y en el centro de la vista.

Debido a que estamos creando una aplicación universal, la aplicación debería verse bien tanto en iPad como en iPhone. Ejecuta la aplicación en el simulador y elige iPad Retina (o cualquier otro simulador de iPad) como destino.

Ouch. La interfaz de usuario no se ve muy bien en iPad. Solo la etiqueta superior izquierda se coloca correctamente.

Cambia el destino a iPhone 6 (o cualquier otro simulador de iPhone) y ejecuta la aplicación una vez más.

La interfaz de usuario se ve aún peor en iPhone. Dos etiquetas ni siquiera son visibles en el iPhone. Al igual que en el iPad, solo la etiqueta superior izquierda se coloca correctamente.

El objetivo de este tutorial es solucionar estos problemas de la interfaz de usuario con Auto Layout. Antes de que podamos aplicar el diseño automático, necesitamos saber qué es y cómo puede ayudarnos.

¿Qué es el diseño automático o Auto Layout?

Auto Layout se introdujo en iOS con el lanzamiento de iOS 5, hace varios años. El diseño automático es un sistema de diseño que es descriptivo y se basa en restricciones. Esto simplemente significa que le dice al motor de diseño cómo desea que se configure la interfaz de usuario. En otras palabras, en lugar de decirle al motor de diseño que un botón necesita colocarse en una ubicación específica, describe dónde debe colocarse.

Las restricciones se utilizan para definir o describir un diseño. Por ejemplo, le dice al motor de diseño que un botón debe estar centrado horizontalmente en su vista contenedora. El motor de diseño toma un conjunto de restricciones, las transforma en ecuaciones y establece los marcos de los elementos en la interfaz de usuario. Para que esto funcione, debes agregar tantas restricciones para evitar cualquier ambigüedad sobre la posición de un elemento.

La ventaja del Auto Layout es que es simple. Gracias a la naturaleza descriptiva del Auto Layout, el motor de diseño actualiza la interfaz de usuario, independientemente de las dimensiones o la orientación del dispositivo en el que se ejecuta la aplicación. También hace que tu aplicación sea a prueba de futuro. Cuando Apple introduce un dispositivo con un nuevo tamaño de pantalla, tu aplicación ajustará automáticamente su interfaz de usuario para adaptarse al nuevo tamaño de pantalla. Esto no es cierto si codificas la interfaz de usuario de tu aplicación.

Ahora que ya sabes qué es Auto Layout y cómo funciona, es hora de explorar cómo podemos aplicar el Auto Layout para solucionar los problemas de diseño en nuestro proyecto.

Agregar restricciones

¿Recuerdas las pautas azules que viste cuando añadiste las etiquetas a la vista del controlador de vista? Esas no son las restricciones que estás buscando. Como dije, son pautas para ayudarte a ubicar los elementos de la interfaz de usuario. No son más que pistas. Xcode te permite apegarte a las Pautas de interfaz humana de Apple.

Hay varias maneras de agregar restricciones a un elemento de interfaz de usuario. Una forma es usar el menú Pin en la parte inferior de Interface Builder. Selecciona la etiqueta en la esquina superior izquierda y haz clic en el menú Pin en la parte inferior.

La etiqueta en la parte superior izquierda todavía no tiene restricciones. Vamos a cambiar eso al fijar la etiqueta en la parte superior izquierda de su vista principal o supervista. Usando el menú Pin, podemos agregar múltiples restricciones al mismo tiempo. Agreguemos también restricciones para establecer el ancho y alto de la etiqueta para que sean fijos marcando las casillas de verificación etiquetadas Anchura y Altura. Este es el aspecto que debería tener el menú Pin. Tenga en cuenta que la casilla de verificación para Restringir los márgenes está desmarcada.

En la parte inferior del menú Pin, el texto del botón ahora dice Agregar 4 restricciones. Xcode nos dice que aún no hemos agregado ninguna restricción. Haz clic en el botón para agregar las restricciones que hemos especificado en el menú Pin. La posición de la etiqueta ahora está definida o descrita por cuatro restricciones. Esto se visualiza en el storyboard por cuatro líneas azules que rodean la etiqueta.

Antes de continuar, agrega restricciones a las etiquetas superior derecha, inferior izquierda e inferior derecha. Es importante que fijes cada etiqueta al borde más cercano de su vista principal. Por ejemplo, la etiqueta inferior derecha debe estar fijada al borde inferior y al borde derecho de la vista del controlador de vista. Este es el aspecto que debería tener el menú Pin para la etiqueta inferior derecha.

Con las restricciones implementadas, ejecuta la aplicación en el simulador. Esto es lo que deberías ver en el simulador de iPhone 6. Eso se ve mucho mejor. La etiqueta central aún no tiene restricciones. Vamos a agregar algo ahora.

Selecciona la etiqueta del centro y agrega dos restricciones para fijar el ancho y alto de la etiqueta, utilizando el menú Pin en la parte inferior. ¿Esperabas ver dos líneas azules? Si has agregado correctamente las restricciones, deberías ver las líneas rojas, no las líneas azules. ¿Porqué pasó eso? Las líneas rojas indican que algo anda mal. Xcode nos dice que la etiqueta no tiene suficientes restricciones para evitar la ambigüedad. La descripción de la posición de la etiqueta actualmente está incompleta.

Le hemos dicho a Xcode que la etiqueta debe tener un ancho fijo y una altura fija. Lo que aún no hemos definido es la posición horizontal y vertical de la etiqueta. Puedes obtener más información sobre el problema inspeccionando el error en el panel de la izquierda. Deberías ver una flecha roja a la izquierda de View Controller Scene. Haz clic en la flecha para leer el mensaje de error.

Los errores nos dicen que las posiciones X e Y no están definidas. Si haces clic en el círculo rojo al lado del error, Xcode te ofrece la opción de solucionar los problemas al agregar las restricciones que faltan. No seamos perezosos y arreglemos el problema nosotros mismos.

Para centrar la etiqueta, independientemente de las dimensiones y la orientación del dispositivo en el que se ejecuta la aplicación, no podemos usar el menú Pin. En cambio, usamos el menú Alinear a la izquierda del menú Pin. Con la etiqueta seleccionada, abre el menú Alinear y agrega dos restricciones para centrar la etiqueta en su vista principal. Al agregar estas restricciones, las líneas rojas se reemplazan por líneas azules.

Inspección de restricciones

Es hora de aprender más sobre las restricciones. Las restricciones no son estáticas y ciertamente no son mágicas. Puedes agregar, eliminar y modificar restricciones. Como ejemplo, echemos un vistazo a las restricciones de la etiqueta del centro. Selecciona la etiqueta y abre el Inspector de tamaño a la izquierda. La sección Restricciones enumera las restricciones de la selección actual, la etiqueta central. Cada restricción tiene un botón Editar para modificar los atributos de la restricción.

Haz clic en el botón Editar de la restricción que dice Ancho igual a: 42. Al modificar la propiedad Constant, puedes cambiar el ancho de la etiqueta. Establece Constant en 100 y presiona Enter o Return para confirmar el cambio. El tamaño de la etiqueta en el storyboard refleja de inmediato el cambio que hemos realizado.

La propiedad de Prioridad de la restricción es importante si las restricciones múltiples entran en conflicto entre sí. Vamos a ilustrar esto con un ejemplo. Selecciona la etiqueta del centro y agrega una nueva restricción que establezca el ancho de la etiqueta en 200. Ya sabes cómo hacer esto. Ya sabes cómo hacerlo. Cuando agregas la nueva restricción, Xcode se queja de que no puede cumplir ambas restricciones al mismo tiempo.

Selecciona la etiqueta y abre el Inspector de tamaño para inspeccionar las restricciones. Hay dos restricciones que establecen el ancho de la etiqueta. Haz clic en el botón Editar de la restricción que dice Ancho igual a 100 y establece la Prioridad en Alto (750). El ancho de la etiqueta cambia a 200 en el guión gráfico y una de las líneas azules cambia de sólida a punteada, lo que indica que esta restricción es anulada por una restricción con una prioridad más alta. La restricción discontinua sigue activa, pero actualmente no se está aplicando debido a su menor prioridad en comparación con la restricción que establece el ancho de la etiqueta en 200.

Hay otra forma de resolver el problema. Establece la prioridad de ambas restricciones en Requerido (1000). Al mismo tiempo, cambia = por >= para la restricción que dice Ancho igual a: 100. Esto también resuelve el problema. Sin embargo, el resultado no es el mismo. Ambas restricciones están vigentes, trabajando juntas para definir la posición de la etiqueta. La restricción ahora define que el ancho de la etiqueta debe ser mayor o igual a 100.

Agregando más restricciones

Ya mencioné que hay varias maneras de agregar restricciones en el constructor de interfaz. Veamos otra técnica popular. Abre la Biblioteca de objetos a la derecha y agrega un campo de texto a la vista del controlador de vista. Para fijar el campo de texto en la parte superior de la vista, selecciona el campo de texto, presiona Control y arrastra desde el campo de texto a la parte superior de la vista. Echa un vistazo a la siguiente captura de pantalla para entender mejor.

Desde el menú que aparece, selecciona Espaciado vertical a la Guía de diseño superior. La guía de diseño superior es una guía especial colocada a lo largo del borde inferior de la barra de estado y la barra de navegación. La posición de la guía de diseño superior depende de la presencia o ausencia de una barra de estado y una barra de navegación en la parte superior.

El campo de texto ahora debe estar anclado en la parte superior de la vista. Como se esperaba, Xcode nos dice que el campo de texto no tiene suficientes restricciones para describir inequívocamente su posición.

Selecciona el campo de texto, presiona Control y arrastra a la etiqueta a la izquierda del campo de texto. En el menú, selecciona Espaciado horizontal. Repite este paso para la etiqueta a la derecha del campo de texto. Casi estamos allí.

Para establecer la altura de la etiqueta como fija, selecciona el campo de texto, presiona Control y arrastra desde la parte superior del campo de texto hasta la parte inferior del campo de texto. Selecciona Altura del menú que aparece. Esto define una restricción sobre el campo de texto en sí, su altura.

Estoy seguro de que aceptas que los conceptos básicos de Diseño Automático son fáciles de entender. A veces puede ser bastante complicado. Lo que cubrimos hasta ahora son los conceptos básicos del Auto Layout flexionando sus músculos. Terminemos este tutorial mirando un problema muy común que se resuelve fácilmente con el Diseño automático.

Más restricciones

No es raro que desees una subvista para abarcar el ancho y alto de su vista padre. Por ejemplo, una vista de tabla a menudo tiene el mismo tamaño que su vista padre. Veamos cómo podemos manejar esto usando el diseño automático.

Agrega una vista de la Biblioteca de objetos a la vista del controlador de vista. Abre el Inspector de atributos y establece el fondo de la vista en azul para asegurarte de que se destaque. Ejecuta la aplicación en un simulador de iPad para ver con qué estamos empezando.

Puedes presionar Comando + Flecha izquierda o Comando + Flecha derecha para girar el dispositivo. Parece que la vista mantiene su ancho y alto, pero está pegada a la esquina superior izquierda. El objetivo es que abarque el ancho y alto de su vista padre. Selecciona la vista azul y agrega las siguientes restricciones usando el menú Pin.

Antes de hacer clic en Agregar 4 restricciones, asegúrate de agregar las restricciones en relación con la vista superior de la vista azul. ¿Qué significa eso? Una restricción describe una relación entre dos vistas. Estás a punto de aplicar estas restricciones a la vista azul en relación con sus hermanos más cercanos. Lo que queremos, sin embargo, es agregar restricciones que definan la posición de la vista azul en relación con su vista padre o de contenido. Especifica qué vista define la restricción haciendo clic en el pequeño triángulo al lado del número (que define la constante de la restricción). Echa un vistazo a la siguiente captura de pantalla para aclarar.

Verifica dos veces que cada restricción se aplique a la vista azul y a su vista padre o que contenga la vista. Cuando estés listo, agrega las cuatro restricciones.

En lugar de líneas azules, probablemente estés viendo líneas naranjas con números. En Xcode, naranja significa advertencia. Las líneas naranjas te advierten que la posición actual de la vista azul no está alineada con la posición de la vista azul en tiempo de ejecución. ¿Has notado las líneas discontinuas naranjas en los bordes en la vista padre de la vista azul? Esas líneas punteadas simbolizan el marco de la vista azul si las restricciones que acabas de aplicar están en vigor. Eso sucede en tiempo de ejecución.

Si no me crees, te sugiero que ejecutes la aplicación en el simulador de iPad para que lo revises. La vista azul abarca el ancho y el alto de tu vista principal, incluso si giras el simulador de vertical a horizontal y viceversa.

Las líneas naranjas ocupan innecesariamente el espacio de trabajo y lo que estás viendo no es lo que obtienes en tiempo de ejecución. Es mejor solucionar el problema actualizando el marco de la vista azul. Esto es simple. Selecciona la vista azul y selecciona Actualizar marcos en el menú Resolver problemas de diseño automático en la parte inferior derecha.

Asegúrate de comprender lo que hemos cubierto en este tutorial, porque lo necesitaremos en el resto de esta serie. En el siguiente tutorial, discutiremos las vistas de tabla y aplicaremos algunas de las técnicas discutidas en este tutorial. Para obtener más información sobre el Diseño automático, explora la Guía de diseño automático de Apple.

Conclusión

Decir que el diseño automático es poderoso es insuficiente. Aunque solo hemos arañado la superficie en este tutorial, ahora debes tener una idea de lo que es Auto Layout y lo que puede hacer por ti.

En el resto de esta serie, seguiremos usando el diseño automático. Si te quedas atascado, asegúrate de volver a visitar este tutorial o escríbeme una línea en los comentarios. También puedes comunicarte conmigo en Twitter.