• slidebg1

Diseño Android: ConstraintLayout


Introducción

En la versión 2.2 del IDE Android Studio se introdujo el nuevo LayoutEditor (junto a otras novedades) que nos permitía empezar a jugar con su nuevo componente ConstraintLayout. Juntos constituyen una nueva forma de diseñar vistas para aplicaciones Android. Hace poco más de un més que la gran G distribuyó la versión 1.0 de éste componente, por lo que nos parece más que adecuado hablar sobre las posibilidades que nos ofrece y de cómo podemos sacarle el máximo partido.

Objetivo

El objetivo de esta nueva forma de trabajo es minimizar la carga de niveles de vistas en una pantalla haciendo que la carga de ésta y su rendimiento sean mucho mejores. El planteamiento es muy parecido al que nos ofrecía su hermano el RelativeLayout pero incorporando (y mejorando) algunas características propias del LinearLayout.

Posición

En este layout la posición de las vistas será relativa a otra de ellas o al propio layout, de manera que se ajusten correctamente independientemente del tamaño de la pantalla del dispositivo. También se les puede asignar una posición absoluta, pero no es la mejor manera de posicionar una vista.

Vistas cuya posición es relativa a la de otra en su mismo nivel separadas de ella por márgenes.

Vistas con posición relativa a la esquina del layout y al centro de éste respectivamente.

 

 

Tamaño

Para asignar el tamaño de una vista tenemos las opciones de siempre, tamaño fijo, ajustado a la vista (wrap_content) y ajustado al layout (match_constraint), pero además el ConstraintLayout nos da la opción de ajustar las dimensiones de las vistas mediante un aspect ratio que elijamos. Todas estas opciones se pueden seleccionar a través del Inspector de Vistas que nos ofrece el renovado editor.

De esta manera se puede configurar el tamaño de una vista y sus márgenes de manera rápida y sencilla.

¿Eso es todo?

Por supuesto que no, el selector que aparece bajo el inspector nos permitirá ajustar la posición relativa de la vista respecto al layout de manera que si quisiéramos que la vista estuviera posicionada en un punto relativo a la anchura de la pantalla podríamos desplazar este selector hasta el porcentaje que quisiéramos, de manera que la posición sería proporcional sin importar el tamaño de la pantalla del dispositivo.

Si en lugar de ello quisiéramos marcar una posición relativa para varias vistas lo haríamos utilizando un nuevo componente llamado Guideline, el cual define un punto de referencia que sus vistas hermanas podrán utilizar. En el ejemplo vemos una Guideline posicionada en un punto proporcional del 20% al ancho de la pantalla con un par de vistas ajustadas a cada lado de ella.

¿Y las posicionadas de forma lineal?

Con esta forma de trabajo se ha mejorado considerablemente la manera de posicionar las vistas de forma lineal ya que, además de la forma tradicional en que las vistas se colocan una detrás de la otra, ahora tenemos la opción de encadenarlas y decidir de qué manera las queremos distribuir en el layout. 

En el ejemplo vemos un posicionamiento lineal simple en el que las vistas se colocan a una distancia fija de la otra.

Si quisiéramos encadenar estas vistas tan sólo tendríamos que seleccionarlas y centrarlas horizontal o verticalmente, de manera que se distribuyan de la siguiente manera.

De este modo se consigue una distribución equitativa en el layout, la cual podremos cambiar para que se puedan agrupar al centro o desplazar a los bordes pulsando el botón “cadena”.

Estos casos sólo se dan para vistas que no ocupen todo el espacio en el layout, en caso de que una o varias vistas ocupen el espacio sobrante se podría regular la proporción de espacio como se hacía en el antiguo LinearLayout.

Por último

Si después de todas estas novedades te has quedado con ganas de más, aún le puedes sacar más partido a esta herramienta, el editor nos ofrece la opción de que al añadir una vista al layout se le asignen las contraints más adecuadas según su posición y la de las vistas ya existentes. También nos ofrece la posibilidad de hacer lo mismo con una vista que ya haya sido añadida al layout anteriormente.

Otra utilidad disponible es el conversor de layouts antiguos a ConstraintLayout, aunque quizá es la parte en la que más les falta trabajar al equipo de Android Studio ya que, dependiendo de la complejidad del layout los resultados serán buenos o será necesario realizar unos ajustes para que nuestras vistas queden como estaban antes de realizar el cambio.

Conclusión

Personalmente creemos que es una mejora muy importante para el mundo de las herramientas de diseño de apps que permitirá a los desarrolladores crear pantallas más complejas y de manera más rápida. Es verdad que hay que cambiar un poco el chip y aprender a utilizar el nuevo editor de Android Studio pero desde luego que vale la pena, ya que puede hacer posible que los desarrolladores nos olvidamos de que lo que estamos manejando es un archivo XML y tan sólo trabajemos de manera gráfica.

Públicado el 27/03/2017

Comparte este post: