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.
Nota: tal vez quieras ver este tutorial sobre Tabs dinámicas en Android.
Para agregar columnas y filas dinámicas debemos tener un TableLayout
. El mismo puede ser definido así:
<TableLayout
android:id="@+id/tableLayoutPackingList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4sp"
android:layout_marginLeft="4sp"
android:layout_marginEnd="4sp"
android:layout_marginRight="4sp"
android:stretchColumns="*">
</TableLayout>
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.
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()
TableRow fila = new TableRow(getActivity());
Es importante definir el layout de la fila:
TableRow.LayoutParams lp = new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT);
fila.setLayoutParams(lp);
Con ese atributo decimos que la anchura de la fila será con el atributo WRAP_CONTENT
.
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:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle">
<solid android:color="#ffffff"/>
<stroke android:width="1dp" android:color="#000000"/>
</shape>
Para aplicar ese estilo a la fila dinámica que estamos creando, debemos invocar a:
// Borde
fila.setBackgroundResource(R.drawable.borde_tabla);
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:
//El elemento de la izquierda
TextView tv = new TextView(getActivity());
tv.setText("TALLAS");
fila.addView(tv);
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.
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
.
tableLayout.addView(fila);
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.
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í:
String[] tallas = {"X1", "1", "2", "3", "4", "5", "6", "7", "8", "9"};
String[] colores = {"BLANCO", "VERDE", "PÚRPURA", "AMARILLO", "MARRÓN"};
Después agrego el encabezado:
// Primero dibujar el encabezado; esto es poner "TALLAS" y a la derecha todas las tallas
TableRow fila = new TableRow(getActivity());
TableRow.LayoutParams lp = new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT);
fila.setLayoutParams(lp);
// Borde
fila.setBackgroundResource(R.drawable.borde_tabla);
//El elemento de la izquierda
TextView tv = new TextView(getActivity());
tv.setTypeface(null, Typeface.BOLD);
tv.setText("TALLAS");
fila.addView(tv);
// Ahora agregar las tallas
for (int x = 0; x < tallas.length; x++) {
TextView tvTalla = new TextView(getActivity());
tvTalla.setText(tallas[x]);
fila.addView(tvTalla);
}
// Finalmente agregar la fila en la primera posición
tableLayout.addView(fila, 0);
Y luego por cada color, agrego una fila con un EditText dinámico:
// Ahora por cada color hacer casi lo mismo
for (int x = 0; x < colores.length; x++) {
TableRow filaColor = new TableRow(getActivity());
filaColor.setLayoutParams(lp);
// Borde
filaColor.setBackgroundResource(R.drawable.borde_tabla);
// El nombre del color
TextView textViewColor = new TextView(getActivity());
textViewColor.setText(colores[x]);
textViewColor.setTypeface(null, Typeface.BOLD);
filaColor.addView(textViewColor);
// Y ahora por cada talla, agregar un campo de texto
for (int y = 0; y < tallas.length; y++) {
EditText editText = new EditText(getActivity());
editText.setInputType(InputType.TYPE_CLASS_NUMBER | InputType.TYPE_NUMBER_FLAG_DECIMAL);
editText.setWidth(Constantes.ANCHURA_PIXELES_EDITTEXT_TABLA_DINAMICA);
filaColor.addView(editText);
filaColor.setMinimumWidth(Constantes.ANCHURA_PIXELES_EDITTEXT_TABLA_DINAMICA);
}
// Finalmente agregar la fila
tableLayout.addView(filaColor);
}
La constante de anchura es 150, y es para que no se vean tan pequeños los EditText. El código completo queda así:
TableLayout tableLayout = v.findViewById(R.id.tableLayoutPackingList);
String[] tallas = {"X1", "1", "2", "3", "4", "5", "6", "7", "8", "9"};
String[] colores = {"BLANCO", "VERDE", "PÚRPURA", "AMARILLO", "MARRÓN"};
// Primero dibujar el encabezado; esto es poner "TALLAS" y a la derecha todas las tallas
TableRow fila = new TableRow(getActivity());
TableRow.LayoutParams lp = new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT);
fila.setLayoutParams(lp);
// Borde
fila.setBackgroundResource(R.drawable.borde_tabla);
//El elemento de la izquierda
TextView tv = new TextView(getActivity());
tv.setTypeface(null, Typeface.BOLD);
tv.setText("TALLAS");
fila.addView(tv);
// Ahora agregar las tallas
for (int x = 0; x < tallas.length; x++) {
TextView tvTalla = new TextView(getActivity());
tvTalla.setText(tallas[x]);
fila.addView(tvTalla);
}
// Finalmente agregar la fila en la primera posición
tableLayout.addView(fila, 0);
// Ahora por cada color hacer casi lo mismo
for (int x = 0; x < colores.length; x++) {
TableRow filaColor = new TableRow(getActivity());
filaColor.setLayoutParams(lp);
// Borde
filaColor.setBackgroundResource(R.drawable.borde_tabla);
// El nombre del color
TextView textViewColor = new TextView(getActivity());
textViewColor.setText(colores[x]);
textViewColor.setTypeface(null, Typeface.BOLD);
filaColor.addView(textViewColor);
// Y ahora por cada talla, agregar un campo de texto
for (int y = 0; y < tallas.length; y++) {
EditText editText = new EditText(getActivity());
editText.setInputType(InputType.TYPE_CLASS_NUMBER | InputType.TYPE_NUMBER_FLAG_DECIMAL);
editText.setWidth(Constantes.ANCHURA_PIXELES_EDITTEXT_TABLA_DINAMICA);
filaColor.addView(editText);
filaColor.setMinimumWidth(Constantes.ANCHURA_PIXELES_EDITTEXT_TABLA_DINAMICA);
}
// Finalmente agregar la fila
tableLayout.addView(filaColor);
}
Con eso alcanzamos el resultado de la siguiente imagen:
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á.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
Ver comentarios
Siento molestar con algo que probablemente sea muy simple pero, no consigo modificar datos en una tablelayout y que se muestren. Creo que he probado de todo