Como veíamos en la entrega anterior la preparación del esquema en el diseño de nuestra aplicación resulta fundamental. Una buena practica para alcanzar cotas altas en rapidez durante el desarrollo es, sin duda, planificar mentalmente que queremos que haga nuestra aplicación y de que recursos tiraremos para ello, aparte del código, naturalmente. Habíamos dicho que teníamos una clase base con las propiedades comunes y el resto que extendieran de esta para desplegar las pantallas del «juego» (como prototipo, las perlas).
Vamos primero a ver el * AndroidMAnifest.xml, aquí deberemos incluir todos los Activities que compongan nuestra aplicación Android:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.tunelko.perlas"
android:versionCode="1"
android:versionName="1.0" >
<application
android:debuggable="true"
android:icon="@drawable/icon_androidtusperlas"
android:label="@string/app_name" >
<activity
android:label="@string/app_name"
android:name=".TusPerlasInicioActivity" >
<intent-filter >
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".TusPerlasMenuActivity" >
</activity>
<activity android:name=".TusPerlasScoreboardActivity" >
</activity>
<activity android:name=".TusPerlasConfigActivity" >
</activity>
<activity android:name=".TusPerlasGameActivity" >
</activity>
<activity android:name=".TusPerlasAyudaActivity" >
</activity>
</application>
<uses-sdk android:minSdkVersion="8" />
<uses-permission android:name="android.permission.INTERNET" />
</manifest>
* En esta versión del AndroidManifest.xml ya intuímos que permisos requerimos al usuario para ejecutar la aplicación.
Después, vamos a crear todas las clases de nuestros citados Activities. Esta es la clase base con elementos comunes a todas las demás clases (fíjate que extiende de Activity) y sólo contiene algunos settings que pueden ser usados posteriormente por las demás clases que dependan de ésta.
package com.tunelko.perlas;
import android.app.Activity;
public class TusPerlasActivity extends Activity {
// Preferencias
public static final String SETTINGS_PREFERENCES = "GamePrefs";
public static final String SETTINGS_PREFERENCES_NICKNAME = "Usuario";
public static final String SETTINGS_PREFERENCES_EMAIL = "Email";
public static final String SETTINGS_PREFERENCES_PASSWORD = "Password";
public static final String SETTINGS_PREFERENCES_BIRTHDATE = "Fecha de nacimiento";
public static final String SETTINGS_PREFERENCES_SEX = "Sexo";
public static final String SETTINGS_PREFERENCES_SCORE = "Puntuación";
public static final int MAX_PERLAS = 15;
public static final String DEBUG_TAG = "TusPerlas Log";
}
Para cada una de las clases restantes metemos este código y creamos cada uno de los layouts que se mostraran al llamar a setContentView(view). Fíjate que ahora extiende de TusPerlasActivity.
package com.tunelko.perlas;
import android.os.Bundle;
/**
* @author tunelko.
* @description Pantalla de Inicio. Hereda de TusPerlasActivity.
*
*/
public class TusPerlasInicioActivity extends TusPerlasActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.inicio);
}
}
Una vez creadas las clases y los layouts vamos a pararnos en estos últimos y ver cuales podemos manejar. Ya sabeis que el desarrollo de aplicaciones móviles está condicionado por el tamaño de las pantallas (y resoluciones). Igual que en web, nuestros layouts contienen elementos para determinar que nuestros diseños de interfaces se adapten a las necesidades de los dispositivos disponibles en el mercado. Vemos a continuación un resumen de los mismos:
| Nombre | Descripción | Características |
| LinearLayout | Cada vista ‘hija’ está puesta después de la anterior en una única fila o columna. | Orientación vertical y horizontal. |
| RelativeLayout | Cada vista ‘hija’ esta puesta en relación a las demás del layout o relativa a los límites del layout ‘padre’ | Diferentes atributos de alineación para controlar donde uan vista ‘hija’ se posiciona con relación a otros controles de la vista ‘hija’ |
| FrameLayout | Cada vista ‘hija’ está emplazada dentro del frame, relativa a la esquina superior izquierda. Los controles se pueden solapar. | El orden de posicionamiento es importante cuando se usa con los apropiados ‘gravity settings’ |
| TableLayout | Cada vista ‘hija’ es una celda en un conjunto de filas y columnas. | Cada fila requiere un elemento TablerRow. |
Tabla 1: Controles más comunes de Layouts en Android. * A partir de Android 1.5 SDK AbsoluteLayout está deprecated.
Diseñando la pantalla de inicio
Nuestra pantalla de inicio (layout inicio.xml) va a constar de una sencilla presentación con título, imagen con determinado efecto animado y texto de pie de imagen con otro efecto de animación. Más abajo, estarán los créditos, como vemos en este diagrama:
Debajo, nuestro inicio.xml con el layout:
<?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:background="@android:color/black">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/TextViewTopTitle"
android:text="@string/app_logo_top"
android:textColor="@color/logo_color"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="top|center"
android:textSize="@dimen/logo_size"></TextView>
<TableLayout
android:id="@+id/TableLayout01"
android:stretchColumns="*"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<TableRow
android:id="@+id/TableRow01"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_vertical|center_horizontal">
<ImageView
android:id="@+id/ImageView2_Left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:src="@drawable/inicio_tusperlas"></ImageView>
</TableRow>
</TableLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/TextViewBottomTitle"
android:text="@string/app_logo_bottom"
android:textColor="@color/logo_color"
android:gravity="center"
android:textSize="@dimen/titulo_debajo_logo"></TextView>
<TextView
android:id="@+id/TextViewBottomVersion"
android:text="@string/app_version_info"
android:textSize="@dimen/version_size"
android:textColor="@color/version_color"
android:background="@color/version_bkgrd"
android:layout_height="fill_parent"
android:lineSpacingExtra="@dimen/version_spacing"
android:layout_width="fill_parent"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"></TextView>
</LinearLayout>
Como véis se aplican una serie de atributos a cada nodo xml que son practicamente intuitivos y en todo caso consultables en la documentacion de la API de android. Comentar que en el directorio res/values tendremos que añadir otros xmls con estos valores. Por ejemplo, para dimensiones. Si tenemos que android:textSize=»@dimen/version_size» en nuestro TextView iremos a res/values/dimens.xml y añadiremos version_size, por ejemplo.
Ya falta poco para poder ejecutar en nuestro dispositivo o maquina virtual la aplicación tonta que muestre todo lo que hasta ahora llevamos explicando. Fijaros en res/draw-* e ir añadiendo los recursos gráficos que queráis mostrar en la aplicación. android:src=»@drawable/inicio_tusperlas» indica que debemos crear un gráfico «inicio_tusperlas.png» (o jpg,gif,…* mirar los formatos admitidos en la documentación).
En la próxima entrega, veremos como crear las animaciones de esta pantalla de inicio que como recordaréis, dará paso al menú de la aplicación.