fbpx
 

Introducción a Auto Layout [Parte 1]

Introducción a Auto Layout [Parte 1]

1. Introducción

Si eres desarrollador iOS probablemente sepas en que consiste el Auto Layout. Además, es muy posible que tus primeras experiencias utilizándolo no fueran buenas (es una forma suave de decir que en sus primeras versiones era una auténtica basura).

En este tutorial vamos a ver una gran introducción a Auto Layout, donde descubrirás como puede ayudarte en el desarrollo de tus aplicaciones.

Antes de entrar en materia vamos a recordar brevemente la época en la que no existía el Auto Layout.

Previamente a la introducción del Auto Layout en iOS 6, la única opción de hacer que nuestras vistas se adaptaran automáticamente a los cambios de pantalla o de orientación del terminal era utilizando el Autoresizing.

autoresizing

El Autoresizing nos permitía especificar como se comportará una view cuando su superview, por el motivo que sea, modifique su tamaño.

Esta opción era válida para diseños simples, pero con el aumento de complejidad de las aplicaciones móviles no siempre funcionaba correctamente. Por esto Apple introdujo el Auto Layout, que es un sistema más eficaz que permite que las views de nuestras aplicaciones se adapten automáticamente a diferentes formatos de diferentes dispositivos y a rotaciones del terminal.

En Xcode 4, el propio IDE obligaba al desarrollador que quisiera utilizar Auto Layout en sus aplicaciones a especificar el comportamiento de todas y cada una de las views, por lo que hacía que el uso de Auto Layout fuera más un dolor de cabeza que otra cosa.

Muchos desarrolladores tuvimos nuestra primera toma de contacto con el amigo Auto Layout en esta época. Lo que hizo que la mayoría de nosotros, al ver que suponía más un paso hacia atrás que un avance, desactiváramos esta opción en nuestras interfaces y nunca más volviéramos a utilizarla.

Esto ha cambiado en versiones posteriores de Xcode, donde se permite más libertad al desarrollador. Actualmente se ha convertido en una herramienta fundamental para adaptar nuestras interfaces.

Supone un ahorro de tiempo enorme y disminuye considerablemente las dificultades que encontramos para adaptar nuestra aplicación a los diferentes tamaños de pantallas de los dispositivos de Apple.

Si pretendes ser Desarrollador iOS, debes sentirte cómodo trabajando con Auto Layout.

[caja-roja] A partir de aquí nos referiremos a Auto Layout como AL[/caja-roja]

2. ¿Qué vas a aprender en este tutorial?

En este tutorial veremos los siguientes puntos:

  • ¿Qué es el Auto Layout?
  • ¿Por qué es necesario el Auto Layout?
  • ¿Qué son las Constraints?
  • Cómo añadir constraints a tus interfaces
  • Como hacer que tus interfaces se adapten a los cambios de orientación del dispositivo
  • Como modificar constraints en tiempo de ejecución

[caja-gris]Prepárate para convertirte en un experto del Auto Layout, ¡COMENZAMOS![/caja-gris]

3. ¿Qué es exactamente el Auto Layout?

Cuando comienzas a trabajar con un concepto nuevo siempre es bueno conocer su definición.

Una definición estándar para AL podría ser la siguiente:

AL es un sistema que te permite diseñar la interfaz de tu aplicación mediante descripciones matemáticas de las relaciones que existen entre los elementos de esa interfaz.

Estos son los casos en los que AL puede sernos de gran utilidad:

  • Al desarrollar una app Universal (Es decir, con versión para iPhone y iPad).
  • Si quieres crear una app que muestre una interfaz diferente en función de si el dispositivo está en posición vertical u horizontal.
  • Si buscas diseñar una app cuya interfaz se adapte a los diferentes idiomas en los que la voy a desarrollar (Sí, AL también sirve para la Internacionalización).

Puede que pienses que todo esto lo puedes hacer sin AL, es cierto. Sin embargo, tus tiempos de desarrollo serán menores si utilizas esta herramienta.

