Los TableLayout son elementos de la interfaz gráfica que podemos utilizar para mostrar información de manera ordenada, son muy fáciles de utilizar a comparación de los ListView que tienen un poco más de complejidad pero a la vez son mas potentes.
Un TableLayout, lleva dentro un TableRow, que sería su equivalente a una fila, en Android no tenemos un objeto para utilizar una columna, solamente filas.
La manera de llenar un TableLayout es simple:
1.- Primero creamos la interfaz gráfica, en este caso sera un simple TableLayout, con su respectivo ID (identificador dentro del código JAVA) que en mi caso es : "miTableLayout" Este es el código de mi Layout
En nuestra Clase que yo nombré TableLayoutActivity, en el método OnCreate Vamos a invocar a un par de métodos para el ejemplo, ademas de agregarle dos variables: una es el numero de filas que le agregaremos a nuestro TableLayout, este numero puede ser dinámico, tal vez un valor recibido de un contador de una BD, una cantidad de acciones en la aplicación etc.
La segunda variable es nada mas y nada menos que un tipo de objeto igual al que creamos en el XML.
como se puede observar, no hay nada del otro mundo dos simples invocaciones a metodos, ademas de lo que nos crea Eclipse por default.
En el método InitInterfaz() simplemente inicializamos nuestro TableLayout (table) declarado anteriormente con el ID que le pusimos en el XML esto se hará siempre que vayamos a utilizar algún elemento de la interfaz gráfica con el método findViewById (int id).
Ahora, lo mas interesante de todo agregar de manera dinamica los elementos al TableLayout. Metemos todo a un ciclo for, condicionandos el número de elementos que vamos a agregar al TableLayout.
Creamos un Objeto de tipo TableRow que como habiamos comentado es igual a una Fila, lo inicializamos enviandole el contexto de la aplicación.
Ahora creamos un Objeto de tipo TableLayout.LayoutParams, este objeto es el que nos va a indicar las caracteristicas de la fila o TableRow que vamos a asignarle, en este caso lo inicializo con el ancho y alto, que de ancho se le asigna un MATCH_PARENT y de alto un WRAP_CONTENT. (Podrian intentar cambiar estos valores y ver los resultados finales).
Posteriormente creamos el objeto a insertar en el TableRow, en nuestro caso un simple TextView, que inicializamos, le agregamos un texto, que es un contador de filas, le damos tamaño al texto y un color.
Para finalizar simplemente agregamos los parametros que habiamos creado a nuestro TableRow actual, tambien le agregamos el TextView que ya hemos creado y para finalizar agregamos el TableRow a nuestro TableLayout.
De esta forma de manera dinámica habremos agregado 100 filas (que es el numero que equivale a nuestra Variable AMOUNT) de manera dinamica.
Ahora queremos que después de mostrar esta lista, cada que toquemos una fila nos mande a un nuevo activity, pero que reconozca cual de todas las filas toqué. esto es muy sencillo, a continuación una muestra de ello.
Primero vamos a nuestro explorador de paquetes damos click derecho sobre nuestro paquete en donde está nuestra clase principal, nos aparecerán varias opciones seleccionamos "new" y después "other" y veremos algo así...
Seleccionamos Android Activity, y damos siguiente...
Seleccionamos "Blank Activity" y le damos un nombre en este ejemplo se llamará SecondActivity, me marca error por que ya lo tenia creado, no deben tener ningún problema ustedes.
para terminar veremos que se modifica nuestro AndroidManifest, ya que absolutamente todos los activities tienen que darse de alta en este archivo, Eclipse lo hace automaticamente por nootros, dejo el codigo XML del segundo Activity
Como se puede observar solamente se agregó un TextView considerablemente grande con un ID "TextViewActivity2" que será la referencia en nuestra segunda clase. aquí el código de la clase
Creamos dos variables, una que sera nuestro objeto que nos dirá, cual fila tocamos, y otro que será el valor que guardaremos correspondiente a la fila.
similar a la clase anterior en initInterface() inicializamos el TextView con su respectivo ID , y le agregamos un texto, junto con el numero de la fila que fue tocada.
hay algo nuevo en esta clase, y es el Bundle, que no es nada mas que un pequeño contenedor que permite recuperar parámetros que se envió de un activity anterior,le decimos que nos de un tipo int y la etiqueta que se le puso al enviar. Pero... nuestra clase anterior no envió nada, exacto, tenemos que modificar nuestra clase anterior para enviar un parámetro, ya que este activity espera construirse con valores de inicio, y si no los recibe la aplicación se detendrá. Modificamos nuestra clase primera quedándonos algo así:
Para el ejemplo, le estoy asignando un id al TableRow, que no es correcto, pues los ID van relacionado con la interfaz y utilizarlos de forma dinamica podría traer problemas, lo correcto sería usar un Tag, y despues recuperar el mismo tag, pero fin, a veces me complico la vida yo solo.
Al agregarle la interfaz onClickListener de la clase View, automaticamente debemos implementar el metodo que se esta sobreescribiendo onClick (View v) que nos da la vista tocada, agregamos un Intent para pasar de un Activity a otro y le asignamos un valor con su respectiva etiqueta, mediante un .putExtra, este metodo nos permite pasar valores entre activities. Es necesario que la etiqueta que se envía en TableLayoutActiviy sea la misma que recibe SecondActivity, en caso contrario, habrá una error en tiempo de ejecución y la aplicación se detendrá.
Ahora si, nuestra aplicación esta lisa para ser depurada, y al tocar diferentes filas nos envia al segundo activity diciendonos cual fila tocamos.
Como podrán darse cuenta no se alcanzan a ver todas las filas que hemos creado, y tampoco podemos hacer Scroll.
Utilizar un ScrollView en android es casi tan sencillo como arrastrarlo al Layout, si queremos que en nuestra aplicación sea capaz de Scrollear solo necesitamos modificar nuestro archivo XML del layout principal, aquí lo dejo corregido para que puedan hacer Scroll.
Espero les sirva y cualquier comentario es bien recibido. Saludos
Hola!
ResponderBorrarMuchas gracias por el ejemplo, es el primero que encuentro en donde se implementa una escucha (setOnClickListener), pero a la vez también es muy básico en su estructura, me refiero a que si puede hacerse un poco mas complejo, me explico, por ejemplo que cada fila tuviera dos o mas Textview (celdas), y que al pulsarse en una celda pudiera cambiársele el color de fondo a la fila de dicha celda o únicamente a esa celda. Te agradezco de antemano que nos puedas colaborar con esto.