Android animation an app's ListView animation effect _android

Once you are familiar with the implementation of the underlying animation, you can try to implement the beautiful animations that appear in the common app. Today I mainly introduce an app's ListView animation effect: When ListView is displayed, each list item in ListView is displayed according to the specified animation.
Speaking of more abstract, first to see an animation effect, this is the app Nest cattle decoration ListView Display Animation:

Have wood to feel very cool? There are wood there ah!?

First, Layout Animation
The so-called layout animation, in fact, is to add viewgroup animation effect, mainly used Layoutanimationcontroller to control the implementation. Layoutanimationcontroller is used to animate a control inside a layout, or a control inside a viewgroup, set in an XML file, or set in Java code.

1.1 Setting the layout animation in an XML file

First, we create a list_anim_layout.xml file under the Res/anim folder, which is the layout animation controller.

<layoutanimation xmlns:android= "http://schemas.android.com/apk/res/android" 
  android:delay= "30%" 
  android:animationorder= "Random" 
  android:animation= "@anim/slide_right"/> 

Android:delay Subclass Animation time interval (delay) 70% can also be a floating-point number such as "1.2" and so on.
Android:animationorder= the display of the "random" subclass random represents random.
The value of the Android:animationorder is

• Normal 0 default
  
• Reverse 1 Reverse
  
• Random 2 random

android:animation= "@anim/slide_right" indicates what the specific animation is when the list item is displayed!
Below, we define the animation effect of each list item when it is displayed, and Slide_right.xml:

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android= 
"http://schemas.android.com/apk/res/" Android " 
  android:interpolator=" @android: Anim/accelerate_interpolator "> 
 
  <translate 
    android: duration= "3000" 
    android:fromxdelta= "100%p" android:toxdelta= "0%p 
    "/> 
</set> 

The display effect is ListView the first time the item appears randomly, each item is slid from the right area to the left to display.
Next, you just need to animate this layout and assign it to ViewGroup:

<listview 
    android:id= "@+id/listview" 
    android:layout_width= "match_parent" 
    android:layout_height= "Match_parent" 
    android:layoutanimation= "@anim/list_anim_layout" 
    > 
</ListView> 

It is so simple to complete, quickly look at the effect of it:

1.2 Implementing layout animation in Java code
It is not difficult to implement layout animations in Java code, as long as you are familiar with the use of several APIs. The definition of animation is consistent with the above, except that you do not need to apply the control animation to the ListView, that is, android:layoutanimation= "@anim/list_anim_layout" This line of code can be deleted.
Next, you need to configure in Java code:

private void Startlayoutanim () { 
  //) creates a Animation object by loading the XML animation settings file; 
  Animation Animation = Animationutils.loadanimation (this, r.anim.slide_right); 
  Get a Layoutanimationcontroller object; 
  layoutanimationcontroller lac = new Layoutanimationcontroller (animation); 
  Sets the order in which the control is displayed; 
  lac.setorder (layoutanimationcontroller.order_reverse); 
  Set the control display interval time; 
  lac.setdelay (1); 
  Set Layoutanimationcontroller properties for ListView; 
  Listview.setlayoutanimation (LAC); 
} 

Observed, the effect is certainly consistent with the previous use of XML files.

Introduction here, some people may have doubts, Bowen began to introduce the "nest of cattle decoration" that effect, is the display of each list items will be displayed when the animation. We do all the animations of the list items together, but the display order is different. How is it possible to achieve that effect through our approach?
Indeed, by layout animation, there is no way to control each item to display animation when it is loaded. What 's the best way to do that?
Brothers, another way of thinking, if the layout of animation can not be completed, why not directly with a simple motion tween, combined with the display of each list item control, to achieve the Nest cattle decoration list display effect?
Then someone would ask, how do you know when each list item is loaded?
Have you forgotten the GetView () method of Baseadapter?
Yes, every time a list item is displayed, the Baseadaper GetView () method is invoked on its own initiative.

Second, imitation nest cattle decoration list of animation effects
First, we define an animation resource, which is the animation of a list item when it is displayed: Woniu_list_item.xml

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android= 
"http://schemas.android.com/apk/res/" Android " 
  android:interpolator=" @android: Anim/accelerate_interpolator " 
  > 
  <!--  Woniu list Item Animation  --> 
 
  <translate 
    android:duration= "$" 
    android:fromxdelta= "0" 
    android: Fromydelta= "Android:toxdelta=" " 
    0" 
    android:toydelta= "0"/> 
</set> 

The translation animation indicates that, from the bottom up, the vertical translation of 100px, the time is 500 milliseconds.
Next, we need to use the animation in the Baseadapter GetView () method:

Import Android.content.Context; 
Import Android.view.LayoutInflater; 
Import Android.view.View; 
Import Android.view.ViewGroup; 
Import android.view.animation.Animation; 
Import Android.view.animation.AnimationUtils; 
Import Android.widget.BaseAdapter; 
Import Android.widget.ImageView; 
 
 
Import Android.widget.TextView; 
 
