fbpx
 

Introducción a Auto Layout [Parte 3]

Introducción a Auto Layout [Parte 3]

 1. Introducción

Bienvenido a la tercera parte de esta serie de tutoriales sobre Auto Layout.

Si estás aquí, probablemente hayas echado un vistazo a los artículos anteriores de esta serie.

Si no es así, te recomiendo que comiences por esos tutoriales y una vez que los 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í.

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

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

En los artículos anteriores 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.
  • Comprendiste y trabajaste con el concepto Intrinsic Content Size.

En esta tercera parte nos centraremos en algunos ejemplos de interfaces algo más complejas y además verás como modificar constraints mediante código. Se trata de algo extremadamente útil que te permitirá una gran flexibilidad en tus aplicaciones.

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

3. Ejemplo 1: Los diferentes tipos de constraints

Cuando creas apps compatibles con cualquier tamaño de pantalla y que puedan ejecutarse tanto en portrait como en landscape, el Auto Layout puede ahorrarte muchísimo tiempo.

En este ejemplo, vamos a ver como afrontar una situación bastante común:

Definir una interfaz que se presente de la misma forma en cualquier pantalla y orientación.

Para agilizar el trabajo, he creado un proyecto inicial para este ejemplo, puedes descargarlo desde aquí.

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

Podrás ver una interfaz como esta:

auto layout captura32

Si ejecutas la aplicación verás como la label no se encuentra centrada en la pantalla y la vista azul se coloca de una forma extraña en la misma. Esto es debido a que todavía no hemos añadido ninguna constraint. Lo primero, antes de añadir estas constraints, debemos tener claro que queremos conseguir en nuestra interfaz.

En este caso, queremos que esta interfaz cumpla las siguientes reglas:

  • La label debe permanecer siempre centrada en la pantalla (Esto es algo que ya sabes hacer)
  • La view azul debe permanecer siempre en la parte inferior de la pantalla
  • La view azul debe de tener siempre el mismo espacio tanto a su derecha como a su izquierda = 50 puntos a cada lado. Se ejecute la app en un iPhone o en un iPad, la view azul debe tener 50 puntos a su derecha y 50 puntos a su izquierda. (Esto quiere decir, que en pantallas mayores, su ancho será mayor y en pantallas más pequeñas, su ancho será menor)

No vamos a explicar como centrar la label puesto que es algo que hemos visto en el anterior tutorial.

Si no lo tienes del todo claro, te recomiendo que accedas a ese tutorial desde aquí y cuando lo tengas dominado continúes con este ejemplo.

Una vez que hayas centrado la label, pasemos entonces a las constraints de la view azul.

Recuerda la primera regla del Auto Layout, hay que especificar las constraints de tamaño y posición.

  1. Especifica la constraint del height de la view azul utilizando ctrl + clic, arrastrando verticalmente sin salir de la propia view y eligiendo “Height” o utilizando los iconos de la esquina inferior derecha como hemos visto en los ejemplos del anterior tutorial.
  2. ¿Qué pasa con el width? Queremos que el ancho de la view azul sea relativo a su superview y para ello necesitamos dos relaciones:
  • Mantener una distancia fija desde el borde izquierdo (LEADING) de la view azul al borde izquierdo de su superview.
  • Mantener una distancia fija desde el borde derecho (TRAILING) de la view azul al borde derecho de su superview.

Estas dos relaciones, automáticamente especifican el width de la view azul incluso cuando se produzcan cambios en el tamaño de su superview.

Para crear estas constraints arrastramos con ctrl pulsado desde la view azul hasta la parte izquierda de su superview y seleccionamos Leading Space to Container Margin y repetimos la operación arrastrando hacia la parte derecha de su superview y seleccionamos Trailing Space to Container Margin.

auto layout captura33

Ya tenemos especificadas las constraints de tamaño. Ahora vamos a por las de posición.

De nuevo, necesitamos referirnos a la superview para definir una constraint para la view azul. La relación que debemos especificar es la siguiente:

La view azul debe mantener una distancia CERO al borde inferior de su superview

Para añadir esta constraint, tal y como hemos hecho antes, arrastra con la tecla ctrl pulsada desde la view azul hacia la parte inferior de la superview y selecciona Vertical Spacing to Bottom Layout Guide.

auto layout captura34

En este momento hemos creado todas las constraints necesarias y nuestra interfaz se adaptará a cualquier tamaño de pantalla.

auto layout captura35

Puedes comprobarlo, ejecutando la app, girando el simulador y verás que la view azul se mantiene en la parte inferior de la pantalla y además mantiene la misma distancia a derecha y a izquierda.

Un último apunte con respecto a este ejemplo. Has podido comprobar que dependiendo de la posición donde necesitemos crear la constraint, tendremos que seleccionar un tipo u otro de constraint.

Estas son las 4 opciones que deberás manejar:

  • Margen izquierdo de la view: Leading Space
  • Margen derecho de la view: Trailing Space
  • Margen inferior de la view: Vertical Spacing to Bottom
  • Margen superior de la view: Vertical Spacing to Top

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

3. Ejemplo 2: Modificar constraints mediante código

En ocasiones, para conseguir algunas interfaces complejas necesitamos un poco más control sobre las constraints. Las constraints son instancias de la clase NSLayoutConstraint, por lo que mediante código podemos acceder a sus propiedades en tiempo de ejecución.

Para este ejemplo te voy a pedir que descargues primero el ejemplo finalizado desde aquí.

Una vez descargado, ábrelo y ejecuta la aplicación.

En el simulador verás una label blanca alineada a una view roja. Si cambias de portrait a landscape verás como cambia el height de la view roja dependiendo de la posición del simulador pero la label sigue alineada justo sobre la view roja.

auto layout captura35b

Veamos como conseguir este tipo de interfaz.

Ahora si, descarga el proyecto inicial correspondiente a este ejemplo desde aquí.

Ábrelo y ve al Main.storyboard.

En la view roja queremos conseguir 3 cosas:

  • Su margen izquierdo (Leading) y margen derecho (Trailing) deben ser 0, para que permanezca en todo momento pegada a los bordes izquierdo y derecho de la pantalla.
  • Su margen inferior (Bottom) debe ser 0 , para que permanezca pegada al fondo de la pantalla.
  • Su altura (Height) debe mantenerse constante.

Por tanto, necesitaremos añadir 4 constraints a nuestra view roja:

  • Leading
  • Trailing
  • Bottom
  • Height

Vamos a ver una nueva forma de añadir estas 4 constraints de una sola vez. Una forma que te ahorrará mucho tiempo.

Selecciona la view roja y pulsa en el siguiente icono:

captura21

En el menú flotante que aparece lo primero que tendrás que hacer es desactivar la opción Constrain to margins. 

auto layout captura36

Esta opción lo único que hace es dejar unos márgenes por defecto en las constraints que vayamos creando. La desactivamos porque es más sencillo trabajar sin márgenes.

Después, como debemos poner las constraints Leading, Trailing y Bottom de nuestra view roja a 0, seleccionaremos en este menú dichas constraints, utilizando las lineas rojas situadas en la parte superior del menú. Deberás pulsar en las lineas rojas situadas a la izquierda, abajo y derecha, ya que las constraints que necesitamos son : Leading, Trailing y Bottom.

Además, también activaremos la constraint Height, que es la cuarta constraint que necesitamos en nuestra view.

Para acabar pulsaremos en el botón inferior Add 4 Constraints.

Puedes comprobar en la imagen anterior como deberían de quedar las constraints de nuestra view roja.

También puedes comprobar en el Document Outline si todas las constraints se han creado correctamente. En esta imagen puedes ver las constraints que debes de haber creado:

auto layout captura37

Pasemos ahora a las constraints de la label. Buscamos lo siguiente:

  • Que el label esté centrado horizontalmente.
  • Que el espacio vertical entre esta label y la view roja sea de 8 puntos.

Para centrar el label horizontalmente, haz ctrl + clic en el label y arrastra el puntero hacia arriba, soltándolo fuera del label. Después selecciona Center Horizontally in Container.

auto layout captura38

Esto hará que nuestro label quede centrado horizontalmente, es decir, que mantenga el mismo espacio a su izquierda y derecha.

Para la siguiente constraint, haz ctrl + clic en la label, arrastra el puntero hacia abajo y suéltalo en la view roja. Después elige Vertical Spacing.

Esto hará que nuestra label se sitúe siempre a la misma distancia de nuestra view roja. Puede que te preguntes, ¿Pero a qué distancia exactamente? Puedes comprobarlo directamente seleccionando nuestra label y pulsando en el Inspector de Tamaño, uno de los iconos situados en la parte superior derecha de Xcode:

auto layout captura39

Justo debajo encontrarás una sección llamada Constraints.

auto layout captura40

En esta sección puedes examinar las 2 constraints que acabamos de añadir a nuestra label. Si te fijas, la segunda constraint (Bottom Space to: RedView) tiene un valor de 8. Esa es la distancia que hemos fijado entre nuestra label y la view roja. Si quisiéramos modificar esta distancia y fijar un valor de 20 por ejemplo, tendremos que pulsar en el botón Edit y escribir 20.

auto layout captura41

De esta forma, verás como nuestra label se desplaza ligeramente hacia arriba para ajustarse a la constraint que acabamos de modificar.

Esta es una forma rápida de modificar constraints ya creadas.

Si en lugar de modificarla quieres eliminarla directamente únicamente tendrás que seleccionarla en la misma sección que acabamos de ver:

