fbpx
 

Domina Auto Layout como un experto [Parte 1]

Domina Auto Layout como un experto [Parte 1]

1. Introducción

Dominar Auto Layout es fundamental para convertirte en un Desarrollador iOS experto. De nada sirve que seas muy bueno programando si luego no eres capaz de hacer que la interfaz de tu aplicación se adapte a los diferentes tamaños de dispositivos donde se va a ejecutar.

En anteriores tutoriales hemos realizado una Introducción a Auto Layout. Si no has tenido tiempo de echarles un vistazo, ahora es un buen momento de hacerlo.

Si no tienes experiencia con Auto Layout, es preferible que comiences por esos tutoriales y una vez que hayas visto su funcionamiento básico vuelvas aquí para aprovechar éste al máximo.

Puedes acceder a los tutoriales de Introducción a Auto Layout desde aquí.

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

En tutoriales anteriores vimos como utilizar Auto Layout directamente desde la interfaz gráfica de los storyboards.

Hoy, lo que vamos a ver, es como utilizar Auto Layout directamente por código.

Una vez que hayas seguido este tutorial, serás capaz de:

  • Dominar el VFL (Visual Format Language)
  • Hacer que tus views modifiquen su posición en tiempo de ejecución
  • Controlar cualquier cambio de orientación en los dispositivos, adaptando tu interfaz
¡Comenzamos!

3. Conceptos Iniciales

Antes de comenzar a programar, es necesario hacer una pequeña introducción sobre los conceptos con los que vamos a trabajar.

VFL(Visual Format Language)

El VFL es la base de Auto Layout mediante código. Se trata de un lenguaje muy sencillo, que nos permite definir las constraints de los elementos de nuestra interfaz.

Por ejemplo, para definir con VFL una constraint que especifique que una view debe tener un width de 200 pixeles, haremos esto:

Si queremos especificar que su height sea de 150 pixeles, lo haremos así:

La primera letra en mayúscula nos sirve para definir la dimensión que queremos modificar:

  • H: Eje Horizontal
  • V: Eje Vertical

A continuación especificamos el elemento al que queremos añadirle nuestra constraint. En este caso: view.

Por último especificamos el valor de la constraint: 200 ó 150, por ejemplo.

Clase NSLayoutConstraint

Las constraints son objetos de la clase NSLayoutConstraint. Esta será la clase con la que trabajemos en los siguientes ejemplos.

Cuando queramos definir una nueva constraint, usaremos el método constraintsWithVisualFormat:options:metrics:views: de la clase NSLayoutConstraint.

Cuando queramos añadir una constraint a una view, usaremos el método addConstraints:

Cuando queramos eliminar una constraint de una view, usaremos el método removeConstraints:

Propiedad translatesAutoresizingMaskIntoConstraints

Olvidarse de esta propiedad de nombre casi infinito, es uno de los problemas más comunes cuando se comienza a trabajar con Auto Layout a través de código.

Si creamos alguna view mediante código, como haremos en nuestros ejemplos, debes asegurarte de poner esta propiedad a NO. Esto se debe, a que cuando creas una view mediante código, se crean automáticamente las constraints de esa view. Estas constraints creadas por defecto pueden entrar en conflicto con las que creemos nosotros, por lo que siempre, al crear cualquier view, tendrás que hacer esto:

Si has creado las views arrastrándolas directamente a un storyboard o a un .xib, es decir, a través de la interfaz gráfica y no mediante código, no tienes que preocuparte de esta propiedad, ya que Interface Builder se encarga de setearla a NO automáticamente.

Con esta pequeña introducción, ya estás preparado para comenzar con los ejemplos. Allá vamos.

4. Proyecto de Inicio

Para llevar a cabo este tutorial es preferible que descargues un proyecto de inicio que he creado para ti. Este proyecto tiene todo lo necesario para que puedas comenzar con el tutorial.

Puedes descargarlo desde aquí.

Una vez descargado, ábrelo y accede al fichero ViewController.m. Puedes ver que hay creadas dos propiedades:

Estas dos views serán con las que trabajemos en todos los ejemplos de este tutorial. Veremos como cambiar sus posiciones y sus tamaños, utilizando para ello Auto Layout directamente por código.

Además de estas dos propiedades, también puedes ver que hay un método setupViews:. Este método lo único que hace es crear las views redView y blueView y darles a cada una su color de fondo correspondiente.

Date cuenta que en este método, en las 2 views que hemos creado, hemos establecido la propiedad translatesAutoresizingMaskIntoConstraints a NO:

En el apartado 3. Conceptos Iniciales, ya hemos explicado porque debemos hacer esto.

Para organizar el código en nuestro proyecto, a medida que vamos avanzando en el tutorial, crearemos un método por cada uno de los ejemplos que realicemos.

