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:
<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=”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:
<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=”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:
- 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!
Publicado el octubre 25, 2010 en Android, Programación y etiquetado en android landscape, desarrollo móviles android, ejemplo android landscape, isidro fuentes hermoso, programaciónandroidespañol, tutorialandroidespañol. Guarda el enlace permanente. 7 comentarios.
¡Otro post genial! Ya estoy impaciente por el próximo.
eres un sabio de respeto
Hola Jimmy.
Muchas gracias por tu comentario y por el interés que demuestras por este site.
Saludos.
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
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?
Hola Marc!!.
Muchas gracias por interesarte en estos articulillos sobre Android. En este momento me pillas que tengo que irme. Espero poder contactar un poco más tarde.
Saludos.
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.