En cualquier proyecto en el que queramos usar AL lo primero que tendremos que hacer siempre es comprobar que en Interface Builder tengamos activada esa opción en nuestra vista. Para realizar esta comprobación, seleccionaremos nuestro View Controller en Interface Builder y echaremos un vistazo a la parte inferior del File Inspector. Puedes ver la opción activada en la parte inferior de la imagen:

Auto Layout activado

De todas formas, al crear un nuevo proyecto en Xcode, AL viene activado por defecto. Por lo que es probable que no tengas que activar en ningún momento esta opción.

Otra cosa que tenemos que tener muy clara es que la clave del AL son las CONSTRAINTS.

Antes de hablar de las Constraints es necesario repasar el cambio de paradigma que ha supuesto el uso del AL.

Antes de la llegada del AL, cuando diseñábamos una interfaz mediante Xcode, colocábamos cada una de las views, estableciendo su posición X/Y respecto a su superview. Además de esto, especificábamos el ancho(width) y el largo(height) de cada view. De esta forma diseñábamos la interfaz completa de nuestra app.

paradigma_antiguo

Desde la llegada del AL, la forma de diseñar interfaces cambió totalmente. Tuvimos que cambiar incluso nuestra forma de pensar a la hora de colocar los elementos en la pantalla.

Con AL no pensamos donde colocamos una view respecto al eje de coordenadas de su superview, sino que especificamos donde se ubica una view haciendo referencia a los elementos que tiene alrededor. Por ejemplo, en lugar de decir:

“Esta view debe ir situada en la X= 20 y en la Y=20 de su superview”

Diremos:

“El borde izquierdo de esta view se situará a 20 puntos del borde derecho de la vista que tiene justo a su izquierda”

Es decir, dejamos de especificar posiciones en un eje de coordenadas para especificar posiciones estableciendo las distancias que hay entre los elementos que forman la interfaz.

paradigma_moderno

4. ¿Qué son las Constraints?

Hemos dicho que para trabajar con AL organizaremos la interfaz de nuestra aplicación especificando las relaciones que existen entre los elementos de dicha interfaz.

Estas relaciones son conocidas como CONSTRAINTS. Las constraints pueden actuar sobre un elemento en concreto o sobre un conjunto de elementos. Es decir, puedes crear una constraint para especificar el height de una view o puedes crear una constraint para determinar la distancia horizontal que tendrá que haber entre dos views de nuestra interfaz.

Las contraints son la base fundamental del AL. Son las encargadas de establecer la disposición de los elementos en nuestra interfaz. Podemos añadir y eliminar constraints o cambiar las propiedades de una constraint para modificar nuestra interfaz.

A modo de resumen, la forma de trabajar con AL debe ser la siguiente:

  1. Utilizaremos Interface Builder para crear la interfaz de nuestra aplicación. Diseñaremos y colocaremos las views de la forma que más nos interese para conseguir el resultado que buscamos.
  2. Cuando estemos satisfechos con la posición y el aspecto de todos los elementos añadiremos las constraints para que nuestra interfaz pueda reaccionar ante los cambios de orientación, tamaño y localización.
  3. Cuando se produzcan estos cambios de orientación, tamaño y localización, AL será el encargado de calcular en tiempo de ejecución la posición de todos los elementos de nuestra aplicación al mismo tiempo y configurar la interfaz de forma que satisfaga todas las constraints.

5. Manos a la Obra

Existen dos formas de trabajar con AL:

  • A través de Interface Builder
  • Directamente mediante código

Al tratarse de un tutorial de introducción, comenzaremos a utilizar AL a través de Interface Builder.

Vamos a crear un proyecto en Xcode que llamaremos AutolayoutDemo y en el que veremos un ejemplo que te servirá para romper el hielo.

Lo dicho, crea un nuevo proyecto, elige la plantilla Single View Application.

