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:

Android menu botones

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):

Android landscape

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í:

Android stretchcolumns

¡Hasta el próximo post!

Acerca de Isildur Fuentes

Apasionado de las buenas historias y aikidoka de la tierra.

Publicado el octubre 25, 2010 en Android, Programación y etiquetado en , , , , , . Guarda el enlace permanente. 7 comentarios.

  1. ¡Otro post genial! Ya estoy impaciente por el próximo.

  2. eres un sabio de respeto

    • Isidro Fuentes Hermoso

      Hola Jimmy.
      Muchas gracias por tu comentario y por el interés que demuestras por este site.
      Saludos.

  3. Hola Isidro!
    Muchas gracias por todos tus posts, estoy aprendiendo mucho!
    Tengo un problemilla: cuando ejecuto el programa, con el “main” de “layout-land” me da un error: “Type error: Error parsing XML: unbound prefix main.xml”
    Este error me lo marca en la linia “<TableLayout"

    Alguna idea de que me puede fallar?

    Muchas gracias por todo

  4. A parte tengo otro problema. Cuando ejecuto el programa en modo vertical, me pone el titulo y los dos botones en la misma linea, o sea que el tercer boton ya no entra en pantalla. Como lo hago para que me ponga el titulo y los botones en lineas distintas?

  5. Hola de nuevo Marc!

    Ayer me fue imposible contactar contigo. Espero que pudieses solucionar el problemilla. Si no es así, no dudes en volver a comentarlo, para ver si entre todos lo solucionamos.

    Un saludo.

A %d blogueros les gusta esto: