UD3.11 Generar Views en un Layout en tiempo de ejecución.
Layout
ScrollView
INDICE
1. INTRODUCCIÓN 1
2. CASO PRÁCTICO 1
2.1 XML DO LAYOUT 3
2.2 CÓDIGO JAVA 5
1. Introducción
Podemos crear una tabla dinámica haciendo uso de un TableLayout. A continuación, veremos como se
crean los elementos de un TableLayout en tiempo de ejecución.
Los elementos de un TableLayout son celdas. En el siguiente ejemplo cada celda tendrá un componen-
te ImageView, pero podría ser un botón, un texto, etc.
Además a través del Layout ScrollView se va a permitir hacer scroll.
Referencias:
O control ScrollView: [Link]
O control TableLayout: [Link]
2. Caso práctico
Partimos que ya tenemos creado el proyecto inicial. Si no lo tenemos creado antes, crear un paque-
te de nombre UI como un subpaquete de tu paquete principal.
Dentro del paquete UI, crearemos un nuevo paquete de nombre: DinamicTable.
Dentro de este paquete crear una nueva 'Empty Activity' de nombre: UD03_11_TableLayoutDi-
namico de tipo Launcher.
Modificar el archivo [Link] y añade un label a la activity como ya vimos en la
creación del proyecto base.
IES San Clemente Programación Multimedia y Dispositivos Móviles Página 1 de 6
UD3.11 Generar Views en un Layout en tiempo de ejecución. Layout
ScrollView
TableLayout Dinámico
Al iniciar la aplicación introducimos el numero de filas y columnas que deseamos que tenga el Table-
Layout que está dispuesto debajo del botón.
IES San Clemente Programación Multimedia y Dispositivos Móviles Página 2 de 6
UD3.11 Generar Views en un Layout en tiempo de ejecución. Layout
ScrollView
Generamos la tabla y se carga con ImageViews cuya imagen es el icono que ya usáramos en un pro-
yecto anterior.
Si hacemos clic en una imagen, parece un Toast mostrando su etiqueta indicando la fila y columna
en la que se encuentra esa imagen.
2.1 XML do Layout
Nos centraremos en lo novedoso.
IES San Clemente Programación Multimedia y Dispositivos Móviles Página 3 de 6
UD3.11 Generar Views en un Layout en tiempo de ejecución. Layout
ScrollView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
xmlns:app="[Link]
xmlns:tools="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".[Link].UD03_11_TableLayoutDinamico">
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:stretchColumns="*" >
<TableRow>
<EditText
android:id="@+id/et_filas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Filas"
android:gravity="center"
android:imeOptions="actionDone"
android:inputType="number" />
<EditText
android:id="@+id/et_columnas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:hint="Columnas"
android:inputType="number" />
</TableRow>
</TableLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onGenerarTablaClick"
android:text="Generar tabla" />
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TableLayout
android:id="@+id/tabla_dinamica"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*" >
</TableLayout>
</ScrollView>
</LinearLayout>
IES San Clemente Programación Multimedia y Dispositivos Móviles Página 4 de 6
UD3.11 Generar Views en un Layout en tiempo de ejecución. Layout
ScrollView
ScrollView: es un layout que permite activar el scroll vertical. Con lo cual, los elementos que haya
dentro pueden crecer en vertical a su antojo, pues siempre se podrá realizar scroll.
● Dentro de este Layout se definió una TableLayout que inicialmente no tiene ninguna fila. Estas
filas se crearán en tiempo de ejecución.
Línea resaltada: observad que la tabla tiene un ID para poder acceder a ella desde Java.
2.2 Código Java
package [Link].pmdm_2021_2022.[Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link].pmdm_2021_2022.R;
public class UD03_11_TableLayoutDinamico extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_ud0311_table_layout_dinamico);
}
public void onGenerarTablaClick(View v) {
TableLayout tabla = (TableLayout) findViewById([Link].taboa_dinamica);
EditText filas = (EditText) findViewById([Link].et_filas);
EditText columnas = (EditText) findViewById([Link].et_columnas);
int f = [Link]([Link]().toString());
int c = [Link]([Link]().toString());
[Link]();
for (int i = 1; i <= f; i++) {
TableRow fila = new TableRow(this);
[Link](fila);
for (int j = 1; j <= c; j++) {
ImageView imagen = new ImageView(this);
[Link]("Tag" + i + j);
[Link]([Link].icon_ok);
[Link](imagen);
[Link](new [Link]() {
@Override
public void onClick(View v) {
IES San Clemente Programación Multimedia y Dispositivos Móviles Página 5 de 6
UD3.11 Generar Views en un Layout en tiempo de ejecución. Layout
ScrollView
// TODO Auto-generated method stub
ImageView img = (ImageView) v;
[Link](getApplicationContext(),"Pulsaste en la imagen" + [Link](),Toast.-
LENGTH_SHORT).show();
}
});
}
}
}
}
Línea 27: en el objeto tabla apuntamos a la tabla definida en el layout.
Línea 31,32: f y c indican cuantas filas y columnas debe tener el TableLayout. Recordad que par-
seInt() es un método estático de la clase Integer en Java.
Línea 34: eliminamos todas las vistas que pueda tener la tabla.
Línea 37,38: añadimos tantos TableRows como filas nos indicó el usuario.
Línea 41,42,43: creamos un objeto ImageView con su Tag e imagen asociada.
Línea 44: añadimos en cada fila tantas columnas como nos indicó el usuario a través de añadir, en
ese caso vistas del tipo ImageView.
Línea 45 a 53 para cada una de las imágenes llamamos a su Listener que estará a la espera de
que se haga click en esa misma imagen que se acaba de crear.
Línea 48 a 52 cuando se pulsa una imagen podemos conocer, en este caso, cuál es su Tag.
IES San Clemente Programación Multimedia y Dispositivos Móviles Página 6 de 6
