Android — Explorando ConstraintLayout (2)
Tags: androiddevelopers, androiddevelopment, constraintlayout, android
Published: 2019-06-11 14:42:21

---
title: Android — Explorando ConstraintLayout (2)
published: true
tags: android-developers,android-development,constraintlayout,android
canonical_url: https://medium.com/kotlin-dev-reactor/android-explorando-constraintlayout-2-986fa5fee49a
---

### Android — Explorando ConstraintLayout (2)

#### Dimensionando y distribuyendo elementos

![](https://cdn-images-1.medium.com/max/1024/1*g4C79VlwIMzJsfzs6DjVYw.png)

Bueno, bueno! aquí va la segunda parte. A medida que vas aprendiendo sobre ConstraintLayouts verás que siempre habrá algo nuevo que comentar.

[Android — Explorando ConstraintLayout (1)](https://dev.to/devpicon/android-explorando-constraintlayout-1-4dkl-temp-slug-7527726)

Antes de pasar a hablar sobre el dimensionamiento de elementos (_View sizing_) dentro de los ConstraintLayouts, vamos a aportar algunos datos ¿históricos?:

- Google introdujo los ConstraintLayout en el[Google I/O 2016](https://www.youtube.com/watch?v=sO9aX87hq9c), o sea que ya llevamos algunos añitos con este componente encima.
- Ya vamos en la versión 2.0 de este componente también con algunas nuevas características que mencionaré en un artículo posterior.
- Recuerda que la idea de usar ConstraintLayout es evitar la sobreanidación de elementos o vistas en nuestras pantallas y con ello mejorar el tiempo que demora el sistema en mostrarlas.

Ahora sí, sigamos con lo nuestro…

#### View Sizing

![](https://cdn-images-1.medium.com/max/1024/1*0uoCkIWNHqs3LRpDbofz4Q.png)<figcaption>El dimensionamiento de elementos en sus tres formas: wrap content, fixed size y match constraint</figcaption>

Cuando trabajamos con vistas habitualmente tenemos tres formas de fijar el tamaño o dimensión de ellas:

- **_Wrap Content _** — Nos permite ajustar el tamaño de la vista a su contenido. Ej. android:layout\_width="wrap\_content"
- **_Fixed Size_**  — Fijamos un tamaño fijo. Ej. android:layout\_width="128dp"
- **_Match Parent_**  — Hacemos que la vista ocupe el tamaño del contenedor padre. Ej. android:layout\_width="match\_parent"

Pero cuando trabajamos con elementos dentro de los ConstraintLayouts, debemos tener especial cuidado con el uso de **_Match Parent_** ¿Por qué? Porque podrías obtener comportamientos inesperados. En su lugar, hay una forma de fijar el tamaño obteniendo un resultado similar (aunque se asemeje más al deprecado **_Fill Parent_** ) que se conoce como **_Match Constraint_**.

- **_Match Constraint _** — Hacemos que la vista abarque todo el tamaño del contenedor o que abarque el tamaño disponible entre dos vistas; si y solo si fijamos los puntos de conexión de ambos lados de una vista hacia los de su padre (horizontal o verticalmente), o hacia otros elementos, y adicionalmente se establece el tamaño de la vista en 0dp. Ej. Para conseguir el mismo resultado de android:layout\_height="match\_parent" usaríamos el siguiente conjunto de atributos:  
android:layout\_height="0dp"  
 android:layout\_constraintTop\_toTopOf="parent"  
 android:layout\_constraintBottom\_toBottomOf="parent"

Tengamos siempre en mente que la idea de usar _ConstraintLayout_ y sus propiedades también es ganar flexibilidad.

#### Dimension Ratio

Este _constraint_ aplicable a los **ImageView** te permitirá indicarle la proporción deseada que mantendrá la imagen, tal como lo muestro en la imagen que aparece a continuación.

![](https://cdn-images-1.medium.com/max/1024/1*CSSgGex8mGp9SNDC8UcawA.png)<figcaption>Dimension Ratio</figcaption>

#### Chains

El concepto de _chain_ viene de generar _constraints_ “circulares”, es decir, teniendo dos elementos además de tener conexiones hacia los extremos, tienen conexiones entre sí. Existen varios estilos que se pueden establecer para los elementos que vayamos a anidar:

- **Packed**  — nos permite “empaquetar” los elementos para que todos actúen como si fueran un solo bloque.
- **Spread ** — es el encadenamiento por defecto, distribuye los elementos de forma concistente en el espacio disponible entre los _constraints_ extremos.
- **Spread\_inside**  — en este caso los elementos extremos se situarán casi junto a sus límites exteriores y el resto de elementos se distribuirán en el espacio que hay entre los elementos extremos.
- **Weighted**  — este último basado en el peso que le coloquemos a cada elemento y en combinación con _match\_constraint_ nos permitirá distribuir el ancho o alto de los elementos para llenar el espacio en el que se encuentren.

![](https://cdn-images-1.medium.com/max/1024/1*GXxCwaUMlJeKziXpTUYMHw.png)<figcaption>Chain packed style</figcaption>

![](https://cdn-images-1.medium.com/max/1024/1*-t0IUnmm-wg5u7_ShHwPUA.png)<figcaption>Spread chain style</figcaption>

![](https://cdn-images-1.medium.com/max/1024/1*YibN5_ThbIFOfZ-RGEhC8A.png)<figcaption>Spread inside chain style</figcaption>

#### Barrier

Este componente es super genial. Establece una “pseudo-barrera” que contará con referencias a los elementos que lo podrán mover. En el ejemplo que coloco a continuación, presten atención inicialmente al atributo barrierDirection el cual establecerá la dirección en el que la barrera se moverá (en este ejemplo será hacia el final), luego con el atributoconstraint\_referenced\_ids, consigo que la barrera esté ligada al _TextView_ que se encuentra a la izquierda. Finalmente, establecí un _constraint_ lateral del segundo _TextView_ hacia la barrera.

![](https://cdn-images-1.medium.com/max/1024/1*L181QtCW4rpeeKYoYU6epQ.png)<figcaption>Barrier horizontal</figcaption>

Aquí podrán apreciar cómo se comportan nuestros elementos cuando el contenido del _TextView_ izquierdo cambia. Observen cómo el _TextView_ derecho va ajustando su contenido.

![](https://cdn-images-1.medium.com/max/1024/1*H6Ivnwvy2W1jR8jgpeOenQ.gif)

#### Circular constraint

Finalmente, los _constraints_ circulares nos permitirán distribuir elementos en función a otro elemento base. Para conseguir ello, necesitaremos establecer el ángulo con el atributolayout\_constraintCircleAngle, la longitud del radio con layout\_constraintCircleRadiusy el elemento base de referencia mediante layout\_contraintCircle.

![](https://cdn-images-1.medium.com/max/1024/1*OEizJ6Rs5JUau1_xMxWE6Q.png)

#### Conclusión

Hasta aquí tenemos bastantes elementos para jugar y seguir transformando nuestros _layouts_. Al menos en mi experiencia actual, no he tenido problemas para ir convirtiendo mis _layouts_ antiguos construidos mediante varios _RelativeLayouts_ y _LinearLayouts_ a _ConstraintLayouts_. Como lo comentamos anteriormente, el tiempo de cómputo de nuestras pantallas se reducirá especialmente cuando haya elementos que cambien su contenido dinámicamente.

Les comparto el enlace del proyecto en el que estuve armando los ejemplos junto con una demo aplicando todo junto.

[DevPicon/constraint-layout-lab](https://github.com/DevPicon/constraint-layout-lab)

También, no hace mucho hice un _Live Stream_ para la comunidad [GDG Santo Domingo](https://www.meetup.com/es-ES/GDG-Santo-Domingo/) en el que explico sobre los temas de este post y del [anterior](https://dev.to/devpicon/android-explorando-constraintlayout-1-4dkl-temp-slug-7527726).

{% youtube DNBGgQsDJeo %}

#### Referencias

- Android Jetpack  
[https://developer.android.com/jetpack/](https://developer.android.com/jetpack/)
- Build a Responsive UI with ConstraintLayout  
[https://developer.android.com/training/constraint-layout/](https://developer.android.com/training/constraint-layout/)

* * *