[Tutoriel] : Android ListView avec Animations [ +Demos]

Suite au tutoriel précdedant concernant la personnalisation des ListViews :

nous allons voir comment ajouter des animations à notre liste des informations (UI) .

Voici un avant goût .. 

Animer une ListView

Pour le code finale , il est disponible sur mediafire:

 

Code final

Pour aboutir à ce résultat, il faut bien suivre le tutoriel déjà cité.

L'idée générale c'est qu'on va appliquer les animations , ecrites en xml dans le dossier res/anim/ , aux items de la liste dans l'adaptateur de la ListView dans la classe 'FoodListAdapter'.

Avant tout , on va ajouter les fichiers xml d'animations dans le soosier res/anim (on le crée s'il n'existe pas) :

•  Effet "fade in": fade_in.xml

< alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="100"
    android:fromAlpha="0.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="1.0" / >

Démo Effet Fade in

•  Effet "Push left in" : push_left_in.xml

< set xmlns:android="http://schemas.android.com/apk/res/android">
   < translate android:fromXDelta="100%p" android:toXDelta="0"
         android:duration="300" />
   < alpha android:fromAlpha="0.0" android:toAlpha="1.0"
         android:duration="300" />
< /set>

Démo Effet Push left in

• Effet "Push up in" : push_up_in.xml :

< set xmlns:android="http://schemas.android.com/apk/res/android">
   < translate android:fromYDelta="100%p" android:toYDelta="0"
          android:duration="500"/>
   < alpha android:fromAlpha="0.0" android:toAlpha="1.0"
          android:duration="500" />
< /set>

Démo Effet Push up in

• Effet "Slide in Top" : slide_in_top.xml :

< set xmlns:android="http://schemas.android.com/apk/res/android" >
    < translate
        android:duration="1000"
        android:fromYDelta="-100%p"
        android:toYDelta="1" />
< /set>

Démo Effet slide in top

Et il y'a d'autres effets téléchargeable ici (dossier anim , mettez le dans res/ )

Animations xml

Passons maintenant à notre classe adaptateur (FoodListAdapter), on ajoute deux variables gloabales:

private List listFood = null;
 LayoutInflater layoutInflater;
    Context context; // nouvel
    private int lastPosition = -1; //nouvel
    
 // constructeur
 public FoodListAdapter(Context context, List listFood) {
  this.listFood = listFood;
  layoutInflater = LayoutInflater.from(context);
  this.listFood = listFood;
  this.context=context; //nouvel

 }

Pour appliquer les animations en modifie la méthode getView() en ajoutant :

@Override
 public View getView(int position, View convertView, ViewGroup parent) {
         .... 
Animation animation = AnimationUtils.loadAnimation(context, (position >lastPosition) 
    ? R.anim.up_from_bottom : R.anim.up_from_bottom);
  convertView.startAnimation(animation);
     lastPosition = position;
  return convertView;

 }

Et on change R.anim.up_from_bottom par l'effet desiré ou bien on applique 2 effets.

Vous avez aimé cet article ? alors suivez-nous sur Twitter, Google+ et Facebook, et partagez-le avec les boutons ci-dessous ! Vos commentaires sont les bienvenus.