fbpx
 

Introducción a Auto Layout [Parte 2]

Introducción a Auto Layout [Parte 2]

1. Introducción

Si estás aquí, probablemente hayas echado un vistazo a la primera parte de la serie de tutoriales sobre Auto Layout.

Si no es así, te recomiendo que comiences por ese tutorial y una vez que lo hayas exprimido al máximo vuelvas aquí para continuar con tu aprendizaje sobre Auto Layout.

Puedes acceder a la primera parte del tutorial desde aquí.

2. ¿Qué vamos a ver en este Tutorial?

En la primera parte de nuestro tutorial pudimos ver una pequeña introducción sobre Auto Layout:

  • Viste la diferencia entre este sistema y el antiguo Autoresizing.
  • Entendiste que la base de Auto Layout son las Constraints.
  • Creaste tu primera interfaz adaptada a Auto Layout, añadiendo algunas constraints.

En esta segunda parte nos centraremos en algunos ejemplos de interfaces algo más complejas que te permitirán sentirte cada vez más cómodo con Auto Layout.

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

3. Ejemplo 1: Xcode trabaja por nosotros

El objetivo de este primer ejemplo es el siguiente:

Desarrollar una interfaz formada por una view de color verde que esté centrada vertical y horizontalmente, independientemente del tamaño de la pantalla y de su orientación.

Para trabajar con AL, te recomiendo que sigas este proceso:

  1. Añadas y coloques todas las views que forman la interfaz. Cuando hayas acabado la fase de creación de la interfaz y ésta tenga el aspecto exacto que estás buscando es cuando podrás pasar a añadir las constraints.
  2. Comienza a añadir las constraints en las views de tu interfaz.

Para agilizar el trabajo, he creado un proyecto inicial en el que puedes encontrar la view verde creada y centrada dentro de nuestra interfaz.

Descárgalo desde aquí, ábrelo y vete al fichero Main.storyboard.

Podrás ver una interfaz como esta:

auto layout captura19

Como hemos dicho, el objetivo es hacer que esta view verde se mantenga centrada vertical y horizontalmente SIEMPRE.

Nuestra view verde ahora mismo se encuentra centrada vertical y horizontalmente, por lo que podríamos decir que hemos acabado la fase de creación de la interfaz.

El siguiente paso sería comenzar a añadir las constraints. ¿Pero cuales son las constraints que debemos añadir?

Si recuerdas, hemos comentado antes que 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 (Width/Height).

Por tanto deberemos añadir 4 constraints:

  • Width
  • Height
  • Posición X
  • Posición Y

Vamos a hacerlo utilizando dos métodos diferentes. De esa forma podrás elegir el que te parezca más sencillo.

Para añadir la primera constraint, el width, utilizaremos el mismo método que vimos al principio. Deja la tecla ctrl pulsada, y arrastra desde la view verde en sentido horizontal y suelta el puntero dentro de la propia view verde.

En el menú flotante que aparecerá haz clic en Width.

auto layout captura20

De esta forma habrás añadido la primera de las cuatro constraints que debemos añadir (Width).

Para añadir la segunda constraint (Height), vamos a utilizar un método diferente. Usaremos los iconos situados en la esquina inferior derecha. Seleccionar la view verde y pulsa en el siguiente icono:

captura21

Después, activa la constraint Height y pulsa en el botón “Add 1 Constraint”.

auto layout captura22

Ya tenemos definidas las constraints de tamaño (Width y Height).

Como puedes observar, en la parte superior derecha del Document Outline, aparece el punto rojo, que nos ofrece información detallada sobre los problemas que tiene nuestra view.

Como ya hemos mencionado antes, es necesario definir las constraints de tamaño Width/Height y posición X/Y para ajustarnos al sistema AL.

Como en este caso nos falta por definir la posición X/Y, Xcode nos avisa de que faltan esas constraints.

auto layout captura23

Podríamos hacer que Xcode añada automáticamente las constraints que faltan como hemos hecho antes con el botón “Add missing constraints” o podemos hacerlo manualmente.

En esta ocasión lo haremos de forma manual para ver como crear una constraint entre una view y su superview.

Al igual que las constraints de una sola view, las constraints entre una view y su superview pueden crearse de dos formas diferentes: Arrastrando o mediante los iconos de la parte inferior derecha.

La constraint de la posición X la crearemos con el método de arrastre.

Dejando pulsada la tecla ctrl, arrastra el puntero desde la view verde en sentido vertical, pero esta vez acabando en su superview (es decir, fuera de la view verde).

Cuando aparezca el menú flotante, selecciona “Center Horizontally in Container”.