captura3

Puedes llamar al proyecto AutolayoutDemo.

En la opción Devices, elige iPhone.

captura4

Una vez que hayas creado la aplicación, abre el fichero Main.storyboard. Verás la view del View Controller que Xcode ha creado por defecto.

captura5

Si te fijas, en la esquina inferior derecha, puedes ver un conjunto de iconos con múltiples opciones. Más adelante hablaremos de para que sirve cada icono, por ahora únicamente quédate con que estos son los iconos a través de los cuales trabajaremos con AL.

captura6

Además de estos iconos, otra forma de interactuar con AL es directamente a través de las views.

¿Recuerdas que es lo que haces cuando tienes que realizar conexiones como iBOutlets e IBActions?

Pues puedes trabajar con AL de una forma muy parecida. Vamos a verlo en la práctica.

Añade una view en el centro del View Controller. Puedes darle color rojo para que se aprecie mejor.

captura7

Ahora coloca el puntero del ratón sobre esta view roja, deja pulsada la tecla ctrl y arrastra el ratón desde la view y suéltalo dentro de la misma view. De la misma forma que haces con los IBOutlets e IBActions pero sin salir de la propia view. Si lo has hecho correctamente, debería aparecer el siguiente menú contextual:

captura8

Es posible que en lugar de aparecer en el menú las opciones Width y Height únicamente aparezca una de ellas. Esto se debe a que el sentido del arrastre influye en las opciones que se muestran en el menú. Puedes comprobarlo tu mismo arrastrando el puntero de forma vertical, horizontal o en diagonal y observando las opciones que aparecen en el menú.

A través de este menú podemos establecer las constraints de los elementos que forman nuestra interfaz. Veamos un ejemplo. Vamos a añadir una constraint a la vista que acabamos de crear:

  1. Sitúa el puntero del ratón dentro de la view roja, deja la tecla ctrl pulsada, arrastra el puntero del ratón horizontalmente y suéltalo sin salir de la propia view.
  2. Aparecerá el menú de Auto Layout con el parámetro width.
  3. Haz clic en el parámetro width del menú.

Enhorabuena. Has creado tu primera constraint. Y tu dirás:

“Muchas gracias, pero ¿que es lo que hemos hecho?

Lo que hemos hecho es establecer que esta vista siempre va a tener un width de ese tamaño, sin importar el dispositivo en el que se ejecute, ni la orientación (portrait, landscape) del mismo.

No prestes atención a las lineas rojas o naranjas que han aparecido en la vista. Luego veremos que significan.

Selecciona la view y pulsa en el botón Size Inspector:

captura9

Verás un nuevo área llamado Constraints que contiene la constraint width que acabamos de añadir.

captura10

En lugar de Width Equals: 240 es probable que a ti te aparezca otro valor diferente. Siempre dependerá del width que tuviera la view roja que añadiste al storyboard.

Desde este área puedes modificar las constraints pulsando en Edit o eliminarlas seleccionándolas y pulsando en la tecla Delete de tu teclado.

Otra zona donde puedes encontrar información sobre tus constraints es en el Document Outline. Tal vez, nunca lo hayas llamado así pero si que lo has utilizando muchas veces. Se trata del menú lateral que aparece en la parte izquierda del Storyboard. Si no lo ves, pulsa sobre este icono, situado en la parte inferior izquierda para mostrarlo:

captura11

Desde este área tenemos acceso total a la constraint que acabamos de crear. Para acceder a ella despliega la view roja a la que le hemos añadido la constraint y luego pulsa en el icono azul con el texto Constraints.

captura12

Después haz clic en la constraint que hemos creado y observa como en el Inspector de Propiedades aparecen todas las propiedades de nuestra constraint. Desde aquí podemos modificarla.

captura13

El Document Outline es además el sitio perfecto para que Xcode nos informe de inconsistencias o errores en nuestras Constraints. Si te fijas, en la parte superior derecha aparece un círculo rojo con una flecha blanca que nos está avisando que algo no es correcto.

