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.

 

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

A partir de hoy vamos a encadenar una serie de entradas relacionadas con el interface de usuario y sus elementos más comunes.

Framelayout podemos definirlo como el contenedor básico de los elementos que forman una vista y lo utilizaremos en la mayoría de ellas. De hecho ya se define por defecto en cualquier proyecto que creemos con Eclipse.

Los tipos de layout principales son:

FrameLayout:

 El más básico. No se pueden definir diferentes ubicaciones para los elementos que contiene, por lo que se van dibujando unos encima de otros alineados en la esquina superior izquierda de la pantalla. Sinceramente no le he encontrado una utilidad práctica hasta ahora por lo que no me extenderé más.

LinearLayout:

 Este tipo de Layout es mucho más útil y podemos configurarlo con una serie de atributos que influyen en la disposición de sus elementos hijos. Así, por ejemplo el atributo ‘android:orientation’ puede contener los valores horizontal o vertical. 

Para probarlo podemos realizar una pequeña aplicación con el siguiente fichero main.xml:

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

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

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

      <TextView 

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          android:text="UNO"

          />

      <TextView 

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          android:text="DOS"

          />

</LinearLayout>

Como veis, se ha definido un LinearLayout con el atributo de orientación vertical y conteniendo un par de campos TextView.

La diferencia al visualizar el resultado cambiando la orientación a horizontal es evidente:

Para definir un atributo siempre se sigue la misma sintaxis:

android:atributo=”valor”

Si queréis comprobar todos los atributos posibles para cualquier elemento del interface podéis pulsar las teclas Ctrl y Espacio justo despues de los ‘:’ y se abrirá una ventana con los valores posibles y una explicación de su función:

Para comprobar los posibles valores de un atributo pulsamos Ctrl y Espacio justo después del ‘=’

En los elementos hijos habréis observado que siempre están incluidos los atributos android:layout_width y android:layout_height

Ambos pueden contener los valores ‘fill_parent’  para que el ancho o el alto del elemento se extienda por todo el layout padre o el valor ‘wrap_content’ para sólo ocupe el espacio necesario para mostrar su contenido.

Otro atributo interesante es ‘gravity’. Define la alineación que van a tener todos los elementos ‘hijos’ y podemos seleccionar entre los valores que veis en la imagen superior.

Si utilizamos el valor ‘center-horizontal’ obtenemos el siguiente resultado:

En la próxima entrada veremos otros tipos de Layout.