auto layout captura42

Y pulsar la tecla Delete de tu teclado.

Para terminar el tutorial tendremos que tener las dos constraints que hemos creado, así que si has borrado la segunda constraint, por favor vuelve a crearla o utiliza la magia de Deshacer (⌘+Z).

Con estas constraints creadas habríamos terminado con el label también.

Si ejecutas la aplicación verás que nuestra label se sitúa correctamente en el centro de la pantalla y a 20 puntos de nuestra view roja. Puedes girar el simulador las veces que quieras para comprobar que siempre cumple estas condiciones.

Con este ejemplo has podido aprender como añadir y eliminar constraints de diferentes formas, pero para terminar vamos a ir un paso más allá.

Vamos a ver como, mediante código, podemos hacer que nuestra view roja tenga una height especificada por nosotros cuando el dispositivo esté en portrait y otra height diferente cuando esté en landscape.

Como hemos comentado antes, las constraints son instancias de la clase NSLayoutConstraint, por lo que mediante código podemos crear un IBOutlet para poder acceder a ellas y modificarlas en tiempo de ejecución.

Además, también tendremos que hacer referencia a nuestra view roja por código, por lo que también tendremos que crear un IBOutlet para ella.

Haz lo siguiente. Abre el fichero ViewController.m y añade las siguientes propiedades:

El aspecto de tu clase ViewController.m debería ser este:

Una vez que hemos declarado el IBOutlet, vamos a conectarlo con nuestra constraint.

Abre Main.Storyboard de nuevo y desde el Document Online, haz clic en los menús desplegables de la view roja hasta que se muestre la constraint height. Después, con ctrl pulsado arrastra el puntero desde  View Controller y suelta sobre la constraint height, en el menú flotante selecciona redView_Height.

Recuerda que también debes realizar la conexión del IBOutlet de nuestra view roja. Échale un vistazo a la siguiente imagen, donde verás como realizamos las dos conexiones:

auto layout adding outlet

Al realizar la conexión de la constraint con el IBOutlet redView_Height, podremos actualizar el valor de la constraint desde cualquier parte de nuestro código.

El último paso que tendremos que realizar será añadir el código donde asignaremos un valor diferente a la constraint en función de si estamos en portrait o en landscape.

Abre el fichero ViewController.m y añade este método:

El método willAnimateRotationToInterfaceOrientation es un método de la clase UIViewController que se llama cada vez que el dispositivo cambia de orientación.

Cuando el dispositivo se encuentre en posición landscape, la constraint redView_Height valdrá 100.

Cuando el dispositivo se encuentre en posición portrait, la constraint redView_Height valdrá 330.

Date cuenta que para asignar el valor a una constraint debes acceder a su propiedad .constant.

Por último, siempre que quieras actualizar los valores de las constraints de una view deberás llamar al método setNeedsUpdateConstraints. En nuestro caso, como la constraint corresponde a la view redView, deberemos llamar a este método desde dicha view.

Ejecuta nuestra aplicación y comprueba que la view roja modifica su height cada vez que hacemos un cambio de orientación en el simulador de Xcode.

Puedes comprobar que funciona correctamente cambiando el valor de la constraint de 100 a 10 en la posición landscape y al ejecutar la app, verás que la height de la view roja es mucho menor:

auto layout captura43

No te preocupes si no has comprendido bien este último ejemplo, en el próximo tutorial trataremos en mayor profundidad como controlar las constraints y el Auto Layout mediante código, en lugar de hacerlo a través de Interface Builder.

4. Resumen Final

En este tutorial has podido ver:

  • Una forma nueva de añadir constraints a tus views y como modificarlas de forma rápida a través de Interface Builder.
  • Has entendido los diferentes tipos de constraints que existen.
  • También has visto como eliminar rápidamente cualquier constraint.
  • Además hemos explicado como modificar constraints mediante código en tiempo de ejecución.

Espero que estos ejemplos te estén ayudando a comprender cada vez mejor Auto Layout.

5. ¿Donde ir ahora?

Si quieres ir un paso más allá en el manejo de AL, puedes acceder a este otro tutorial, donde explicamos como manejar AL únicamente mediante código.

Estos ejemplos que hemos realizado son una primera toma de contacto con Auto Layout. Existen otras funcionalidades más avanzadas que veremos más adelante como las Prioritys o el Auto Layout Visual Format Language.

Sigue atento a las siguientes publicaciones de Efecto/Apple ya que trataremos estos temas en siguientes tutoriales.

Para cualquier duda, tienes los comentarios más abajo.

Como siempre, gracias por leer Efecto/Apple y si este post te ha servido de algo por favor compártelo para que pueda llegar a más gente.

Etiquetas:
Sin comentarios

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.