Elementos básicos del interface de usuario – Layouts (II)- Basic elements of the user interface

TableLayout: Este tipo de Layout distribuye los elementos ‘hijos’ en filas y columnas de manera similar a como se hace en HTML. Cada fila es definida por un nuevo elemento llamado ‘TableRow’. El número de columnas es determinado por los elementos definidos en el interior de cada ‘TableRow’, de forma que la fila que contenga más elementos ‘hijos’ determinará el número de columnas de la tabla.

Por ejemplo si queremos definir una tabla de 2x2 deberemos crear un fichero xml semejante a este:

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

    <TableRow>

            <TextView 

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="COL 0"

                android:background="#ff0000"

                />

            <TextView 

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="COL 1"

                android:background="#0000ff"

                /> 

    </TableRow>

    <TableRow>

            <TextView 

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="COL 0"

                android:background="#ff0000"

                />

            <TextView 

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="COL 1"

                android:background="#0000ff"

                /> 

    </TableRow>   

</TableLayout>

Con este resultado:

 

Como vemos, los dos elementos definidos para cada fila, no llegan a completar el ancho total de la pantalla. Si queremos evitar este efecto haciendo que se expanda la segunda columna debemos definir el atributo ‘stretchColumns’ en el TableLayout

android:stretchColumns=”1” (Se numeran a partir del 0)

Si una de las filas no contiene el mismo número de elementos que el resto podemos hacer que ocupe el mismo número de columnas utilizando el atributo android:layout_span=”numero de columnas a expandir”

 

Ahora bien ¿Cómo podemos conseguir que una determinada columna se expanda en varias filas, algo así como lo que hacíamos en HTML con el atributo ‘colspan’. Pues no he localizado ningún atributo que nos permita realizar esa función, así que debemos recurrir al ingenio.

Por ejemplo podemos ‘engañar’ al sistema creando dentro de una ‘TableRow’ un grupo de elementos como el que sigue:

<TableRow>

        <LinearLayout

                android:orientation="vertical"

                android:layout_width="wrap_content"

                android:layout_height="fill_parent"

                >

                  <TextView 

                      android:layout_width="wrap_content"

                      android:layout_height="wrap_content"

                      android:text="COL 0"

                      android:background="#ff0000"

                      />

                  <TextView 

                      android:layout_width="wrap_content"

                      android:layout_height="wrap_content"

                      android:text="COL 0"

                      android:background="#0000ff"

                      /> 

            </LinearLayout>  

        <LinearLayout

                android:orientation="horizontal"

                android:layout_width="fill_parent"

                android:layout_height="fill_parent"

                >

                  <TextView 

                      android:layout_width="fill_parent"

                      android:layout_height="fill_parent"

                      android:text="COL 1"

                      android:background="#dddddd"

                      />

            </LinearLayout>                  

    </TableRow>

Como veis defino un par de LinearLayous, la primera con orientación vertical y un par de textos, y otra de orientación horizontal con un unico campo que ocupa todo el ancho y alto (fill_parent).

De este modo conseguimos un efecto parecido al deseado, aunque realmente sólo hemos definido dos filas, la apariencia es que tenemos tres:
 

Otros atributos propios de las TableLayout son ‘android:collapseColumns =”column/s”’ que permite definir la/s columnas a ocultar de la tabla  y el atributo ‘android:shrinkColumns=”column/s”’ que consigue el efecto contrario al ya visto de ‘stretchColumns’.

Para una información detallada del elemento ‘TableLayout’, siempre podeis consultar la página de referencia en android developer.

Hasta la próxima.