TableLayout dinámico con Android

TableLayout dinámico con Android - Ejemplo de tabla

Hoy vamos a ver cómo crear una tabla dinámica en Android con Java, usando el elemento TableLayout. Un elemento TableLayout en Android permite crear tablas, ya sea estáticas o dinámicas.

En este caso veremos cómo crear una tabla con datos que pueden cambiar o que no siempre serán los mismos, por ello es que digo que será una tabla dinámica con Android.

TableLayout dinámico con Android - Ejemplo de tabla

Ejemplo de lo que podremos lograr con el código Java

Nota: tal vez quieras ver este tutorial sobre Tabs dinámicas en Android.

El elemento TableLayout

Para agregar columnas y filas dinámicas debemos tener un TableLayout. El mismo puede ser definido así:

En este caso le he puesto el id tableLayoutPackingList para recuperarla más tarde desde Java. Los demás atributos son más de diseño, excepto el de stretchColumns que nos permitirá tener columnas con la misma anchura.

Crear filas o rows dinámicas

Para agregar una fila a la tabla creamos un TableRow pasándole el contexto de la app. En el caso de una actividad es NombreDeActividad.this y en el caso de un fragment puede ser lo que regresa getActivity()

Diseño de la fila

Es importante definir el layout de la fila:

Con ese atributo decimos que la anchura de la fila será con el atributo WRAP_CONTENT.

Estilo de la fila

Si queremos que la fila tenga borde, primero definimos un drawable. Yo lo he colocado en res/drawable/borde_tabla.xml con el siguiente código:

Para aplicar ese estilo a la fila dinámica que estamos creando, debemos invocar a:

Agregar elementos a la fila

Ahora veamos cómo agregar columnas o celdas a la fila. Podemos agregar cualquier tipo de vista, no existe restricción.

Para añadir un elemento dinámico a la fila ya dinámica, simplemente invocamos a addView. Veamos el siguiente ejemplo en donde agrego un TextView dinámico:

Nota: recuerda que invoco a getActivity porque estoy dentro de un fragmento, si tú estás dentro de una actividad invoca con NombreDeActivity.this.

Podemos invocar a addView cualquier número de veces pasándole vistas, incluso más tablas.

Agregar fila a la tabla

Ya hemos creado la fila, y ya hemos agregado columnas. Ahora falta agregar esa fila a la tabla; para ello invocamos a addView de nuestro TableLayout.

Por cierto, como segundo argumento a addView podemos indicar el índice de la fila. De nuevo lo digo, puedes invocar a addView cuantas veces quieras para agregar todas las filas a la tabla.

Ejemplo completo

Ahora que ya he explicado lo básico voy a explicar cómo llegué hasta aquí. Tengo una lista de tallas (de ropa, cosa que no es significante para esto) y una de colores; debo hacer una tabla dinámica con múltiples EditText dentro de la misma.

Para simplificar pondré la lista aquí:

Después agrego el encabezado:

Y luego por cada color, agrego una fila con un EditText dinámico:

La constante de anchura es 150, y es para que no se vean tan pequeños los EditText. El código completo queda así:

Con eso alcanzamos el resultado de la siguiente imagen:

TableLayout dinámico con Android - Ejemplo de tabla

Si se ve cortada es porque la he puesto dentro de un HorizontalScroller para cuando haya más tallas. También falta poner algo de padding; pero bueno, lo importante, que es la tabla dinámica con Android, ya está.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *