ConstraintLayout en modo Experto
Llevamos ya unos años con el ViewGroup en el mundo de Android y ha sido de gran ayuda, pero aún existen algunas cosas que se desconocen y podrían darnos un extra al momento de hacer nuestros layouts y darle el toque faltante para un diseño espectacular.
ConstraintLayout es un ViewGroup que se introdujo en el SDK de Android en la versión 2.3 de Android Studio, y que logró hacer un gran cambio en la manera como se hacen las vistas. La idea principal de este contenedor es evitar el uso de layouts anidados y así mejorar el performance al pintar vistas complejas.
Un constraint es una relación de un objeto a otro, de una manera restrictiva o de referencia, que nos ayuda a posicionar los elementos en relación o restricción de otros.
El uso de los constraints es parecido a como se desarrolla una vista en iOS (al menos es lo que he escuchado), y permite tener una mayor flexibilidad en las distintas pantallas de los miles de dispositivos Android en el mercado.
El propósito de esta publicación es dar a conocer algunas de las herramientas que ConstraintLayout nos ofrece y un pequeño ejemplo de cada una, así que vamos directo al cód… ¡layout!.
Convertir layout
El primer truco que tenemos, es que si ya tenemos una vista que hace uso de algún otro layout, podemos fácilmente migrar los elementos a ConstraintLayout, Android Studio tiene una herramienta para esto en su editor visual.
Así de simple es como podemos migrar a ConstraintLayout, aunque en mi experiencia no conviene hacerlo con layouts complejos, ya que en ocasiones los constraints no se crean de manera efectiva y hay que revisar uno por uno.
Conceptos básicos
Antes de pasar a otros trucos, veamos un repaso a los conceptos básicos del uso del ViewGroup.
Posición relativa
Los constraints en una vista, se aplican de una manera muy parecida a como se hace con RelativeLayout:
El XML de como se hacen estas relaciones en un RelativeLayout es el siguiente:
Veamos ahora como se hace con ConstraintLayout:
Como podemos ver, las vistas tienen relación al contenedor o a otra vista en ambos layouts, la diferencia es que en RelativeLayout indicamos si la relación es al padre (alignParent…) o a otra vista (align…), mientras que en ConstraintLayout indicamos el constraint(constraintEnd_toEndOf) y después hacia que elemento (parent u otro elemento).
Márgenes
Una vez que tenemos los constraints de las vistas, es importante entender que cada elemento va a llevar un márgen y afectará solamente al constraint, si el elemento B tiene un constraint al elemento A, solamente el margen de B hará la separación de su relación, y el margen de A no afecta la distancia en el constraint de B hacia A.
El editor visual de Android Studio nos ayuda a entender los márgenes de cada uno de los elementos, y también nos permite cambiar el tamaño de la vista, sus variantes son: wrap_content, match_constraint o fixed_size, donde indicamos el tamaño (100dp por ejemplo).
Cadenas
El primer truco que es común en el uso de ConstraintLayout son las cadenas, este comportamiento es parecido a cuando usando LinearLayout ponemos pesos en las vistas, para que se autoajusten al tamaño disponible del contenedor.
Para hacer una cadena, podemos seleccionar los elementos que queremos sean parte, dar click derecho y seleccionar la opción Chains.
Es importante decir que si queremos hacer una cadena horizontal, el espacio a distribuir será horizontal, y cada elemento puede estar a distinta posición verticalmente, entonces, los elementos A, B y C serán encadenados horizontalmente, pero el elemento A se puede encontrar en la parte superior del contenedor, el elemento B al centro y el elemento C en la parte inferior.
Existen 4 modos como funcionan las cadenas, y aplican igual para horizontal o vertical, el tag que se utiliza es layout_constraintHorizontal_chainStyle para cadenas horizontales, y layout_constraintVertical_chainStyle para cadenas verticales; seguido del modo, veamos como funcionan:
- spread: se distribuye el espacio de igual manera.
- spread_inside: se distribuye el espacio entre los elementos.
- weighted: se indica un peso para cada elemento, como en LinearLayout.
- packed: los elementos se juntan y el espacio se distribuye a los extremos.
Recuerda que aquí, el espacio entre los elementos también será afectado por los márgenes de cada elemento, puedes jugar poniendo los márgenes en 0, y luego agregando a cada elemento un márgen.
Barreras y guías
Estas herramientas son de gran ayuda cuando necesitamos alinear varios elementos y pueden existir algunas dificultades en tamaños o contenido, veamos como funcionan por separado.
Barreras
Tenemos el elemento B, que su tamaño puede ser afectado por su contenido, por ejemplo, cuando tenemos una etiqueta con el texto “Automóvil” y “Car” para el idioma ingles, y otros elementos deben estár alineados, entonces una barrera nos ayudará a que todo se vea perfecto, ya que el constraint del elemento C será a la barrera, y la barrera estará protegiendo los elementos A y B, sin importar su tamaño.
Guías
Una guía tiene un comportamiento parecido a la barrera, solo que en vez de estár relacionada a elementos, lo hace en relación al contenedor, por ejemplo, a 33% del ancho disponible.
Visibilidad y Márgenes
Es posible que en ocasiones queramos ocultar algunos elementos dentro de nuestro contenedor, pero ¿qué sucede con el márgen perfecto que teníamos?. ConstraintLayout tiene una herramienta que ayuda a mantener márgenes organizados, incluso cuando las vistas cambian su visibilidad.
El elemento A tiene un márgen al contenedor de 8dp, y el márgen de B es de 16dp.
Si ocultamos el elemento A, entonces el márgen quedará en 16dp.
Pero usando layout_goneMarginStart podemos indicar que el márgen sea de 8dp cuando la visibilidad de A es gone, logrando asi mantener el diseño deseado.
Grupos
Hay ocasiones en donde para poder ocultar una sección de información, se suelen poner todos los elementos de la sección dentro de un contenedor y cambiar la visibilidad del mismo, pero para evitar el uso de layouts anidados, ConstraintLayout nos provee de un elemento no visual que es <android.support.constraint.Group />, no tiene dimensiones pero es necesario poner los tags de layout_width y layout_height; su uso se enfoca más en indicar los ids de los elementos que deseamos cambiar su visibilidad, y ese cambio lo haremos sobre el id del grupo para ver el cambio en sus elementos.
Posición circular
Este es uno de los trucos que más me ha gustado de ConstraintLayout, ya que nos permite hacer facilmente en layout lo que antes se tenía que hacer con librerías externas de vistas personalizadas.
El ejemplo a seguir es cuando tenemos un elemento que nos indica como notificación si tenemos actualizaciones, como mensajes nuevos, pero se encuentra sobre otro elemento a 45°.
Esto es simple de lograr usando layout_constraintCircle para indicar que el constraint es circular.
Después, para indicar la distancia y el ángulo se usa layout_constraintCircleRadius y layout_constraintCircleAngle respectivamente.
De esta manera podemos simplemente agregar un TextView con constraint circular a un ImageView y listo!
Existen otras herramientas para animación que vienen incluidas dentro de ConstraintLayout que dejaré para otra publicación ya que son temas que necesitan de tiempo para entender y usar. Por ahora estos trucos espero les ayude a cambiar sus vistas a ConstraintLayout o empiecen a utilizarlo en sus nuevos proyectos.