auto layout captura24

Al seleccionar “Center Horizontally in Container”, lo que hacemos es que la view verde siempre se va a mantener centrada horizontalmente en su superview.

Para añadir la constraint de la posición Y, utilizaremos el método de los iconos de la parte inferior derecha.

Selecciona la view verde y pulsa en el siguiente icono:

captura25

En el menú flotante que aparece, activa la constraint “Vertically in Container” y pulsa en el botón “Add 1 Constraint”.

auto layout captura26

Después de esto, al seleccionar la view verde deberías ver dos nuevas lineas de color azul cruzando la view. Estas lineas de color azul indican que hemos creado todas las constraints que eran necesarias para nuestra view verde.

Para comprobar que hemos conseguido crear la interfaz que buscábamos, ejecuta la app en Xcode y cambia la posición del simulador de portrait a landscape varias veces para que compruebes que la view verde permanece siempre centrada vertical y horizontalmente.

Enhorabuena, has creado tu primera interfaz utilizando AL.

Antes de pasar al Ejemplo 2, vamos a ver un pequeño apartado en el que explicaremos las opciones de ayuda que te ofrece Xcode para trabajar con constraints.

AYUDAS DE XCODE

Una característica interesante es la capacidad de Xcode de reiniciar frames y constraints de forma automática. Vamos a verlo como siempre, con un ejemplo:

Vuelve al proyecto anterior, accede a Main.storyboard y mueve la view verde a una nueva posición. Por ejemplo, establece su X a 120 y su Y a 240. (Cambia las coordenadas a través del Inspector de Tamaño, no modifiques las constraints).

Verás algo similar a esto:

auto layout captura27

Las lineas de posición de las constraints pasan a ser de color naranja para indicar que existe una incoherencia entre la posición de la view verde que se ha especificado mediante constraints y la posición que tiene ahora dicha view en el storyboard. Una linea punteada naranja indica la posición de la view especificada mediante las constraints y dos etiquetas naranjas informan de la diferencia en pixeles entre la posición especificada mediante constraints y la posición que tiene la view verde en el storyboard.

Es decir, Xcode nos informa que la posición actual de nuestra view verde difiere de la posición que hemos establecido que debe tener mediante las constraints.

En el Document Outline puedes ver bastante información. El indicador superior en esta ocasión no es rojo sino naranja, lo que indica que no se trata de un error si no de un warning. Esto quiere decir, que Auto Layout puede interpretar correctamente la posición de la view, pero nos está informando que lo que vemos en el storyboard no es lo mismo que aparecerá en el resultado final.

Xcode nos informa con este warning, que al ejecutar nuestra aplicación, la view verde se colocará siguiendo las constraints que hemos creado, por lo que no tenemos que preocuparnos porque en el storyboard aparezca en una posición diferente. Es decir, las constraints prevalecen sobre la posición de nuestra view en el storyboard.

De todas formas, lo preferible es que nuestro código no contenga warnings de ningún tipo, así que ¿Cómo solucionamos esto?

O mejor todavía.

¿Alguien puede solucionarlo por nosotros?

La respuesta es que sí, Xcode es capaz de hacerlo. Pero antes, debemos decidir cual es el resultado que buscamos:

¿Queremos que nuestra view se mantenga en la posición inicial que hemos especificado mediante las constraints?

En este caso haz clic en la view verde y pulsa sobre este icono:

auto layout captura28

En el menú flotante que aparecerá, debajo del título Selected Views, selecciona “Update Frames”.

auto layout captura29

De esta forma, se modificará la posición actual de la view volviendo a la posición que especificamos inicialmente mediante constraints. Además se eliminará el punto rojo y el resto de indicadores.

Por el contrario, si lo que queremos es que nuestra view se mantenga en la nueva posición que hemos especificado modificando valores X/Y, haremos clic en la view verde, pulsaremos el mismo icono y en el menú flotante, debajo del título Selected Views, seleccionaremos “Update Constraints”.

auto layout captura30

De esta forma, se modificarán las constraints para que concuerden con la posición actual de la view.

Lo mejor es que pruebes las dos opciones y veas la diferencia entre ambas.

Puedes descargar el proyecto con este ejemplo finalizado desde aquí.

4. Ejemplo 2: Cuidado con el Intrinsic Content Size

En este ejemplo, vamos a conocer el concepto de INTRINSIC CONTENT SIZE.

En el Ejemplo 1, hemos visto como aplicar constraints a un objeto de tipo UIView. Se supone que cualquier elemento de nuestra interfaz al que queramos aplicarle constraints debería funcionar de la misma forma que la view con la que hemos trabajado en el Ejemplo 1.

Pues esto no es así. Existen algunos elementos que tienen sus particularidades. Concretamente dos:

  • UILabel
  • UIButton

Algunos tipos de views, como las labels y los buttons definen su tamaño dependiendo de su contenido. Un método especial llamado intrinsicContentSize es el responsable de devolver el tamaño de este tipo de vistas así que no debemos de sobreescribir esa información utilizando constraints.

Vamos a comprobarlo con un nuevo ejemplo.

Descarga el proyecto inicial para este ejemplo, desde aquí.

Una vez descargado, ábrelo y vete al fichero Main.storyboard.

Podrás ver una interfaz como esta:

auto layout captura31

Quiero que hagas exactamente lo mismo que hicimos en el Ejemplo 1. Debemos hacer que la label permanezca centrada vertical y horizontalmente en la pantalla, a pesar de los cambios de orientación o tamaño del dispositivo.

No voy a explicar cada paso en detalle, puesto que son exactamente iguales que los del Ejemplo 1. Te voy a resumir brevemente los pasos que tienes que dar.

  1. Lo primero que debes hacer es añadir las constraints de posición X y posición Y a nuestra label. Puedes utilizar el método que prefieras, arrastrando el puntero o utilizando los iconos de la parte inferior derecha.
  2. Cuando hayas terminado de añadir estas 2 constraints, Xcode te debería avisar mediante las lineas azules de ayuda, que has añadido todas las constraints que necesita la label para poder colocarse en pantalla.

Pero… un momento…

Si solo hemos añadido las constraints de posición (X/Y), ¿que pasa con las constraints de tamaño (Width/Height)?

Al comenzar con Auto Layout dijimos que para que una vista se ajuste a este sistema debe de tener las constraints de posición (X/Y) y las constraints de tamaño (Width/Height). Como en este caso solo hemos especificado las de posición, ¿no deberíamos añadir las de tamaño también? La respuesta es NO. De hecho, el añadirlas sería considerado como un error.

Como hemos dicho antes, el tamaño de los botones y los labels viene definido por su contenido. Es el método intrinsicContentSize el responsable de especificar su tamaño, por lo que para este tipo de vistas únicamente tendremos que crear las constraints de posición (X/Y).

Puedes ejecutar la aplicación y al girar el simulador (⌘←), comprobarás que nuestra label se mantiene en todo momento en el centro de la pantalla.

Puedes descargar el proyecto con este ejemplo finalizado desde aquí.

5. Resumen Final

Espero que estos ejemplos te hayan ayudado a manejar Auto Layout con algo más de soltura.

Has podido ver 2 formas diferentes de añadir constraints a tus views, también hemos visto como hacer que Xcode trabaje por nosotros y además hemos explicado el concepto del Intrinsic Content Size.

Recuerda que tanto en los labels como en los buttons no debes añadir las constraints de tamaño (Width/Height).

6. ¿Donde ir ahora?

Si estos ejemplos te han servido para comprender algo mejor Auto Layout, no te pierdas la tercera parte de nuestro tutorial, donde llevaremos a cabo dos ejemplos más que te ayudarán a mejorar tus habilidades con esta herramienta.

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:
2 Comentarios
  • irobe
    Publicado a las 12:11h, 01 diciembre Responder

    Sigo leyendo pero hay algo que me “escama” yo estoy acostumbrado a programar con porcentajes, es decir, la view tiene un 100% de la capa en x y un 20% en y … y por ahora esto no se puede hacer ¿?¿?¿? es que claro definirlo como 300 va bien para un tamaño pero en otro se queda pequeño o grande, yo el ejemplo lo he visto al cambiarlo de iphone 7 a iphone 6 … sigo leyendo tus tutoriales a ver si me quito dudas XD

    Gran trabajo

    • Luis R
      Publicado a las 18:37h, 01 diciembre Responder

      ¡Hola irobe!

      No hay problema en seguir utilizando porcentajes. De hecho, lo mas normal es utilizarlos para hacer que el tamaño de algunas views esté en función de otras.

      Si sigues avanzando con los tutoriales sobre Auto Layout, llegarás a un ejemplo, donde hacemos que tanto el height como el width de una de las views sea justo la mitad del height y el width de otra view.
      En este ejemplo, al estar trabajando con Auto Layout mediante código, lo que hacemos es utilizar el parámetro multiplier.

      Concretamente, es el ejemplo 3 de este tutorial:
      http://www.efectoapple.com/domina-auto-layout-como-un-experto-parte-2/

      Gracias por comentar.

      Un saludo!!!

Escribe un comentario

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.