Si ejecutas este proyecto, verás que no aparece nada en pantalla. Esto se debe a que, aunque las views ya han sido creadas, todavía no hemos especificado su tamaño, por lo que ahora mismo al tener un height = 0 y un width = 0, no aparecen en pantalla. Todavía no hemos especificado sus dimensiones, porque esto es precisamente lo que vamos a hacer a continuación en nuestro primer ejemplo.

5. Ejemplo I

En ese primer ejemplo, lo que haremos será darle un tamaño determinado a nuestra redView y colocarlo en una posición determinada en pantalla.

Concretamente queremos que la redView tenga un tamaño de 100×100 y esté ubicada a 20 del borde izquierdo de su superview y a 30 del borde superior de su superview.

Como hemos dicho que vamos a crear un método por cada uno de los ejemplos de este tutorial, lo primero que debes hacer es crear un nuevo método llamado example1:, justo a continuación del método setupViews:

A continuación irás viendo el código que debes ir añadiendo a este método.

Lo primero que haremos será crear un diccionario que asocie una clave a la view que vamos a usar con VFL:

En este caso, hemos utilizado la clave “redView” para identificar a nuestra view roja.

Después, crearemos las 2 constraints de tamaño (width y height):

Vamos a explicar lo que acabamos de hace aquí con VFL. Con V especificamos que estamos estableciendo el height de la view y con H especificamos su width. Es fácil de recordar, V=Vertical y H=Horizontal.

Además entre corchetes tenemos que especificar la view a la que le estamos aplicando el constraint. Podemos usar la clave “redView”, porque en la linea anterior la hemos asignado a self.redView.

Por último, entre paréntesis especificamos el valor que queremos darle a esta constraint. En nuestro caso, 100 de ancho y 100 de alto.

Una vez que hemos creado las 2 constraints de tamaño, debemos añadirlas a nuestra redView:

En tutoriales anteriores, vimos que para definir correctamente las constraints de una view, necesitamos darle al Auto Layout la información suficiente para obtener el tamaño y la posición. Ya le hemos dado información del tamaño, así que nos falta especificar la posición de nuestra redView:

Como puedes ver, hemos añadido las constraints de la misma forma que hemos hecho antes. La parte más importante de este último trozo de código es la del VFL. Por ejemplo, ¿qué quiere decir esto?

Quiere decir, que nuestra redView estará colocada a 20 pixeles de la parte izquierda de su superview. Esto es así, porque | representa a la superview del objeto que aparezca entre corchetes. Además, al utilizar H: sabemos que nos estamos moviendo en el eje horizontal. Por último, al aparecer primero | y luego redView, sabemos que redView debe estar colocada a la derecha de su superview.

Si en lugar de eso, escribiéramos esto:

Querría decir, que nuestra view se encuentra a 20 de la parte derecha de su superview, ya que en este caso, [redView] aparece antes que |.

Si no especificamos una distancia, como en este caso:

iOS usará una distancia por defecto que hará que nuestras views no estén pegadas unas con otras.

Recuerda que el carácter “-” siempre debe utilizarse para separar | de la view.

Para acabar nuestro ejemplo, una vez que hemos creado las constraints de tamaño, tendremos que añadirlas a nuestra view.

OJO: En este caso, no debemos añadir las constraints a nuestra redView sino que tendremos que añadirlas a su superview. Esto es así debido a que es responsabilidad de la superview especificar las posiciones de sus views hijas.

Las constraints de tamaño hay que añadirlas a la propia view

 

Las constraints de posición hay que añadirlas a su superview

Por tanto, añadiremos las constraints de posición a la superview de redView, que en este caso es self.view:

Una vez que hemos acabado nuestro Ejemplo I, para poder probarlo tendremos que llamar a nuestro método example1:. Para ello añade la siguiente linea al final del método viewDidLoad:

Ejecuta la aplicación y podrás ver que nuestra view roja se coloca correctamente en la parte superior izquierda. Deberías obtener esto:

 

auto layout post11_imagen1

 

6. Ejemplo II

En este segundo ejemplo, hay que conseguir esto:

  • La redView debe tener las siguientes carácterísticas:
    • Debe medir 100×100
    • Debe estar a 20 pixeles del borde izquierdo de su superview
    • Debe estar a 30 pixeles del borde superior de su superview
  • La blueView debe tener las siguientes características:
    • Debe medir 150×150
    • Debe estar a 10 pixeles del borde derecho de la redView
    • Debe estar a 40 pixeles del borde inferior de la redView

Como puedes ver, de cada una de las 2 views, hemos especificado su tamaño, su posición horizontal y su posición vertical. Esta es la información mínima que debemos darle a Auto Layout para que pueda colocar las views en nuestras interfaces.

Tendremos que crear un nuevo método llamado example2: que añadiremos a continuación de example1:

Dentro de este método tendrás que ir añadiendo el código que veremos a continuación.

Comenzamos por crear el array con las dos views con las que vamos a trabajar:

Después, especificamos las constraints de tamaño de la redView y de la blueView:

Añadimos estas constraints a redView y blueView:

A continuación, especificamos las constraints de posición de la redView y de la blueView:

