Androideity

Programación android en español, tutoriales, documentación, noticias, smartphones, tablets, programación android, aplicaciones android

Layout en Android III: Table Layout

| | 9 Comentarios

Seguramente alguna vez te tocó trabajar con las famosas (y ya no tan cool) tablas en HTML, si es así, tal vez debas conocer el tercer contenedor de Android llamado TableLayout, que te ayudará a posicionar tus widgets con la ayuda de celdas. Nosotros controlamos el número de columnas y filas, las primeras pueden adaptarse al contenido que le queramos asignar mostrándose más estrechas o más amplias según sea el caso.

Los elementos TableLayout trabajan en conjunto con los elementos TableRow. De esta forma podemos controlar el número de filas que aparecerán en nuestra tabla.

Por otro lado, Android es el que controla el número de columnas que aparecerá en el layout según los widgets que necesitemos que aparezcan, tomando en cuenta de que de manera predeterminada habrá al menos una columna por cada widget contenida en una fila. Por ejemplo, si tenemos tres filas, una con dos widgets, una con tres widgets y otra con 4 widgets, habrá por lo menos 4 columnas para todo el layout.

Y así como HTML, es posible que un widget pueda tomar más de una columna con la ayuda del atributo android:layout_span cuyo valor será el número de columnas que queramos que el widget ocupe.

En el siguiente trozo de código creamos una tabla con una fila que contiene un TextView y un EditText que ocupará 3 columnas, por lo que al final, nuestra tabla tendrá hasta este punto 4 columnas.

Regularmente, los widgets comienzan a posicionarse empezando por la primera columna de la izquierda y se cuentan a partir del número cero. De esta forma, el TextView estará en la columna 0 y el EditText ocupará de la columna 1 a la 3. Esta característica de las tablas nos permitirá posicionar un widget en alguna columna en específico en caso de que la aplicación lo requiera a través del atributo android:layout_column cuyo valor será el de la columna en el que lo queramos posicionar sin olvidar que la primera columna lleva el número cero.

 

Widgets independientes de las filas

Como explicamos arriba, los elementos TableLayout contienen TableRow como elementos hijos inmediatos que son usados para desplegar los widgets de la aplicación. Sin embargo, es posible poner un widget en medio de las filas de la tabla. Para estos casos, el contenedor TableLayout se comporta de manera parecida a un LinearLayout con orientación vertical y los widgets que incluyamos tendrán el valor fill_parent para su atributo android:layout_width; de esta forma nos aseguramos de que estos widgets que andan sueltos medirán exactamente lo mismo que la fila más larga que tenga nuestro layout.

Tip: Para que obtengas un resultado visual más bonito si decides llevar a la práctica lo anterior, te recomiendo utilices un elemento de tipo View que te sirva como divisor. Por ejemplo, podrías declararlo como <View android:layout_height=”2px” android:background=”#FFFFFF” />. Claro está que puedes jugar con el color de la línea divisora.

 

Jugando con el ancho de las columnas

De manera predeterminada, las columnas en este tipo de layout toman como ancho el del widget que se encuentra dentro de cada una de ellas. Sin embargo, hay veces en las que el resultado visual no siempre será el deseado y es aquí cuando podemos hacer uso de la propiedad android:stretchColumns que aplica para el elemento TableLayout.

El valor aplicado a este atributo debe ser un número que corresponda a una columna (cuidando la regla de que la primera columna ocupa la posición cero), y en caso de que queramos aplicarlo a más de una columna, deberemos indicar el número de las columnas separadas por coma. El resultado final, será que la (s) columna (s) definida (s) podrán expandirse tanto como lo permita el espacio disponible que se tenga en la fila. Desde el código Java podemos también asignar esta propiedad haciendo uso del método setColumnStretchable().

Si queremos hacer lo contrario, tenemos a nuestra disposición el atributo android:shrinkColumns que de igual forma se aplica al elemento TableLayout. El valor para este atributo se define exactamente igual que en la explicación del párrafo anterior. Las columnas que aparezcan en esta propiedad utilizarán el ajuste de línea sobre su contenido para lograr disminuir el ancho de la misma. Esto resulta útil cuando queramos evitar que una columna que contiene mucho texto no se expanda a tal punto que empuje widgets como botones hasta el extremo derecho de la pantalla y podamos así tener un balance visual en el layout. Si queremos manipular esta propiedad en tiempo de ejecución podemos hacerlo utilizando el método setColumnShrinkable().

Por último, es importante mencionar el uso de otro atributo que es android:collapseColumns cuyo valor se determina como en los dos atributos arriba explicados. Lo que hace es que las columnas definidas en él formarán parte de la información de la tabla pero de forma invisible. Podemos manipular esta acción desde el código Java utilizando el método setColumnCollapsed() sobre el objeto de tipo TableLayout. El uso más común de esta propiedad es la de permitirle al usuario controlar las columnas que son de importancia para él y así mostrar aquellas con más prioridad sobre las que no lo son para así poder ocultarlas.

 

Pasemos al código…

Vamos a repasar lo que hemos explicado hasta el momento creando un proyecto llamado AndroideityTableLayout con la versión Android 2.1 update 1.

1. Creamos el layout editando el archivo main.xml del directorio res > layout. Notarás que vamos a utilizar un widget a modo de divisor como explicamos en una sección anterior de este post. Y vamos a trabajar con dos filas; la primera que albergará un TextView y un EditText y la segunda fila con dos botones.

2. Ejecutamos el código y veremos el siguiente resultado:

La línea divisora la hemos puesto de un color diferente para que notes cómo es que la definición de nuestro layout se refleja visualmente en el resultado final de la aplicación. Es un ejemplo muy sencillo pero que nos ayuda a comprender cómo es que se acomodan los elementos en un layout que utiliza columnas y filas para albergar los componentes visuales de Android.

Para tus aplicaciones puedes probar muchos atributos más que puedes consultar en la documentación oficial de Android developers.

Si quieres descargarte el proyecto de ejemplo que hice para acompañar este post lo encuentras en el repositorio de GitHub con el nombre de AndroideityTableLayout.

Para cerrar esta serie de contenedores en Android, en el siguiente artículo, vamos a conocer el uso del scroll en nuestras aplicaciones, un elemento básico e importante para que el usuario pueda consultar la información que le queremos presentar de una forma muy cómoda.

¿Tienes alguna duda? Compártela en la sección de comentarios para que la resolvamos.

 

Comparte este post

Acerca de: Condesa

Desarrolladora de aplicaciones Android, freelance, apasionada de la tecnología, y precursora del crecimiento tecnológico en México.

Sígueme en Twitter

Leer todos mis artículos

También puede interesarte

Comentarios de este artículo

  • Pingback: Contenedores en Android « Androideity

  • Pingback: Layout en Android II: Relative Layout « Androideity

  • richisk8

    buen post gracias !

  • http://twitter.com/Ing_Mictlan Jorge Becerra

    Buenisimooo, me acaba de casar de un apuro!!!!, xk no puede ser tan fácil como en HTML??? jajajaj

  • Victor

    Como puedo recorrer una tabla dupla por dupla e ir sacando los datos?

    • condesa

      Hola Víctor,

      Debido a los componentes actuales que ya existen en la plataforma yo te aconsejaría que no utilices las TableLayout. Hay componentes más flexibles como el GridView.

      Saludos.

  • Kasuky

    Bueno pues veamos , necesito que la tabla cree columnas dinamicas, en este caso pues puden ser tambien filas… lo imposrtante es que pueda hacerlo por codigo de java y no por el editor…. asi por ejemplo si tengo 3 campos: nombre, direccion y telefono… y deseara agregtar uno nuevo como por ejemplo “correo” se cree la fila o columna correspondiente…. como se haria?? si es con el grid view tambien me sirviria, pero no se como hacerlo…..

  • jcgandroid

    Cual es la diferencia entre un tablerow y un tablelayout? bueno mejor dicho, para que se suele usar uno y otro? Solo uso el tablelayout porque me hace bien las columnas pero poco mas…

  • Herchi

    El código de descarga no existe ya :(