6.4.2.-Programación en Android - Splash (III)

6.4.2.- Programación en Android – Creando nuestra Splash (III)

En este capítulo continuaremos modificando el layout de nuestra pantalla de Splash añadiéndole algunas animaciones para hacerlo más vistoso.

De momento nuestra pantalla de splash tiene la siguiente apariencia:

Añadiendo recursos de animación.

En principio vamos a crear estos ficheros para las animaciones: fade_in1.xml, fade_in2.xml, fade_out.xml, animacion_simbolos.xml.

Fichero	Tipo de animación
fade_in1.xml	Animación de aparición, de transparente al color que tenga el objeto. Trabajaremos sobre el canal alpha.
fade_in2.xml	Igual que fade_in1.xml pero en este caso el tiempo de comienzo será distinto.
fade_out.xml	Desvanecimiento. Fundido a negro.
animacion_simbolos.xml	Animación que aplicaremos a los símbolos gráficos. Una rotación y un zoom.

Para hacer el fichero fade_in1.xml, debemos crear la carpeta anim dentro del directorio res, en caso de no tenerla. Una vez la hallamos creado, si con ella seleccionada pulsamos el botón derecho del ratón y seleccionamos Nuevo->Android XML file, nos aparecerá un diálogo en el que nos pide unos datos, que por defecto (al haber seleccionado el directorio anim) ya nos pone en el tipo de recurso “Tweened animation” (Animación interpolada). En caso de no ser así pues lo elegimos nosotros, ponemos el nombre de nuestro fichero (fade_in.xml) y pulsamos en finalizar.

Abrimos el fichero que hemos creado, y lo editamos para que quede de la siguiente manera:

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

Lo que hemos creado aquí será una animación interpolada (tween) que modificará el canal alpha (transparencia) del elemento al que lo apliquemos. Dicho cambio lo hará desde la transparencia total (android:fromAmpha=”0.0”) hasta hacerlo totalmente opaco (android:toAlpha=”1.0”) y este proceso se prolongará durante 2000 milisegundos (2 segundos) (android:duration=”2000”).

Guardamos el fichero y creamos otro con el nombre “fade_in2.xml”, en el que escribiremos lo siguiente:

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

Lo único en lo que difiere este fichero con respecto al anterior es en dónde pone android:startOffset=”2000”, y este parámetro lo que hace es indicarle al sistema que comience a aplicar el efecto cuando hayan transcurrido 2000 milisegundos (2 segundos).

Creamos ahora un fichero con el nombre “fade_out.xml”, y le ponemos el siguiente código:

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

Creo que no es necesario indicar nada de lo que hay en este fichero.

Ahora creamos un fichero un poco más complejo al que llamaremos “animacion_simbolos.xml”, al editarlo pondremos lo siguiente:

<?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"/> <scale android:interpolator="@android:anim/overshoot_interpolator" android:pivotX="50%" android:pivotY="50%" android:fromXScale="0.0" android:fromYScale="0.0" android:toXScale="1.0" android:toYScale="1.0" android:duration="2000"/> </set>

En este fichero vemos que usamos la etiqueta “set” para crear un conjunto de animaciones a aplicar, tenemos una rotación, un cambio en la transparencia, un cambio en la escala y hasta le aplicamos un interpolador (overshoot_interpolator).

Guardamos todo y vamos a aplicar estos efectos a los elementos de nuestro layout.

En el fichero ActividadSplash.java, añadimos un método al que podemos llamar “animacionSplash()”, que será el encargado de aplicar las diversas animaciones a los elementos. En este método escribimos lo siguiente:

//Animación para el TITULO1 TextView titulo1 = (TextView) findViewById(R.id.textView_Titulo1); Animation fadein1 = AnimationUtils.loadAnimation(this, R.anim.fade_in1); titulo1.startAnimation(fadein1);

En estas líneas derivamos una clase de Animation (fadein1) y le asignamos la animación que teníamos en el fichero XML “fade_in1”.

La animación comienza cuando llamamos al método startAnimation con el parámetro de Animation (fadein1).

