Android Animation Animation (i): When a ListView slide is introduced from the layout animation, the display animation of each item item

Preface:

Before, I have written two blog posts, to show you how the basic Android animation is implemented, if not clear, you can click to view: Android Animation animation in detail (a): Motion tweens and Android animation animation (ii): Combo animation effects. Once you're familiar with the basics of animation, you can try to implement the beautiful animations that appear in common apps. Today I mainly introduce the animation effect of an app's ListView: When the ListView is displayed, every list item in the ListView is displayed according to the specified animation.

Say more abstract, first show you an animation effect, this is the app Nest Cow decoration of the listview display animation:

Do you think it's cool to have a wood? There is a wood there ah!?

First, Layout Animation

The so-called layout animation, in fact, is to add ViewGroup display 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, and can be set in an XML file or in Java code.

1.1 Setting up layout animations 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 Sub-animation interval (delay) 70% can also be a floating-point number such as "1.2" and so on.
Android:animationorder= the "random" subclass is displayed randomly, which means random.
The value of the Android:animationorder is
Normal 0 Default
Reverse 1 Reverse
Random 2 stochastic
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 display, 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= " "        android:fromxdelta=" 100%p "        android:toxdelta=" 0%p "/></set>

displays the effect for the first time the ListView appears for item randomly each item is shifted from the right area to the left to the displayed place.

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, take a look at the effect of it:

1.2 Implementing layout animations in Java code

There is no difficulty in implementing layout animations in Java code, as long as you are familiar with the use of several APIs. The definition of animations is consistent with the above, except that you do not need to apply control animations to the ListView, that is, the android:layoutanimation= "@anim/list_anim_layout" code can be deleted.

Next, you need to configure it in Java code:

    private void Startlayoutanim () {        ///Create 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 controls are displayed;        lac.setorder (layoutanimationcontroller.order_reverse);        Set the control display interval time;        lac.setdelay (1);        Set the Layoutanimationcontroller property for the ListView;        Listview.setlayoutanimation (LAC);    }

under observation, the effect is certainly consistent with the XML file that was used before.

Introduced here, may be some people will be questioned, the first introduction of the "Nest cow decoration" effect, is every list item display when the animation. The animations for all of our list items are displayed together, just in a different order of display. How could that effect be achieved through our approach?

Indeed, with the layout animations, there is no way to control that each item is animated at load time. What's the best thing to do?

Brothers, change the idea, if the layout animation can not be completed, why not directly with the simple tween animation, and then combined with the display control of each list item, to achieve the effect of the Nest cow decoration list display?

Then someone would ask, how do you know when each list item is loaded?

Have you forgotten Baseadapter's GetView () method?

Yes, each time a list item is displayed, the Baseadaper GetView () method is called actively.

second, imitation nest cow decoration list of the animation effect

First, we define an animation resource, which is the animation when the list item 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 panning animation represents a vertical shift of 100px from bottom to top, with a time of 500 milliseconds.

Next, we need to use the animation in Baseadapter's 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 () {return (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) {//drop-down 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 (Materialsim        Ple.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 Riga contains the previously defined animation, the live animation object. 2, we in the GetView method, for Convertview set up and start animation, that is, convertview.startanimation (animation).

Simple enough, with just two lines of code, you can start animating each view item when it's loaded.

However, we find that this is not a very perfect realization, why do we say so?

Because you're sliding up the list now, you'll notice that the animation of the loaded item starts again. This is a terrible experience. Why does this happen?

Because the GetView method is called, the opportunity has an effect on the animation. The GetView method in adapter is called when each item is visible, so the GetView method is called repeatedly (this is where the ListView is optimized when it is used), whether you are sliding or slipping.

So, in order to solve the problem that just happened, we can set the identity, make the judgment, the already loaded view's animation no longer starts to load.

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 () {return (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) {//drop-down 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 the view is loaded for the first time, use the dynamicDraw if (isfrist.get (position) = = NULL | | isfrist.get (position)) {convertview.startanimation (animation);        Isfrist.put (position, false);        } final Woniusimple materialsimple = mdatas.get (position); if (materialsimple! = null) {//Holder.tem_img.setImageResource (R.MIPMAP.ASSIST_DEFAULT_IMG);//Hold        Er.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 the animation. The effect is as follows:

End:

In this article, I mainly introduce two parts, one is the layout animation, and the layout animation can control the display animation of each data in the view groups. One is the actual combat, imitation "wo niu decoration" The ListView slides when each item slides into the visible state of the animation effect. Through these two animated examples, I believe that we can help you better deal with the animation, to overcome the "animation phobia."

Source code (FREE): http://download.csdn.net/detail/zuiwuyuan/9051895

1.1 Setting up layout animations in an XML file

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Android Animation Animation (i): When a ListView slide is introduced from the layout animation, the display animation of each item item