Android,

Diseñando una aplicación en Android (II): “Tus Perlas”

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.