Bienvenidos a la segunda parte de la serie de entradas en el ciclo Creando una aplicación de Android. Si aún no lo has hecho, comienza desde la primera entrada mostrada en el menú inmediatamente superior.
Como vimos en la primera parte de este ciclo de entradas, tenemos instalado y configurado nuestro entorno de desarrollo Eclipse para trabajar con el Android SDK. En esta entrada vamos a centrarnos en nuestro proyecto. Vamos a crearlo, vamos a comentar para qué sirve cada uno de los ficheros que nos crea Eclipse al hacer el proyecto, vamos a explicar brevemente las partes de las que va a consistir nuestra aplicación y vamos a crear el menú principal del juego.
El primer paso de esta entrada va a ser abrir nuestro Eclipse para poder comenzar a trabajar (duh). Una vez haya cargado y hayamos elegido nuestro workspace, entraremos a Eclipse. Ahora vamos a crear nuestro proyecto. Para ello vamos a File > New > Android Project (o si es nuestra primera vez, File > New > Project… y elegimos Android > Android Project en la ventana emergente).
En la ventana de creación de proyecto que aparecerá vamos a escribir y elegir lo siguiente:
- Project Name: Pong-vC
- Build Target: Android 2.1-update1 (API level 7)
- Application Name: Pong-vC
- Package Name: com.vidasconcurrentes.pongvc
- Create Activity: PongvCActivity
- Min SDK Version: 7
El resto de cosas que no he dicho las dejamos por defecto. Pero… ¿por qué hemos elegido estas opciones?
El Build Target es la versión de Android mínima en la que vamos a querer que se ejecute nuestra aplicación. Esto significa que el SDK nos ofrecerá las funciones que estén disponibles para esa versión, y si elegimos una muy baja no tendremos ciertas funcionalidades. Por contra, si elegimos una muy nueva, puede ser que los dispositivos más antiguos no puedan ejecutar nuestra aplicación. En este compromiso vamos a elegir Android 2.1 porque nuestra aplicación no va a necesitar las funcionalidades del Android 2.3 y la 2.1 es una versión que es relativamente joven y extendida.
El Application Name va a ser el texto que aparezca en nuestro dispositivo debajo del icono cuando queramos ejecutarlo.
El Package Name es el nombre del paquete de esta aplicación. Es importante recordar que en el mismo dispositivo sólo puede haber instalada una aplicación con el mismo package name, por lo que necesitamos que sea único. Se recomienda que se usen las convenciones de nombrado de paquetes de software, por las cuales debemos usar minúsculas y usaremos el dominio de la compañía empezando desde la derecha, y al final el nombre de nuestra aplicación.
El campo Create Activity sirve para crear la actividad por defecto. Tiene restricciones a la hora de poner símbolos en el nombre, así que elegiremos nuestra actividad de dicha forma.
El campo Min SDK Version contiene la versión del SDK que aparezca en el Build Target que hayamos elegido. Normalmente se pone por defecto, pero debemos ponerla en caso contrario.
Ahora tenemos nuestro proyecto creado, con todos los ficheros por defecto. Veremos algo así:
Por lo que podemos ver, tenemos varios directorios, dos ficheros .java y tres ficheros .xml. Veamos para qué sirve cada uno:
- PongvCActivity.java: este es el fichero de la actividad por defecto que nos ha creado Eclipse. Vamos a entender esto como el mainde una aplicación Java tradicional, el punto de entrada al ejecutar la aplicación. Su código es:
package com.vidasconcurrentes.pongvc; import android.app.Activity; import android.os.Bundle; public class PongvCActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } }Esta clase hereda de Activity y redefine la función onCreate(). Esta función toma un Bundle, que es la forma que tiene Android de pasar elementos primitivos entre actividades. Por así decirlo (y muy cogido con pinzas) es como pasarle a la actividad el estado del sistema. Luego usa la función setContentView(), que dice qué debe mostrarse en la pantalla. Ahora veremos qué es R.layout.main.
- R.java: este es un fichero generado automáticamente por el propio Eclipse y que no deberíamos tocar bajo ningún concepto. Contiene información sobre los recursos que pueden usarse (bajo el directorio res), de modo que podamos acceder a ello como una constante escribiendo R.<directorio>.<recurso>.
- main.xml: en este fichero se define la Interfaz de Usuario (UIen adelante). El plugin de Android para Eclipse nos permite ver este fichero como texto o como un editor gráfico, lo cual simplifica mucho las cosas. Inicialmente contiene el siguiente código:
<?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="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout>Aquí vemos por primera vez LinearLayout. Define la forma de la que se van a distribuir los elementos que vayan dentro de ella. En este caso, define que los elementos deben colocarse uno detrás de otro. Existe una explicación en detalle de todas las vistas y layouts disponibles en Android Developers. Vemos que hay también un TextView, que es un widget que permite mostrar un texto. Este texto puede ser hardcoded (es decir, escrito a mano ahí) o que venga del fichero strings.xml. Se recomienda usar la opción de strings.xml siempre que podamos, entre otras cosas porque nos ayudará a las traducciones de nuestros textos (si queremos aceptar varios idiomas).
- strings.xml: este fichero define cadenas de texto. Es muy útil en situaciones de querer cambiar un texto que aparece en muchos sitios, que en lugar de tener que buscarlo en todas partes y cambiarlo, sólo lo cambiamos aquí y ya aparece en todos.
- AndroidManifest.xml: toda aplicación debe tener este fichero en su directorio raiz, y entre otras cosas define el nombre del paquete de la aplicación, los componentes (actividades y sus configuraciones, servicios…), los permisos que necesita la aplicación, el nivel de la API mínimo que necesita, las librerías que el proyecto necesita… Se puede editar (y de hecho tendremos que editarlo antes o después), y cuenta con una vista gráfica muy buena para esta edición.
Hemos visto que en el directorio res encontramos todos los recursos (gráficos también) que va a usar el proyecto. layouts guarda las distribuciones, values guarda los strings, drawable guarda las imagenes…
Hasta aquí la explicación de los componentes de nuestro proyecto creado por defecto.
Ahora sí, vamos a empezar nuestro proyecto. Como hemos dicho, vamos a crear un Pong. Será una aplicación sencilla, muy sencilla. La aplicación ejecutará y mostrará un menú desde el cual podremos seleccionar tres opciones: Jugar, Opciones y Salir. Jugar ejecutará el juego, Opciones nos llevará a elegir la configuración del juego, y Salir cerrará la aplicación. En esta entrada vamos a crear este primer menú.
Si ejecutamos el proyecto ahora (click derecho en el proyecto, Run as > Android Application), veremos lo siguiente:
Como vemos, nos muestra la barra de notificaciones, el nombre de la aplicación y lo que contiene R.layout.main. Sin embargo nosotros no queremos que aparezca nada más que nuestro R.layout.main. Para hacer esto, vamos a añadir las siguientes líneas de código en PongvCActivity:
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
Con esto estamos pidiendo al sistema de ventanas de Android que nos quite el nombre de la aplicación y que además oculte la barra de notificaciones. Veremos lo siguiente:
Existe otra manera de hacer esto, y es modificando el AndroidManifest.xml. Sin embargo vamos a hacerlo de forma programática aquí (con código) y haremos otra cosa de forma estructural (con los xml) al final de la entrada. Ahora vamos a crear nuestro menú. Esta aplicación va a ser muy simple, por lo que no vamos a fijarnos en que sea artístico, sino funcional. Para comenzar, vamos a crear un nuevo directorio en res/ y vamos a llamarlo drawable. Dentro vamos a guardar estas tres imágenes:
En mi caso, van a llamarse pong.png, button_bg.png y vc.png, respectivamente. Una vez guardado, el fichero R.java se recreará y podremos acceder a estos recursos. Además, queremos que nuestro menú tenga tres botones. Recordemos que hemos dicho que es importante usar el fichero strings.xml todo lo posible. Por tanto, vamos a modificarlo para que sea de esta forma:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, PongvCActivity!</string>
<string name="app_name">Pong-vC</string>
<string name="menu_play">Jugar</string>
<string name="menu_options">Opciones</string>
<string name="menu_exit">Salir</string>
</resources>
Ahora vamos a modificar main.xml. El código es el siguiente:
<?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"
android:weightSum="1">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/pong" android:layout_gravity="center" android:layout_marginBottom="50dip" android:id="@+id/pong_logo" android:layout_marginTop="40dip"></ImageView>
<TextView android:layout_height="wrap_content" android:text="@string/menu_play" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_width="wrap_content" android:background="@drawable/button_bg" android:layout_gravity="center" android:gravity="center_vertical|center_horizontal" android:layout_marginBottom="30dip" android:id="@+id/play_button"></TextView>
<TextView android:layout_height="wrap_content" android:text="@string/menu_options" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_width="wrap_content" android:background="@drawable/button_bg" android:layout_gravity="center" android:gravity="center_vertical|center_horizontal" android:layout_marginBottom="30dip" android:id="@+id/options_button"></TextView>
<TextView android:layout_height="wrap_content" android:text="@string/menu_exit" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_width="wrap_content" android:background="@drawable/button_bg" android:layout_gravity="center" android:gravity="center_vertical|center_horizontal" android:id="@+id/exit_button">
<ImageView android:id="@+id/imageView1" android:layout_width="314dp" android:layout_height="wrap_content" android:src="@drawable/vc" android:layout_gravity="center|bottom"></ImageView>
</LinearLayout>
Si hemos hecho todo como he explicado, no habrá errores. Es tan largo porque está aplicado ya un poco de maquetado para que quede colocado. Podemos ejecutar nuestra aplicación ahora y veremos lo siguiente:
Ahora solamente tenemos que darle funcionalidad a los elementos que hemos colocado. Esto lo hacemos en el fichero PongvCActivity.java. Primero vamos a añadir funcionalidad al botón de Jugar. Para ello, al final del código que tenemos, escribimos:
TextView play = (TextView)findViewById(R.id.play_button);
play.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), R.string.menu_play,
Toast.LENGTH_SHORT).show();
}
});
En este código obtenemos el TextView cuyo identificador es play_button y le ponemos un OnClickListener que detectará que hemos tocado con el dedo encima (evento de la acción click). Además vamos a crear anónimamente este OnClickListener de modo que redefinimos su comportamiento para la función onClick(). Ésta lo que hace es mostrar un mensaje en pantalla con el texto del botón pulsado. Así hemos visto cómo referirnos a un string desde los XML y desde el código Java.
El código para los demás botones será el mismo, sólo cambiando el texto mostrado en el Toast. Aquí está el código completo para el fichero PongvCActivity.java:
package com.vidasconcurrentes.pongvc;
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
public class PongvCActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.main);
TextView play = (TextView)findViewById(R.id.play_button);
play.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(),
R.string.menu_play, Toast.LENGTH_SHORT).show();
}
});
TextView options = (TextView)findViewById(R.id.options_button);
options.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(),
R.string.menu_options, Toast.LENGTH_SHORT).show();
}
});
TextView exit = (TextView)findViewById(R.id.exit_button);
exit.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(),
R.string.menu_exit, Toast.LENGTH_SHORT).show();
}
});
ImageView logo = (ImageView)findViewById(R.id.imageView1);
logo.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Intent viewIntent = new Intent("android.intent.action.VIEW",
Uri.parse("http://www.vidasconcurrentes.com"));
startActivity(viewIntent);
}
});
}
}
Vamos a hacer un acto de fe en la última parte del código y vamos a quedarnos con que el código del ultimo bloque hace que se abra el navegador web del dispositivo y lleve a este blog. En la siguiente entrada explicaremos esto en detalle, pero para no hacer más larga esta entrada vamos a tomarlo así.
Ahora podemos ejecutar la aplicación y por ejemplo tocar en Opciones, y veremos lo siguiente:
Sólo nos queda un último truco, y es irnos al AndroidManifest.xml y poner android:screenOrientation=”portrait” en <activity android:name=”.PongvCActivity” android:label=”@string/app_name”>. De esta manera obligamos a que no se cambie de orientación al mover el dispositivo, o si no encontraríamos problemas como este al girarlo:
Hasta aquí la entrada de esta semana. En ella hemos visto cómo crear el proyecto de nuestra aplicación, de qué partes se compone este proyecto, para qué sirve cada una de estas partes, hemos diseñado nuestro menú principal del juego y le hemos dado funcionalidad.
Puedes descargar el proyecto completo en un fichero comprimido, listo para importar en tu Eclipse, pulsando aquí (MD5: 354b8fb840d9aeb6e91cb2ef35f3203f).
En la siguiente entrada crearemos el juego en sí, todas las clases necesarias para representar un Pong y la lógica de movimientos, además de mostrar todo esto en pantalla al dar al botón Jugar del menú.
¡Un saludo a todos los lectores!