captura14

Pulsa sobre el círculo rojo y podrás ver los errores en más detalle.

captura16

Estos errores se producen porque AL necesita más información. Nos está diciendo que para poder colocar la view roja correctamente ante cualquier cambio de orientación o tamaño de nuestro dispositivo, debe saber cual es la posición Y, la posición X y el height de nuestra view roja. Esto se debe, a que hasta ahora lo único que le hemos dicho es que ante cualquier cambio de orientación o tamaño, nuestra view roja debe tener siempre el mismo width(ancho), pero no le hemos dicho cual será su height(altura) ni su posición X, ni su posición Y.

Por este motivo AL muestra estos errores en pantalla.

Si pulsas sobre el primer círculo rojo, Xcode es lo suficientemente inteligente para sugerirte la correcta configuración para el Auto Layout. Haz click en “Add missing constraints” y automáticamente se añadirán las constraints necesarias para la view y los errores desaparecerán.

captura17

Si despliegas de nuevo la view roja, verás las nuevas constraints. Además los puntos rojos que indicaban los errores han desparecido. Esto quiere decir que la view tiene todas las constraints necesarias y que AL tiene toda la información necesaria para poder colocar la view ante cualquier cambio de orientación o tamaño.

captura18

Si ejecutas la aplicación y giras el simulador de Xcode, verás que la view roja siempre permanece centrada en pantalla a pesar de los cambios de orientación del dispositivo.

¡Enhorabuena! Has creado tu primera interfaz con AL. Se trata de una interfaz muy sencilla, pero es suficiente como primera toma de contacto con AL.

6. Resumen Final

Si no habías trabajado antes con AL habrás podido ver como crear una interfaz sencilla que se adapte a los cambios de orientación del dispositivo no es nada complicado.

  • Hemos podido ver el cambio de paradigma que supuso la llegada de AL.
  • Has tenido tu primera toma de contacto con la base de AL: Las Constraints.
  • Has creado tu primera interfaz con AL .

Lo principal es que te hayas quedado con la regla más importante de todas:

[caja-gris]Para especificar la posición de una view mediante AL debemos especificar las constraints para sus posiciones X/Y y las constraints para el tamaño de su Width/Height[/caja-gris]

Este debe ser siempre tu primer paso para que todo funcione correctamente.

7. ¿Donde ir ahora?

Si, lo que has visto hasta ahora te ha ayudado a romper el hielo con AL, no te pierdas la segunda parte de nuestro tutorial, donde realizaremos una serie de ejemplos que te permitirán seguir cogiendo agilidad con esta herramienta.

Puedes descargar el código completo del proyecto aquí.

Si tienes cualquier duda utiliza los comentarios justo debajo de este post.

Si este post te ha servido de ayuda, te agradecería que lo compartieras en tus redes sociales. De esta forma, Efecto/Apple podrá llegar a más gente cada día.

Etiquetas:
6 Comentarios
  • RUDY FRITZ
    Publicado a las 23:34h, 15 noviembre Responder

    Excelente explicación !!!
    Me ayudo demasiado

  • Mauro
    Publicado a las 15:22h, 18 abril Responder

    Muy bien explicado

  • Carlos J. Chiluiza R.
    Publicado a las 01:07h, 26 abril Responder

    Excelente articulo, muy bien explicado… Felicitaciones.
    Solo podrias poner una version que se pueda imprimir.

    Gracias.

Escribe un comentario

Crea una aplicación iOS desde cero con mi Curso gratuito en videoRESERVAR PLAZA
+
10AppsIpad

Descarga las 10 Aplicaciones

Introduce tu Nombre y tu Email para recibir las Apps en tu Correo

Acabo de enviarte un email. Sigue las instrucciones para descargar las Aplicaciones. Puede que tengas que revisar tu buzón de correo no deseado. Gracias.