Android. Juego del ahorcado (II). Interfaz de usuario modo landscape

En el último post, comenzamos a declarar la interaz de usuario de forma declarativa. Nos quedamos en el siguiente aspecto:

Si arrancamos el emulador y ejecutamos nuestro ahorcado inacabado, tendremos este aspecto. Ahora, pulsa CTRL+F11 y el emulador cambiará a modo landscape. Es importante hacer estas pruebas ya que, en nuestro ejemplo, si en vez de haber dos botones hubiesen cinco, los botones inferiores saldrían del espacio de la pantalla cuando está en modo landscape. A modo de ejemplo, en este post vamos a añadir a nuestro juego del ahorcado la declaración del interfaz para el modo landscape Empecemos.

Lo que queremos conseguir es que, cuando giremos el dispositivo, los botones no estén apilados como en modo portrait, sino que se dispongan en pantalla como en una cuadrícula.

Dentro del proyecto en Eclipse, vamos a crear el siguiente fichero:

Proyecto Ahorcado -> res -> layout-land -> main.xml

Fíjate, sobre todo, en el nombre de la carpeta layout-land, Android utilizará el fichero main.xml de esta carpeta para determinar qué aspecto tendrá la aplicación en modo landscape. Una vez creado el fichero, Eclipse da error en el fichero, ya que está vacío y no tiene ninguna definición xml en él. Copia el contenido del fichero Ahorcado -> res -> layout -> main.xml y pégalo dentro del nuevo fichero. Ahora mismo, tanto el modo portrait como en modo landscape, tienen la misma declaración:

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
>
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/titulo_principal”
/>
<Button
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/nuevo_juego” />
<Button
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/salir” />
</LinearLayout>

Ahora, modificamos este código para crear una tabla con un único row. Si tuviésemos más botones, podríamos tener más rows en caso necesario. El resultado es el siguiente:

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
>
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/titulo_principal”
/>
<TableLayout
android:layout_height=”wrap_content”
android:layout_width=”wrap_content”
android:layout_gravity=”center”
android:stretchColumns=”*” >
<TableRow>
<Button
android:id=”@+id/boton_nuevo_juego”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/nuevo_juego” />
<Button
android:id=”@+id/boton_salir”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/salir” />
</TableRow>
</TableLayout>
</LinearLayout>

Si guardas y vuelves a ejecutar (Run As -> Android Application), verás el siguiente aspecto en modo landscape (CTRL+F11):

En este nuevo código podemos destacar:

• Se han incluido entradas <TableRow>, <TableLayout> para crear una cuadrícula tipo tabla.
• Las entradas <Button> tienen definida un nuevo atributo:

android:id=”@+id/nombre_recurso“

Con esta característica, lo que hacemos es crear un identificador a un objeto, en este caso de tipo botón. Este identificador es importante, ya que nos permitirá hacer referencia al objeto desde otros lugares del programa, como por ejemplo cuando queramos definir el comportamiento del programa cuando hacen click en uno de estos botones.

• Dentro de la entrada <TableLayout> vemos el siguiente atributo:

android:stretchColumns=”*”

Con este atributo, podemos “estirar” las columnas que queramos de nuestra cuadrícula. El valor “*” indica que estiramos todas las columnas, pero podemos indicar qué columnas podemos estirar indicando su índice (la primera columna a la izquierda tiene índice 0) separados por coma. Por ejemplo:

android:stretchColumns=”0, 2″   // estira la primera y tercera columnas.

android:stretchColumns=”0″ // estira la primera columna. El resultado de este ejemplo en nuestro desarrollo quedaría así:

¡Hasta el próximo post!