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

Ya tenemos planteada la aplicación. De una forma muy básica: pantalla de inicio a modo de “splash” con animación incluída, menú en un ListView con las opciones correspondientes al juego que luego veremos con detalle, etc… También adelantábamos que los permisos iban a requerir la conexión a Internet. Esto es debido a que la aplicación va a conectar y consultar algunos datos de la web oficial. En este punto nos tenemos que plantear una forma de recuperar esos datos, un formato y un flujo de actividad de red, en definitiva. En este caso vamos a emplear JSON, por ser un formato compacto, manejable , soportado y más ligero que el pesado XML. Además, Android incluye una versión de estas librerías. De cualquier manera esto no lo veremos hasta dentro de dos o tres entregas.

Una vez elegido el formato de intercambio de datos, debemos pensar en los aspectos que pueden hacer inestable o inconsistente la aplicación. como puede ser comprobar que tenemos conexión a Internet al ejecutar la aplicación y avisar de una manera u otra al usuario con una notificación Toast. Caso de no hacerlo, lanzaría una excepción y forzaría el cierre, algo que no es lo suficientemente educado ;-)

Pero vamos con lo inmediato por hacer, completar la el .java de la pantalla de inicio y entender como se ejecutan las animaciones.  La plataforma Android soporte cuatro formas de animaciones gráficas:

• Gif animados: típicos gráficos animados que contienen frames para desplegar la animación.
• Animacion “frame-by-frame”: El SDK de Android nos ofrece la posibilidad de emplear un mecanismo similar a las animaciones “frame-by-frame” donde el programador usa gráficos individuales y transiciones entre ellos. (ver la clase AnimationDrawable).
• Animación “Tweened”: Simple pero efectivo método para definir animaciones que se apliquen a cualquier view ó layout.
• OpenGL ES: A través de su API, Android ofrece la posibilidad de emplear librerías openGL para iluminar, crear 3d, efectos de luz, flares….

Pantalla de inicio.

Crea un directorio dentro de /res que sea anim. De tal forma que en /res/anim tengas los xml que definan el comportamiento de los elementos que quieras animar. En este caso vamos a rotar una imagen que tenemos en la pantalla de inicio y que hemos definido en su correspondiente layout inicio.xml. Vamos a crear un xml que sea custom_anim.xml y que contenga lo siguiente:

custom_anim.xml

<?xml version="1.0" encoding="utf-8" ?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="2000" />
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="2000">
    </alpha>
    <scale
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromXScale=".1"
        android:fromYScale=".1"
        android:toXScale="1.0"
        android:toYScale="1.0"
        android:duration="2000" />
</set>

fade_in.xml

<?xml version="1.0" encoding="utf-8" ?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="2500">
    </alpha>
</set>

fade_in2.xml

<?xml version="1.0" encoding="utf-8" ?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="2500"
        android:startOffset="2500">
    </alpha>
</set>

En la primera, custom_anim.xml, aplicamos una rotación, fundido alpha y escalado de la imagen. En los ficheros fade_in.xml y fade_in2.xml, simplemente un pequeño fundido de 2,5 segundos  (android:duration=”2500″) con la diferencia de que en la segunda esperamos precisamente otros 2,5 segundos a que aparezca (android:startOffset=”2500″). Manejar las animaciones es bastante intuitivo y muy personal. A efectos de demostrar brevemente como se hace, pueden servir estas.

La parte de animación en nuestro “TusPerlasInicioActivity”

Editamos TusPerlasInicioActivity.java para crear el método comienzaAnimacion(). Declaramos las librerias que vamos a usar, son estas:

import android.os.Bundle;
import android.content.Intent;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.LayoutAnimationController;
import android.view.animation.Animation.AnimationListener;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;

Tenemos sobreescrito nuestro onCreate, como en las demás clases, renderizando el layout correspondiente con setContentView(view):

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.inicio);
    }

Y ahora vamos a ver como creamos nuestro primer efectillo.

    /**
     * Método para iniciar nuestra animación de la pantalla de inicio
     */
    private void comienzaAnimacion() {
        // Fundido del texto superior del
        TextView texto_superior = (TextView) findViewById(R.id.TextViewTopTitle);
     Animation efecto_fundido = AnimationUtils.loadAnimation(this, R.anim.fade_in);
        texto_superior.startAnimation(efecto_fundido);
... [código]
}

Lo primero que hacemos es decirle a nuestro método que queremos animar, un TextView que llamamos texto_superior y cuyo id está definido como TextViewTopTitle, de nuestro inicio.xml. Después le decimos que cargue nuestro efecto, lo llamamos efecto_fundido. Las propiedades del efecto las aplicará del recurso R.anim.fade_in (¿Os suena este xml?). Y “Voilá”, ya tenemos un efecto básico de fundido.

Dentro del mismo método onCreate, creamos el resto de efectos y nos encargamos de decirle que después de mostrarlos, vaya a la pantalla del menú:

        //Fundido del texto de abajo despues de un breve delay de 2,5s
        TextView texto_abajo = (TextView) findViewById(R.id.TextViewBottomTitle);
        Animation efectillo_dos = AnimationUtils.loadAnimation(this, R.anim.fade_in2);
        texto_abajo.startAnimation(efectillo_dos);

Esta es la parte donde se crea el ‘listener’ de la animación.

 // Vamos al menu cuando haya acabado el efecto del texto de abajo
        efectillo_dos.setAnimationListener(new AnimationListener() {
            public void onAnimationEnd(Animation animation) {
                // La animación ha terminado, vamos a la pantalla de menú.
                startActivity(new Intent(TusPerlasInicioActivity.this, TusPerlasMenuActivity.class));
                TusPerlasInicioActivity.this.finish();
            }

            public void onAnimationRepeat(Animation animation) {
            }

            public void onAnimationStart(Animation animation) {
            }
        });

Esta es forma de recorrer la tabla y aplicar los efectos al contenido de sus celdas (custom_anim.xml, recordad):

     // Carga las animaciones para todas las vistas dentro del TableLayout
        Animation girando = AnimationUtils.loadAnimation(this, R.anim.custom_anim);
        LayoutAnimationController controller = new LayoutAnimationController(girando);

        TableLayout table = (TableLayout) findViewById(R.id.TableLayout01);
        for (int i = 0; i < table.getChildCount(); i++) {
            TableRow row = (TableRow) table.getChildAt(i);
            row.setLayoutAnimation(controller);
        }

Y por último la sobrecarga de onPause y onResume para terminar de rematar esta clase. Es en onResume donde llamamos a comienzaAnimacion():

            @Override
	    protected void onPause() {
	        super.onPause();
	        // Paramos la animación
	        TextView texto_superior = (TextView) findViewById(R.id.TextViewTopTitle);
	        texto_superior.clearAnimation();

	        TextView texto_abajo = (TextView) findViewById(R.id.TextViewBottomTitle);
	        texto_abajo.clearAnimation();

	        TableLayout table = (TableLayout) findViewById(R.id.TableLayout01);
	        for (int i = 0; i < table.getChildCount(); i++) {
	            TableRow row = (TableRow) table.getChildAt(i);
	            row.clearAnimation();
	        }
	    }

	    @Override
	    protected void onResume() {
	        super.onResume();
	        // Comienza el 'espectaculo' ;-)
	        comienzaAnimacion();
	    }

Representación de lo que tendremos en pantalla:

Si puedo voy a ir colgando el proyecto completo para que lo podáis ir probando vosotros. ¡ Hasta la próxima entrega !