Import java.util.List; 
 
  public class Woniulistadapter extends Baseadapter {private context mcontext; 
 
  Private Layoutinflater Minflater; 
 
  Private list<woniusimple> Mdatas; 
 
  Private Animation Animation; 
    Public Woniulistadapter (context context, list<woniusimple> datas) {mcontext = context; 
    Minflater = Layoutinflater.from (Mcontext); 
 
    Mdatas = datas; 
  Animation = Animationutils.loadanimation (Mcontext, R.anim.woniu_list_item); 
  @Override public int GetCount () {Mdatas!= null? Mdatas.size (): 0); @Override public Object getitem (int position) {return (Mdatas!= null? mDaTas.get (position): null); 
  @Override public long getitemid (int position) {return position;  @Override Public View getview (final int position, View Convertview, ViewGroup parent) {Viewholder Holder = 
    Null 
    int type = Getitemviewtype (position); 
 
      if (Convertview = = null) {//dropdown item Layout Convertview = Minflater.inflate (R.layout.list_item_woniu, NULL); 
 
      Holder = new Viewholder (); 
      Holder.tem_img = (ImageView) Convertview.findviewbyid (r.id.tem_img); 
      Holder.text_name = (TextView) Convertview.findviewbyid (r.id.text_name); 
 
      Holder.text_name = (TextView) Convertview.findviewbyid (r.id.text_name); 
 
    Convertview.settag (holder); 
    else {holder = (Viewholder) convertview.gettag (); 
 
    } convertview.startanimation (animation); 
 
    Final Woniusimple materialsimple = mdatas.get (position); if (materialsimple!= null) {//Holder.tem_img.setImageResource (R.mipmap.assist_defaulT_IMG); 
Holder.text_name.setText (Materialsimple.name); 
    Holder.text_mobile.setText (Materialsimple.mobile); 
  return convertview; 
 
    Class Viewholder {ImageView tem_img; 
 
    TextView Text_name; 
  TextView Text_mobile; 
 } 
 
}

    Let's briefly analyze where to apply the animation: 1, our adapter construction method contains the previously defined animations, live animation objects. 2, we in the GetView method, for Convertview set and start animation, that is, convertview.startanimation (animation).
    Simple enough, just two lines of code to enable the animation effect when each view item is loaded.
    However, we found that this is not a very perfect implementation, why do you say so?
    because you are sliding up the list at this point, you will find that the animation of the item that has already been loaded will start again. This experience is too bad. Why is this happening? The
    has an impact on animations because of the invocation of the GetView method. The GetView method in the adapter is called when each item is visible, so whether you go up or down, the GetView method is called repeatedly (which is why ListView is optimized when it is used).
    So, in order to solve the problem that just happened, we can set the identity, to judge, the animation of the view that has been loaded no longer start loading. The
    complete code is as follows:

Package com.lnyp.layoutanimation; 
Import Android.content.Context; 
Import Android.view.LayoutInflater; 
Import Android.view.View; 
Import Android.view.ViewGroup; 
Import android.view.animation.Animation; 
Import Android.view.animation.AnimationUtils; 
Import Android.widget.BaseAdapter; 
Import Android.widget.ImageView; 
 
 
Import Android.widget.TextView; 
Import Java.util.HashMap; 
Import java.util.List; 
 
Import Java.util.Map; 
 
  public class Woniulistadapter extends Baseadapter {private context mcontext; 
 
  Private Layoutinflater Minflater; 
 
  Private list<woniusimple> Mdatas; 
 
  Private Animation Animation; 
 
  Private Map<integer, boolean> isfrist; 
    Public Woniulistadapter (context context, list<woniusimple> datas) {mcontext = context; 
    Minflater = Layoutinflater.from (Mcontext); 
 
    Mdatas = datas; 
    Animation = Animationutils.loadanimation (Mcontext, R.anim.woniu_list_item); Isfrist = new Hashmap<integer, boolean> ();
  @Override public int GetCount () {Mdatas!= null? Mdatas.size (): 0); 
  @Override public Object getitem (int position) {return (Mdatas!= null mdatas.get (position): null); 
  @Override public long getitemid (int position) {return position;  @Override Public View getview (final int position, View Convertview, ViewGroup parent) {Viewholder Holder = 
    Null 
    int type = Getitemviewtype (position); 
 
      if (Convertview = = null) {//dropdown item Layout Convertview = Minflater.inflate (R.layout.list_item_woniu, NULL); 
 
      Holder = new Viewholder (); 
      Holder.tem_img = (ImageView) Convertview.findviewbyid (r.id.tem_img); 
      Holder.text_name = (TextView) Convertview.findviewbyid (r.id.text_name); 
 
      Holder.text_name = (TextView) Convertview.findviewbyid (r.id.text_name); 
 
    Convertview.settag (holder); 
    else {holder = (Viewholder) convertview.gettag (); //If this is the first time loading theView, use the animate if (isfrist.get (position) = NULL | | isfrist.get (position)) {Convertview.startanimation (animatio 
      n); 
    Isfrist.put (position, false); 
 
    Final Woniusimple materialsimple = mdatas.get (position); 
if (materialsimple!= null) {//Holder.tem_img.setImageResource (R.MIPMAP.ASSIST_DEFAULT_IMG); 
Holder.text_name.setText (Materialsimple.name); 
    Holder.text_mobile.setText (Materialsimple.mobile); 
  return convertview; 
 
    Class Viewholder {ImageView tem_img; 
 
    TextView Text_name; 
  TextView Text_mobile; 
 } 
 
}

See, add a isfirst to judge, so that you can effectively control the display of animation. The effect is as follows:

This article I mainly introduced two parts, one is layout animation layout animation, the use of layout animation can control the view groups each of the data display animation; and one is actual combat, imitation "nest cattle decoration" ListView when sliding each item sliding into the visible state of the animation effect. Through these two animation examples, I believe that can help you to better deal with animation, overcome the "animation phobia."

I hope this article will help you learn, we would like, small series will redouble their efforts to share more wonderful articles.