Hacemos lo mismo para el otro control textview, el del Título2.

Ahora vamos a hacer algo diferente con las animaciones de la tabla. Las animaciones también se pueden aplicar a todos los controles hijos, como por ejemplo con los elementos de una tabla, para ello utilizamos un objeto de tipo LayoutAnimationController. Para realizarlo de esta manera, debemos cargar la animación, crear una instancia de LayoutAnimationController, configurarla y pasársela al método setLayoutAnimation, por ejemplo:

//Animación para los Bitmaps. Animation animacionSimbolos = AnimationUtils.loadAnimation(this, R.anim.animacion_simbolos); LayoutAnimationController controlador = new LayoutAnimationController(animacionSimbolos); TableLayout tabla = (TableLayout) findViewById (R.id.tableLayout_Tabla1); tabla.setLayoutAnimation(controlador);

En este caso, no es necesario llamar al método startAnimation(), porque ya lo hace el LayoutAnimationController.

Este método aplica la animación a cada vista hija, pero con un desfase en el tiempo del 50% de la duración total (por defecto). También se le puede poner algún atributo, como cambiar el orden en que aplica el efecto así como para que aplique el efecto de forma aleatoria.

Ahora que hemos creado las animaciones, añadimos una llamada a esté método ( animacionSplash() ) dentro del método onCreate de ActividadSplash(). Ya podemos hacer una pequeña ejecución del programa para ver que es lo que ocurre.

Borrar las animaciones cuando vamos a onPause()

Cuando la aplicación se pone en pausa, sería recomendable parar las animaciones, para ello se llama al método clearAnimation().

Vamos a implementar el método onPause (botón derecho sobre el fichero java, Codigo Fuente->Alterar o implementar métodos->onPause), y en este método insertamos lo siguiente:

//Paramos todas las animaciones: TextView titulo1 = (TextView) findViewById(R.id.textView_Titulo1); titulo1.clearAnimation(); TextView titulo2 = (TextView) findViewById(R.id.textView_Titulo2); titulo2.clearAnimation(); TableLayout tabla = (TableLayout) findViewById(R.id.tableLayout_Tabla1); tabla.clearAnimation();

También podríamos tener en cuenta el volver a ponerlas en marcha en el método onResume() o en onRestart(), pero de momento con esto nos es suficiente.

Pasar a la siguiente actividad

Ahora que la animación ya está creada, al terminar esta podemos pasar a la siguiente actividad (actividadMenu), para ello podemos crear un intent que se ejecute cuando termine la animación de mayor duración (fade_in2).

Para ello creamos un objeto AnimationListener, que será encargado de ver en que estado está la animación. Este objeto tiene callbacks para controlar los eventos y saber cuándo comienza, termina o vuelve a comentar (ciclo) la animación. En nuestro caso sólo debemos controlar cuando termina el evento ( onAnimationEnd() )

Vamos a ver como creamos el Listener:

fadein2.setAnimationListener(new AnimationListener() { public void onAnimationEnd(Animation animation) { //Llama a la actividad destino Intent iExp = new Intent(ActividadSplash.this, ActividadMenu.class); startActivity(iExp); //Finaliza esta actividad para no dejarla // en el buffer de vuelta atras. ActividadSplash.this.finish(); } @Override public void onAnimationRepeat(Animation animation) { // TODO Auto-generated method stub } @Override public void onAnimationStart(Animation animation) { // TODO Auto-generated method stub } });

El listener se lo hemos asignado a fadein2, ya que es la animación que más tiempo tarda en ejecutarse (la última en finalizar).

Ejercicio: En el código creamos también un fichero XML para un desvanecimiento (fade_out)... intenta aplicarlo cuando finalize esta aplicación.

Si ejecutamos nuestra aplicación, veremos como realiza las animaciones y después pasa a la ActividadMenu, y que en caso de pulsar la tecla de atrás que no vuelve a mostrar la ActividadSplash.

Más adelante modificaremos esta función para hacer que llame a nuestra actividad de salida (ActividadSalida) en caso de pulsar la tecla atrás.

Ver. 1.0 – Revisión 10/02/2012