Creación de layouts pt1: ViewGroups

Published in

OpenLabPERU

5 min readMar 21, 2021

Introducción

En este episodio hablaremos acerca de los view groups que podremos encontrar en Android, el motivo final será poder reconocer los diferentes contenedores incluidos en Android. Empecemos por nuestra valiosa teoría :D

Definición de View

La interfaz de usuario (UI) que aparece en una pantalla de un dispositivo Android consta de una jerarquía de objetos denominados vistas: cada elemento de la pantalla es una vista. La clase View representa el bloque de construcción básico para todos los componentes de la IU y la clase base para las clases que proporcionan componentes de IU interactivos como botones, casillas de verificación y campos de entrada de texto.

El código Java/Kotlin que muestra y controla la interfaz de usuario está contenido en una clase que amplía Activity. Una actividad generalmente se asocia con un diseño de vistas de la interfaz de usuario definidas como un archivo XML (lenguaje de marcado extendido). Este archivo XML generalmente recibe el nombre de su actividad y define el diseño de los elementos.

Android ViewGroups

Una vez definido el componente View, procederemos a hablar de los contenedores de otras vistas — ViewHolders. Estos viewholders nos ayuda a sostener y posicionar otras vistas, dependiendo de las características de dicho ViewHolder. Los contenedores más importantes son:

LinearLayout: Es un contenedor que ordena otras vistas de manera horizontal o vertical en una sola fila/columna
FrameLayout: Está diseñado para bloquear un área en la pantalla para mostrar un solo elemento. Generalmente, debe usarse para contener una sola vista secundaria, porque puede ser difícil organizar las vistas secundarias de una manera que sea escalable a diferentes tamaños de pantalla sin que los niños se superpongan entre sí. Sin embargo, puede agregar varios niños a un FrameLayout y controlar su posición dentro del mismo asignando gravedad a cada child, utilizando el atributo android:layout_gravity.
RelativeLayout: Es un contenedor que muestra childviews en posiciones relativas. La posición de cada vista se puede especificar como relativa a elementos hermanos (como a la izquierda o debajo de otra vista) o en posiciones relativas al área principal RelativeLayout (como alineada en la parte inferior, izquierda o centro).
ConstraintLayout: ConstraintLayout te permite crear diseños grandes y complejos con una jerarquía de vistas plana (sin grupos de vistas anidadas). Es similar a RelativeLayout en cuanto a que se presentan todas las vistas de acuerdo con las relaciones entre las vistas del mismo nivel y el diseño de nivel superior, pero es más flexible que RelativeLayout y más fácil de usar con el editor de diseño de Android Studio.

Luego de un poco de teoría, vamos a ver cómo implementar cada ViewGroup de manera sencilla y entretenida.

Implementando Nuestros ViewGroups

A continuación veremos las distintas implementaciones de los viewgroups principales:

LinearLayout

Este ViewGroup nos permite agrupar de manera sencilla un conjunto de componentes:

Existen dos orientaciones (horizontal y vertical), para esto probaremos ambos. Por temas prácticos incluiremos View como componentes para mostrar la diferencia.

Para nuestro primer ejemplo estamos usando un layout con orientación horizontal, desplegando dos views con distinto fondo. Como podemos notar en el código, podemos usar una propiedad child llamada weight; dicha propiedad nos permite ordenar las vistas de acuerdo a un balance de peso. En este ejemplo al tener dos vistas con el mismo peso (1–1), se mostrarán siempre de manera equivalente:

Linear layout horizontal visto en emulador

Ahora observaremos qué pasa si cambiamos de orientación:

Al ver el cambio en el layout vertical, podemos notar algunos pequeños ajustes en el código. A pesar de seguir manejando pesos, los valores de width y height han sido invertidos, preguntarán ¿Por qué? Lo que pasa es que para adaptar las vistas de acuerdo al peso, lo recomendado por google y nuestro IDE es poner la vista de orientación en 0dp (si es horizontal se coloca weigth, si es vertical se coloca en height). Ahora veremos el resultado:

FrameLayout

Ahora veremos como funciona FrameLayout, generalmente está hecho para mantener un solo contenedor o crear un viewgroup de reemplazo.

Para este ejemplo aprovecharemos ciertas propiedades de los childs para mostrar su distribución:

En este punto usamos el atributo layout_gravity, con este podemos ubicar nuestros componentes de acuerdo lo que deseemos (center, center_vertical, center_horizontal). Estas características brindadas son restringidas.

RelativeLayout

Este Component nos permite alinear de manera relativa a los diferentes hijos que posee:

A continuación observaremos algunas de las características que nos brinda relative layout:

Aquí podemos ver que usamos tanto id para identificar cada vista, y las diferentes posiciones relativas del layout. Veamos el resultado:

ConstraintLayout

Esta vista es la recomendada por google para la creación, es muy similar a RelativeLayout en cuestión de como puede ajustar los childs en posiciones relativas. La diferencia está en que puede ser mucho mas maleable y, en cuestión de procesamiento, es mucho mas optimo que hacerlo con RelativeLayout. Será con este ViewGroup que trabajaremos y entraremos a detalles en trabajos posteriores.

Conclusiones

Estos diferentes ViewGroups tienen bondades que nos ayudarán en diferentes aspectos del desarrollo y construcción del layout, es bueno conocer los distintos tipos para poder tomar una buena decisión.