Kotlin: FlexBoxLayout #AndroidMeetsKotlin

En esta ocasión, vamos a explicar un componente algo desconocido y que nos puede simplificar la tarea de implementar una funcionalidad en nuestra app. Ni que decir tiene que todo nuestro desarrollo será en Kotlin. ¡Vamos a ello!

FlexBoxLayout, ¿qué es?

Este layout se basa en un componente web basado en el modelo de disposición flexible. Los elementos contenidos en él se pueden colocar en cualquier dirección y pueden "flexionar" su tamaño, ya sea para rellenar el espacio no utilizado o contraerse para evitar desbordar el elemento principal. Permite alineaciones verticales y horizontales haciéndola muy versátil y fácil de adaptar a nuestros diseños.

¿En qué casos me puede venir bien?

Cada vez son más los casos en los que vemos que quieren adaptar un componente de web a móvil. Por ejemplo, tenemos la disposición de etiquetas en un blog:

Antes, teníamos que crear un componente que en función del ancho de la vista que fuésemos a introducir y los elementos ya representados, pudiese calcular si era posible o no introducirla en dicha sección o saltar a la siguiente. Esto, podría suponer un tiempo extra en nuestros desarrollos, el cual es muy valioso.

Además de este ejemplo se puede aplicar a muchos más, durante el desarrollo de este post vamos a ver un par de ejemplos reales.

Propiedades

No vamos a pararnos mucho en todas sus propiedades ya que podemos verla en la documentación de la librería. En resumidas cuentas, vamos a nombrarlas una por una y dando un pequeña explicación.

Para el componente en sí, tenemos las siguientes propiedades:

• flexDirection. Establece la dirección del eje principal, es decir, horizontal o vertical.
• flexWrap. Indica si el contenedor tendrá una sóla línea o varias.
• justifyContent. Indica la alineación de los elementos en el eje principal.
• alignItems. Alineación de los elementos con respecto al eje X.
• alignContent. Indica la alineación de las líneas dentro del componente.
• showDivier. Muestra un divisor entre los elementos alineados.
• dividerDrawable. Establece el recurso con el que se pintará nuestro drawable.

Además, dispone de las siguientes propiedades para los elementos contenidos en él:

• layout_order. Cambia el orden de los elementos contenidos en él.
• layout_flexGrow. Indica cuánto puede crecer un elemento dentro de su línea.
• layout_flexShrink. Indica cuánto puede reducirse un elemento dentro de su línea.
• layout_alignSelf. Alineación a lo largo del eje X. Se puede especificar con alignItems, pero si está establecido a "auto" la alineación con el eje X será sobreescrito.
• layout_flexBasisPercent. Establece la longitud inicial de un elemento de forma relativa. Si este valor es especificado, anula la longitud especificada en layout_width o layout_height.
• layout_minWidth / layout_minHeight. Establece los valores mínimos para altura y anchura.
• layout_maxWidth / layout_maxHeight. Establece los valores máximos para altura y anchura.
• layout_wrapBefore. Si el valor que se le pasa es true, indicará que el elemento empezará en una línea nueva.

Ejemplo básico

En nuestro app de ejemplo vamos a crear dos 2 activities, una con el FlexBoxLayout normal y otro aplicando FlexBoxLayoutManager a un recyclerview. El código de la app está en el siguiente enlace.

Código común

Ambas implementaciones utilizan una custom view llamada FlexItemView. Contiene un TextView y un icono de cerrar, el cuál, usaremos para eliminar componentes. El código de la vista sería:

Dependencia

Incluiremos la dependencia de la librería en el fichero build.gradle de nuestro módulo app. Es importante saber que la posibilidad de añadir el FlexBoxLayoutManager está disponible a partir de la v0.3.2.

FlexBoxLayout normal

Es importante saber que éste componente NO tiene reutilización de vistas, por lo que debemos usarlo en casos donde o bien nuestras vistas sean muy simples o tengamos un bajo número de elementos. Si lo metemos dentro de un ScrollView debemos ser conciente que el rendimiento de nuestra app será mucho menor que si usamos el ejemplo del RecyclerView. El código sería el siguiente:

• Incluímos el elemento y lo configuramos. En nuestro caso queremos que se vea en vertical, cuando se llegue al final de la línea que salte a una nueva y tanto la alineación del componente como la de sus hijos, alineados al inicio.

• Referenciamos nuestro FlexBoxLayout en nuestra activity.

• Añadimos vistas al hacer click en el botón de aceptar y las eliminamos al hacer click en la X.

RecyclerView y FlexBoxLayoutManager

Este caso SÍ tiene reutilización de vistas por lo que nuestras apps no verán afectados su rendimiento, simplemente debemos usar un adapter y crear un LayoutManager de tipo flexbox.

El código sería el siguiente:

• Incluímos un RecyclerView normal y le configuramos su FlexBoxLayoutManager, el cuál, queremos que sea vertical, y esté alineado al inicio sus componentes.

• Creamos el adapter y los métodos de añadir y borrar elementos.

Conclusión

Se trata de un componente muy completo que aporta una gran capacidad de personalización, por lo que podremos usarlo prácticamente en todas nuestras apps. Y recordad siempre que si necesitamos que nuestro componente tenga un gran número de elementos usaremos entonces el RecyclerView con el FlexBoxLayoutManager en lugar del componente normal. Espero que os haya gustado y os sea de utilidad.