Como puedes, ver, hemos seguido al pie de la letra las especificaciones del Ejemplo 2, para definir los VFL.

En el primer VFL hemos especificado que en sentido vertical, estará nuestra superview, luego a una distancia de 30 pixeles vendrá nuestra redView y después a una distancia de 40 pixeles de nuestra redView, vendrá nuestra blueView.

En el segundo VFL hemos especificado que en sentido horizontal, estará nuestra superview, luego a una distancia de 20 pixeles vendrá nuestra redView y después a una distancia de 10 pixeles de nuestra redView, vendrá nuestra blueView.

Para terminar, tendremos que añadir estas constraints. Recuerda que al tratarse de constraints de posición, debemos añadirlas a la superview de redView y blueView:

Para poder ejecutar este Ejemplo 2, deberás comentar la linea del viewDidLoad: donde hacías la llamada al método example1: y añadir a continuación la llamada a nuestro método example2:. Es decir, tu método viewDidLoad: debería tener este aspecto para poder ejecutar el Ejemplo 2:

Ejecuta el proyecto y comprueba que las views se colocan perfectamente en nuestra aplicación. Debes obtener este resultado:

 

auto layout post11_imagen2

 

7. Ejemplo III

Para nuestro tercer y último ejemplo, el objetivo es el siguiente:

  • La redView debe tener las siguientes carácterísticas:
    • Debe medir 200×200
    • Debe estar a 40 pixeles del borde izquierdo de su superview
    • Debe estar a 120 pixeles del borde superior de su superview
  • La blueView debe tener las siguientes características:
    • Debe medir 50×150
    • Debe estar a 30 pixeles del borde derecho de la redView
    • Debe estar alineada verticalmente por su borde superior con la redView

Como puedes ver, la parte interesante de este ejemplo, es el alineamiento vertical de la blueView. Para poder hacer esto, utilizaremos el parámetro options: del método constraintsWithVisualFormat:. Lo verás a continuación en el ejemplo.

Como siempre, tendrás que crear un nuevo método llamado example3: que añadiremos a continuación de example2:

Dentro de este método tendrás que ir añadiendo el código que veremos a continuación.

Comenzamos por crear el array con las dos views con las que vamos a trabajar:

Después, especificamos las constraints de tamaño de la redView y de la blueView:

Añadimos estas constraints a redView y blueView:

A continuación, especificamos las constraints de posición de la redView y de la blueView:

Como ves en el código, a la hora de definir la constraint de posición horizontal de las views, hemos añadido en el parámetro options, la opción NSLayoutFormatAlignAllTop. Esto nos permite alinear ambas views por su borde superior.

Para terminar, tendremos que añadir estas constraints a la superview de redView y blueView:

Para poder ejecutar este Ejemplo 3, deberás comentar la linea del viewDidLoad: donde hacías la llamada al método example2: y añadir a continuación la llamada a nuestro método example3:. Es decir, tu método viewDidLoad: debería tener este aspecto para poder ejecutar el Ejemplo 3:

Ejecuta el proyecto y comprueba que las views se alinean correctamente por su borde superior. Si consigues lo que ves en la imagen, es que lo has hecho perfecto:

 

auto layout post11_imagen3

 

8. Resumen Final

Es importante que te hayas quedado con el proceso completo, a la hora de crear constraints mediante código. Se podría resumir en estos pasos:

  1. Establecer la propiedad translatesAutoresizingMaskIntoConstraints = NO a nuestras views
  2. Crear el diccionario con las views con las que vamos a trabajar
  3. Definir las constraints de tamaño de las views
  4. Definir las constraints de posición de las views
  5. Añadir las constraints de tamaño a nuestras views
  6. Añadir las constraints de posición a nuestra superview

Puedes descargar el proyecto completo que hemos desarrollado en este tutorial desde aquí.

9. Has terminado el Tutorial

Has llegado hasta el final de este tutorial, ¡ENHORABUENA!

Como recompensa, te ofrezco unos segundos de risas… Siempre vienen bien.

Pulsa en el siguiente botón y luego dale al play:

[ejercicio titulo = “Subidón de azúcar” num=”1″]

View this post on Instagram

Happy Friday 😁

A post shared by MAKEUP BY MARIO (@makeupbymario) on


[/ejercicio]

10. ¿Dónde ir ahora?

Si lo que hemos visto te ha servido para comprender algo mejor Auto Layout, no te pierdas la segunda parte de nuestro tutorial, donde veremos más ejemplos, que te pueden ser muy útiles para comprender todas las posibilidades que ofrece Auto Layout a través de código.

Si no quieres perderte ningún tutorial de EfectoApple, puedes suscribirte a nuestra newsletter, a través del formulario que tienes al final de este post.

Si este artículo te ha parecido útil, por favor, compártelo en tus redes sociales, para que EfectoApple pueda llegar cada vez a más lectores.

Si tienes cualquier duda, puedes usar los comentarios de la parte inferior.

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.