ConstraintLayout - ¿Adiós al editor de XML?

Este componente incluido en la versión 2.2 de Android Studio y en el paquete de soporte de Android puede suponer el principio del fin de la edición de XML a nivel de vistas. Definiciones de márgenes, pesos, alineación de vistas, etc y todo ellos a través de la interfaz de Android Studio y sin necesidad de tocar código. Aportando un elemento muy importante (restricciones o constraints) conseguimos una muy baja anidación de vistas mejorando de esta manera el rendimiento de nuestras interfaces.

Actualmente podemos migrar todas nuestras vista de una forma muy fácil a ConstraintLayout, simplemente debemos colocarnos en la pestaña de diseño de nuestro XML y hacer click en cualquier parte de la pantalla. Acto seguido, debemos hacer clic en Convert “...” to ConstraintLayout.

En mi experiencia, no lo hace eficientemente y tiene bastantes fallos. Lo que recomiendo es que hagamos nosotros la vista y de paso, siempre podemos hacer un refactor de las mismas.

En este post explicaremos conceptos básicos necesarios para implantar este componente en nuestros diseños y además haremos varios ejemplos para que quede todo más claro. ¡Vamos a ello!

Añadirlo a nuestro proyecto

Debemos tener actualizado Android Studio a la versión 2.2 y añadir la siguiente dependencia:

dependencies {

compile 'com.android.support.constraint:constraint-layout:1.0.1'

}

Reglas básicas de las restricciones

Existen tres reglas que se deben cumplir siempre:

• Cada vista debe tener al menos dos restricciones: una horizontal y otra vertical.
• Las restricciones deben aplicarse a puntos de anclaje que compartan el mismo plano, es decir, un plano vertical de una vista puede limitarse sólo a otro plano vertical y nunca a un plano horizontal.
• Cada manejador o punto de anclaje sólo puede utilizarse para una sola restricción, pero se pueden crear varias restricciones (siempre y cuando sean de vistas diferentes) al mismo punto de anclaje.

Edición de propiedades

Cuando tenemos seleccionado un ConstraintLayout en la vista de diseño se habilita automáticamente una nueva pestaña para editar de forma cómoda todas las restricciones que hemos añadido a nuestra vista.

Las secciones 1, 2, 3 y 4 se utilizan para la definición de márgenes con respecto a otros componentes, mientras que la sección 5 se utiliza para la colocación del componente con respecto a su vista contenedora. En nuestro caso nuestra vista está centrada horizontalmente, por eso aparece un 50% con respecto a la vista padre.

Mostrar restricciones

Existe un botón que nos mostrará todas las restricciones con el fin de que podamos siempre tener un control de ellas en todas nuestras vistas. A continuación mostraremos un pequeño vídeo con el pulsado de dicho botón:

https://youtu.be/Hdzv2vFwKpw

¿Cómo centrar horizontalmente un botón en la pantalla?

En la mayoría de nuestros diseños debemos centrar componentes, y con ConstraintLayout es extremadamente sencillo, para ello simplemente hay que seguir los siguientes pasos:

1. Añadir el botón a la vista contenedora
2. Al hacer clic sobre el botón nos aparecerán cuatro indicadores o puntos de anclaje (uno por cada lado).
3. Utilizar el anclaje izquierdo y llevarlo al borde izquierdo de la vista que lo contiene, veremos como automáticamente la vista se coloca alineada a la izquierda.
4. Utilizar el indicador derecho y llevarlo al borde derecho de la vista que lo contiene, en este caso veremos como la vista ya aparecerá centrada horizontalmente.

Por si no ha quedado claro el proceso, se puede ver más detallado en el siguiente vídeo:

https://youtu.be/n0CwmvtGIDk

Crear restricciones grupales

Puesto que ya tenemos algunos conocimientos sobre este componente, a continuación vamos a hacer una jerarquía un poco compleja. Tendremos 9 botones dispersados por la pantalla y conseguiremos que se alineen de forma correcta con alineaciones grupales. Los pasos que debemos seguir son:

1. Colocamos la vista que irá en medio de los tres primeros botones alineada justo bajo el TextView.
2. Seleccionamos los tres primeros botones y los alineamos con la base “Align Baselines”.
3. Después marcamos “Expand Horizontally”, de esta forma los tres crecerán lo necesario para que ocupen todo el ancho por partes iguales.
4. Colocamos el otro botón que va en medio del otro grupo de botones justo debajo del colocado en el paso 1.
5. Repetimos el proceso 2 y 3 con el otro grupo de botones.
6. Colocamos el otro botón que va en medio del otro grupo de botones justo debajo del colocado en el paso 4.
7. Repetimos el proceso 2 y 3 con el último grupo de botones.

Después de esto tendremos todos nuestros botones perfectamente alineados y sin tener que jugar con los pesos ni jerarquías de vistas.

Adjunto un vídeo para que quede más claro todo el procedimiento.

https://youtu.be/e17ocDUv6Bo

Como se puede observar, se pueden hacer cosas complejas con este componente y sin tocar nada de código XML. Animo a todo el mundo a empezar a utilizarlo y mejorar las vistas que solemos hacer en el día a día. Espero que les haya gustado.