Android. Juego del ahorcado (I). Interfaz de usuario declarativa.

android
Después del primer post sobre la instalación y creación del primer Hola Mundo, voy a seguir esta serie de posts con un ejemplo: el juego del ahorcado. Pero antes de entrar en materia, es conveniente clarificar algunos conceptos sobre Android:

  1. A diferencia de los entornos de Escritorio que normalmente conocemos, Android utiliza una pila de Aplicaciones, gestionada por el Activity Manager, para navegar por ellas. Se parece más a como utlizamos un navegador web: vamos pasando de ventana a ventana, pero no las tenemos todas al mismo tiempo como puede ser un gestor de ventanas de Windows o el de KDE.
  2. Una aplicación en Android consiste en una o más “Activities” (pantallas de usuario) más un proceso Linux que las contiene (sí, la base de Android es Linux). Al contrario de lo que pudiese parecer, las Activities no están “atadas” al proceso, lo cual da a lugar que podemos tener aplicaciones “vivas” incluso después de “matar” el proceso. Un proceso es como un contenedor a disposición de las “Activities”.
  3. Las “Activities”, durante su ciclo de vida, pueden estar en diferentes estados, los cuales podemos detectar mediante la reescritura de unos métodos tipo ONxxxx(). Hablaré de ellos en futuros posts.
  4. Definiciones:

    1. Activities: cada pantalla de usuario. Es importante tener en cuenta que cada una es responsable de guardar su estado en caso necesario.
    2. Intents: son acciones específicas (pej enviar mail).
    3. Services: Tareas en segundo plano.
    4. Content Provider: conjunto de datos con API que son útiles para compartir datos globales entre aplicaciones.
    5. Resource: toda pieza (no codificada) que necesite tu programa (bitmaps, lo que sea). Se compilan al crear el programa junto a él. Además, en el proyecto se crea una clase “R”, que nos permite poder acceder a ellos.
  5. Aunque no es el objetivo de este post, adelantaré que podemos gestionar permisos sobre la aplicación que desarrollamos mediante el fichero Manifest.xml.

Creación del proyecto en Eclipse.

Tal y como se describe en el post sobre la instalación y creación del primer programa, creamos un proyecto en Eclipse con la siguiente información:

Project Name: Ahorcado
Build Target: Android 2.2
Application name: Ahorcado
Package name: misejemplos.ahorcado
Create activity: Ahorcado
Min SDK Version: 8

Le damos a Finish y tendremos el proyecto en Eclipse. Antes de seguir adelante, unas cosillas:

  • Si expandimos el proyecto y damos doble click en la clase generada (Ahorcado -> src -> misejemplos.ahorcado -> Ahorcado.java), veremos el siguiente código:
package misejemplos.ahorcado;

import android.app.Activity;
import android.os.Bundle;

public class Ahorcado extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

La clase Ahorcado hereda de Activity. De esta forma sabemos que esta clase representa un interfaz de usuario (pantalla). En ella definiremos qué queremos que aparezca cuando ejecutamos el programa. Para ello, podemos hacerlo de dos formas:

  1. De forma procedural. Se trata de añadir código (en los métodos de la misma clase o incluso en nuevas clases) que “pinte” lo que queremos cuando se ejecuta.
  2. De forma declarativa. En el código anterior, vemos la última línea:
setContentView(R.layout.main);

En esta línea se hace referencia a R.layout.main. ¿Qué es?. Si navegamos por el proyecto de Eclipse, encontramos en la ruta: Ahorcado -> res -> layout un fichero de nombre main.xml. Dentro de este fichero (dale doble click) se declara la interfaz de usuario para esta activity. Esta es la forma declarativa. Para este tutorial, seguiremos esta manera, así que lo que haremos, de momento, es modificar este fichero para que, en tiempo de ejecución, Android lo interprete y dé como resultado la primera pantalla de usuario para el juego del ahorcado.

El aspecto de main.xml 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/hello”
/>
</LinearLayout>

Veamos algunas cosas sobre este código:

  • <LinearLayout…: Un layout es un contenedor que puede contener objetos además de definir una manera de posicionarlos en el layout “padre”. Existen diferentes tipos de layout, pero llegaremos a ellos en un futuro post.
  • orientation, width, height: parámetros varios de cómo se estructura el layout. “fill_parent” define en este caso que el ancho y el alto del layout sean los mismos que el objeto “padre”, que en este caso es la ventana.
  • <TextView…: define que nuesto layout tendrá un texto. El aspecto al ejecutar el emulador es el siguiente:

Android. Aspecto por defecto.

Cambiando el aspecto.

Lo que quiero hacer es que esta pantalla de usuario presente algunas opciones al jugador, como son:

  • Nuevo juego.
  • Salir.

Presentaré por pantalla dos botones, uno para cada opción. El código de main.xml queda así:

<?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>

