Android: ¿Qué cambios trae la versión 1.1.0 de ConstraintLayout?

En post anteriores ya explicamos los conceptos básicos sobre este layout, en esa ocasión, la versión que utilizamos fue la 1.0.2. Desde Marzo de 2017, Google está trabajando en una nueva release de dicha librería con el fin de aportar nuevas funciones y corregir errores ya conocidos de la versión anterior. Sin embargo, se está retrasando considerablemente ya que la última beta (v5) ha sido publicada el 8 de Febrero de 2018.

El objetivo de este post es reunir los cambios que aporta esta nueva release para explotar el máximo rendimiento de este layout.

Añadirlo a nuestro proyecto

Debemos añadir a nuestro fichero build.gradle del proyecto el siguiente repositorio:

Además, debemos añadir la dependencia en nuestro fichero build.gradle de nuestro módulo:

Elementos a destacar

1.- Barriers.

Se trata de un componente que hace referencia a múltiples widgets que se le pueden asignar, creando una barrera virtual en el widget más extremo en el lado que se le haya indicado. Puesto que puede ser un poco lioso de explicar, vamos a detallarlo paso a paso, y finalmente lo reforzaremos con un vídeo.

Añadir Barrier

Especificamos su dirección

Una vez especificado esto, podemos asignar las vistas a las que se le aplicará el Barrier. Al tratarse de una barrera virtual, podemos anclar constraints al mismo.

Para una mejor aclaración, en el siguiente vídeo podemos verlo con más detalle.

2.- Group.

Se trata de un componente que puede agrupar a otros widgets con el fin de que se puedan aplicar las mismas acciones a todos. Por ejemplo, si tenemos un conjunto de vistas que siempre se ocultan a la vez en nuestra app, podemos agruparlas en un group y ejecutar dicha acción sobre el grupo.

Usaremos la propiedad “app:constraint_referenced_ids”, donde especificaremos todos los ids que contendrá el group. Es importante destacar que deben ir separados por coma.

Ej:

app:constraint_referenced_ids="textView1,textView2"

¿Cómo se añade?

Simplemente debemos hacer click con botón derecho y posteriormente “Helpers” → “Add Group”

Para incluir las vistas dentro del grupo, simplemente tendremos que seleccionarlas y arrastrarlas hacia el grupo.

Como en el caso anterior, todo queda mejor detallado en el vídeo.

3.- Placeholder.

En sencillas palabras, es un lugar donde podemos mover/trasladar otra vista. Es posible crear una vista virtual y establecer su contenido dinámicamente haciendo uso del método setContent().

A continuación, crearemos un ejemplo de uso:

Añadimos el PlaceHolder justo encima de un botón centrado

Añadimos las vistas que vamos a alternar en nuestro placeholder

Creamos dos layouts, uno anclado arriba a la izquierda de color rojo con id “viewRed” y otro anclado arriba a la derecha de color azul con id “viewBlue”. Ambos con tamaño 40dp tanto de alto como de ancho.

Añadimos la funcionalidad al botón

Simplemente establecemos que al hacer click sobre el botón, iremos alternando el contentId del Placeholder entre un layout y otro. Además, usaremos TransitionManager para crear una animación de traslación de una vista a otra, es importante destacar que el método que usaremos está a partir de la API 19 (KITKAT) en adelante.

Código del botón

Debido a que el Placeholder tiene sus propiedades como “match_constraint”, cuando las distintas vistas sean establecidas en él, pasarán automáticamente a tener las mismas propiedades.

Como podemos ver en el siguiente vídeo, las animaciones son automáticas y no necesitan de código adicional.

4.- Dimensiones porcentuales.

Es posible establecer altos y anchos porcentuales en las propiedades de las vistas, para ello debemos establecer lo siguiente:

• Las dimensiones deberían estar match_constraint (0dp)
• Establecer layout_constraintWidth_percent ó layout_constraintHeight_percent con valores entre 0 y 1.

5.- Guidelines.

Tenemos una nueva posibilidad de crear líneas que sirven de guía donde podemos anclar nuestros elementos mediante constraints.

¿Cómo se crean?

Debemos hacer click con el botón derecho del ratón sobre nuestra vista blueprint de nuestro XML. Podemos añadir tanto guidelines verticales como horizontales.

Tipos

Tenemos 3 tipos:

• Línea con respecto a un margen con el lado derecho del padre. Especificaremos la distancia en dp.
• Línea con respecto a un margen con el lado izquierdo del padre. Especificaremos la distancia en dp.
• Posición relativa con respecto a un porcentaje con respecto al padre. Especificaremos el porcentaje con respecto al padre.

Para cambiar el tipo, simplemente debemos hacer click en el indicador circular que tiene la guideline, en la imagen siguiente podemos ver un ejemplo.

En el siguiente vídeo podemos ver un ejemplo más detallado:

6.- Circular constraints.

Por fin podemos anclar elementos al centro de otro, además, es posible especificar su ángulo y distancia con respecto a él. De esta forma, permite posicionar elementos de forma circular a otros.

Los atributos que necesitaríamos serían:

• layout_constraintCircle. Indica la referencia a otro widget, por eso llevará el id del mismo.
• layout_constraintCircleRadius. Especifica la distancia al centro del otro componente que hemos referenciado.
• layout_constraintCircleAngle. Tendrá el ángulo respecto al otro componente, permite un valor entre 0 y 360.

A continuación, podemos ver un vídeo con lo anteriormente comentado.

Conclusión

Cada vez tenemos más componentes que hacen que ConstraintLayout sea más potente y nos proporcione todo lo necesario para crear nuestros layouts de una forma más fácil y casi sin tocar código. Espero que os haya gustado.