Cómo crear ListView animados en tus apps Android con ListViewAnimations

En este artículo voy a contarles cómo implementar ListView animados en sus aplicaciones Android usando la librería ListViewAnimations de Niek Haarman. ListViewAnimations es una librería open source que nos permite realizar varios tipos de manipulaciones con las listas (ListView) como son: Swipe-to-Dismiss, Sticky headers, items expandibles, etc.; pero en esta ocasión, nos concentraremos en las animaciones de items.

La clase principal es la AnimationAdapter, esta nos permite animar elementos ListView o GridView. Para lograr ese comportamiento debemos «envolver» nuestro adapter original en uno de los AnimationAdapter predefinidos: AlphaAnimationAdapter, ScaleInAnimationAdapter, SwingBottomInAnimationAdapter, SwingLeftInAnimationAdapter o SwingRightInAnimationAdapter.

 //instancia de mi adaptador original
MiAdaptador myAdapter = new MiAdaptador();
 //instancia del AlphaAnimationAdapter al cual le seteo mi adaptador original
AlphaInAnimationAdapter animationAdapter = new AlphaInAnimationAdapter(myAdapter); 
//seteo la lista al AlphaAnimationAdapter
animationAdapter.setAbsListView(mListView);
//seteo el AlphaAnimationAdapter a la lista
mListView.setAdapter(animationAdapter);

También podemos crear nuestra propia implementación del AnimationAdapter, es decir que, tenemos la posibilidad de crear nuestras animaciones personalizadas.

Configurar ListViewAnimations

Lo primero que debemos hacer es crear un proyecto, descargarnos la librería y configurarla en nuestro proyecto; para eso debemos descargar los distintos JARS que componen la librería y agregarlos a nuestro proyecto como librerías externas; si no saben como hacerlo pueden revisar la documentación oficial donde se explica el proceso tanto para Eclipse como para Android Studio.

[bctt tweet=»Quieres mejorar tus apps Android? te mostramos cómo hacerlo usando ListViewAnimations.»]

Implementar animaciones en las listas

En particular, lo que vamos a animar son las apariciones de los items de la lista a medida que van moviendo o «scrolleando» la misma. La implementación es muy sencilla, el siguiente código corresponde al main activity del proyecto:

package net.tecnopedia.simplelistanimationdemo;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import android.widget.TextView;

import com.nhaarman.listviewanimations.appearance.simple.SwingRightInAnimationAdapter;

import java.util.ArrayList;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		ListView listaOpciones = (ListView) findViewById(R.id.listaOpciones);
		
		 ArrayList<String> opciones = new ArrayList<String>();

	        //genero items para la lista
	        for(int i=0;i<100;i++){
	        	opciones.add("Item " + i);
	        }

	        MyListAdapter adapter = new MyListAdapter(this, opciones);
	
	        //instancio una animacion para el adaptador
	        SwingRightInAnimationAdapter swingAnimator = new SwingRightInAnimationAdapter(adapter);
	
	        //tambien existen otros tipos de animaciones
	        //AlphaInAnimationAdapter alphaAnimAdapter = new AlphaInAnimationAdapter(adapter);
	        //SwingBottomInAnimationAdapter swingAnimator = new SwingBottomInAnimationAdapter(adapter);
	
	        //seteo la lista al adapter y viceversa
	        swingAnimator.setAbsListView(listaOpciones);
	        listaOpciones.setAdapter(swingAnimator);
        
	}

    /*
     Implemento un adaptador simple
     */
    private class MyListAdapter extends com.nhaarman.listviewanimations.ArrayAdapter<String> {

        private Context mContext;

        private class MiViewHolder {
            public TextView text;
        }

        public MyListAdapter(Context context, ArrayList<String> items) {
            super(items);
            mContext = context;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View v = convertView;
            TextView txt = null;

            if (v == null) {
                v =  LayoutInflater.from(mContext).inflate(R.layout.list_item, parent, false);
                MiViewHolder viewHolder = new MiViewHolder();
                viewHolder.text = (TextView)v.findViewById(R.id.list_row);
                v.setTag(viewHolder);

            }
            MiViewHolder holder = (MiViewHolder) v.getTag();
            holder.text.setText(getItem(position));

            return v;
        }
    }
}

Además, debemos implementar el layout de la lista y el de los items de la lista:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <ListView
       android:id="@+id/listaOpciones"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:layout_margin="14dp" 
       android:clipToPadding="false"
       android:fitsSystemWindows="true"/>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp"
    tools:ignore="overdraw">

    <TextView
        android:id="@+id/list_row"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:paddingLeft="8dp"
        android:text="prueba"
        android:textColor="#000000"
        android:textSize="18sp"
        android:textStyle="bold" >

    </TextView>

</LinearLayout>

Y eso sería todo, en próximos artículos seguiremos viendo otras funcionalidades de esta librería que sin duda tiene mucho para dar, si quieres continuar leyendo sobre librerías para mejorar tus apps Android te dejamos este artículo donde presentamos 5 librerías open source para mejorar los ListViews. Si tienen cualquier duda o sugerencia déjenla en los comentarios que con gusto intentaremos responder.