Eclipse nos da tres errores, uno para cada componente. Lo que pasa es que no tenemos definidos en el proyecto las etiquetas de texto “titulo_principal”, “nuevo_juego” y “salir”. Podría haber escrito texto fijo como valor de la propiedad text, pero no interesa. Mejor si guardamos la definición y el valor de estas etiquetas en un fichero aparte. Por eso el valor es “@string/titulo_principal”. con @string le decimos a Android que vaya a buscar el valor de la etiqueta en el fichero Ahorcado -> res -> values -> strings.xml. Lo abrimos (con botón derecho del ratón y luego Open With -> Android Layout Editor), y su aspecto es:

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>
<string name=”hello”>Hello World, Ahorcado!</string>
<string name=”app_name”>Ahorcado</string>
</resources>

Lo vamos a modificar, para nuestras necesidades. Quitaré la etiqueta “hello”, y añadiré las necesarias para los botones. Queda así:

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>
<string name=”app_name”>Ahorcado</string>
<string name=”titulo_principal”>El juego del Ahorcado</string>
<string name=”nuevo_juego”>Empezar nuevo juego</string>
<string name=”salir”>Salir</string>
</resources>

Si ejecutamos (botón derecho del ratón en el proyecto -> Run As -> Android Application), ahora el aspecto es el siguiente:

Android. Cambiando el aspecto de forma declarativa

Podemos mejorar el aspecto como poniendo un color de fondo mediante la propiedad background o centrando los botones en pantalla mediante layout_gravity. Dejo al lector el placer de experimentar los cambios de aspecto que le parezcan necesarios.

¡Hasta el próximo post!.

Blogged with the Flock Browser

Acerca de Isildur Fuentes

Apasionado de las buenas historias y aikidoka de la tierra.

Publicado el septiembre 28, 2010 en Android, Programación y etiquetado en , , , , , , , , , , . Guarda el enlace permanente. 16 comentarios.

  1. ¡Increible! Casi sin saber lo que hago he podido completar este paso. He intentado añadir android:background pero me supera. La opción layout_gravity parece más fácil de aplicar pero no he podido apreciar la diferencia. Segundo post y ya estoy notando un poco de adicción. Me voy a por el siguiente.

    • Coincido con bigwall en que partiendo desde 0 he podido completar este paso (aunque unos meses después).
      Voy a ver si le hecho un ratillo a la “gravity” antes de pasar al siguiente paso.🙂
      Muchas gracias por el blog.

      • Isidro Fuentes Hermoso

        ¡Muchas gracias por tu comentario!

        Espero que los siguientes post sean también de tu agrado.

  2. mm.. no me sale xD cuando cambio los

    Hello World, Ahorcado!
    Ahorcado

    por los otros me tira error no se que pasara😄

    • Isidro Fuentes Hermoso

      Hola Juan.
      Si no consigues solucionarlo, y si quieres, envíanos el código fuente (a isidro@robiol.org) que te falla a ver si entre todos lo arreglamos.

      Un saludo.

      • Juan Fernando Dominguez

        ok gracias ya pude solucionarlo lo que me pasaba
        era que cuando le daba al run As con lo del boton derecho
        no me salia Run As -> (Android Application) y le daba con el boton de run de eclipse
        y me tiraba un error y me generaba un main.out xml

        pero era porque lo hacia teniendo selecionado el main.xml
        haci que seleccione donde estaba el paquete mis ejemplos.ahorcado y corrio

  3. Aviso a navegantes: Si hacéis copy&paste del código del post, podéis encontraros con problemas con caracteres como (“). En el texto se usan comillas dobles ortográficas (distinta la de apertura que la de cierre) y eso al código fuente no le gusta nada, deberéis cambiarlas a mano en el editor.

    Un saludo, sigo enganchado y agradecido por tus artículos.

  4. me podrian ayudar tengo un problema cuando intente correr el programa me marcaba este error
    [2012-12-04 14:58:19 – Ahorcadod] Error in an XML file: aborting build.

  5. necesito ayuda pueden ayudarme con mi problema se los agradezco mucho

  6. y cuando pongo el puntero sobre la marca roja me dice esto
    Multiple annotations found at this line:
    – error: Error parsing XML: XML declaration not well-formed
    – The value following “version” in the XML declaration must be a
    quoted string.

  7. gracias por contestar ya lo pude acomodar solo me fije que las comillas estaban diferentes y las acomode eso era lo que me marcaba como error ahora el problema es que cuando lo corro si me aparece la ventana con los dos botones pero les doy clik y no pasa nada
    alguien me puede ayudar

  8. OO que bien gracias seguire paso por paso entonces asta terminarlo😉 saludos

  1. Pingback: Objetivo 2 – Optimizar los procesos que se ejecutan al inicio | Lo que hice al comprar un móvil con android

A %d blogueros les gusta esto: