Android Property Animation to achieve the layout of the Drop-down expansion effect _android

After Android's 3.0, Google has come up with a framework for property animations that will help us achieve richer animations. So in order to keep up with the pace of technology, today we'll talk about attribute animation.

The demand for this time is this: When you click on a view, show the hidden view below, to achieve this function, you need to set the visibility property of V iew gone as visible, but this process is instantaneous, and can not achieve the effect we want. Therefore, property animation is a good solution.

Put the effect on first.

The first one:

The second one:

The front one is hidden, and the latter one is displayed. When you click on this arrow, toggle the display or hide.

Now start coding:

The layout file is as follows

<linearlayout 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 "Android:o" rientation= "vertical" tools:context= "com.ltl.mpiggybank.MainActivity" > <relativelayout Android:layout_widt H= "Match_parent" android:layout_height= "wrap_content" android:background= "#458EFD" android:padding= "10dip"

    ; <textview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:layout_cen
      Terinparent= "true" android:gravity= "center_vertical" android:text= "Drop-down expand Animation" Android:textcolor= "#ffffff"
    Android:textsize= "20sp"/> </RelativeLayout> <linearlayout android:layout_width= "Match_parent" android:layout_height= "Wrap_content" android:background= "#548AEA" android:gravity= "center" Android:orientat ion= "Vertical" > <textview andRoid:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_margin= "20dip" Andr Oid:text= "Yesterday Revenue (yuan)" android:textcolor= "#ffffff" android:textsize= "16sp"/> <textview android:l Ayout_width= "Wrap_content" android:layout_height= "Wrap_content" android:text= "0.00" Android:textcolor= "# FFFFFF "android:textsize=" 45sp "/> </LinearLayout> <linearlayout android:id=" @+id/linear_hidden "Android:layout_width=" match_parent "android:layout_height=" 120dip "android:background=" #548AEA "Android:
      gravity= "center" android:orientation= "vertical" > <textview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:layout_margin= "20dip" android:text= "view displayed" ANDROID:TEXTC Olor= "#ffffff" android:textsize= "16sp"/> <textview android:layout_width= "Wrap_content" Andro Id:layout_height= "Wrap_cOntent "android:text=" 0.00 "android:textcolor=" #ffffff "android:textsize=" 35sp "/> </linearlayou t> <linearlayout android:layout_width= "match_parent" android:layout_height= "Wrap_content" Android:bac

    Kground= "#548AEA" android:gravity= "center" android:onclick= "OnClick" android:orientation= "vertical" > <imageview android:id= "@+id/my_iv" android:layout_width= "25dip" android:layout_height= "25dip" a

 Ndroid:layout_margin= "20dip" android:src= "@drawable/scroll"/> </LinearLayout> </LinearLayout>

There's not much code, it's simple, three linear layouts with their own controls loaded, and IDs set up. The button is a linear layout, using the onclick itself click event. Next, when you click on this linear layout, the controls that need to be hidden end up at a height, which is our target value, and it just needs to be converted to pixels through the DP in the layout.

Mdensity = Getresources (). Getdisplaymetrics (). density;
Mhiddenviewmeasuredheight = (int) (mdensity * 120 + 0.5);

Here's 120 is the height defined in our layout.

Then add an animation effect to the process.

  Valueanimator animator = Valueanimator.ofint (start, end);
    Animator.addupdatelistener (New Animatorupdatelistener () {

      @Override public
      void Onanimationupdate ( Valueanimator arg0) {
        int value = (int) arg0.getanimatedvalue ();
        Viewgroup.layoutparams layoutparams = V.getlayoutparams ();
        Layoutparams.height = value;
        V.setlayoutparams (Layoutparams);

      }
    );

Through such a simple valueanimator, it is easy to achieve the display and hidden animation effect.
Here is the complete code.

Import Android.animation.Animator;
Import Android.animation.AnimatorListenerAdapter;
Import Android.animation.ValueAnimator;
Import Android.animation.ValueAnimator.AnimatorUpdateListener;
Import Android.os.Bundle;
Import android.support.v7.app.ActionBarActivity;
Import Android.view.View;
Import Android.view.ViewGroup;
Import Android.view.Window;
Import android.view.animation.Animation;
Import android.view.animation.RotateAnimation;
Import Android.widget.ImageView;

Import Android.widget.LinearLayout;

  public class Mainactivity extends Actionbaractivity {private LinearLayout mhiddenlayout;

  private float mdensity;

  private int mhiddenviewmeasuredheight;

  Private ImageView MIV;
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Requestwindowfeature (Window.feature_no_title);

    Setcontentview (R.layout.activity_main);
    Mhiddenlayout = (linearlayout) Findviewbyid (R.id.linear_hidden); MIV = (ImageView) findviewbyiD (R.ID.MY_IV);

    Mdensity = Getresources (). Getdisplaymetrics (). density;

  Mhiddenviewmeasuredheight = (int) (mdensity * 120 + 0.5); 
      public void OnClick (View v) {if (mhiddenlayout.getvisibility () = = View.gone) {animateopen (mhiddenlayout);
    Animationivopen ();
      else {animateclose (mhiddenlayout);
    Animationivclose ();
    }} private void Animateopen (View v) {v.setvisibility (view.visible);
    Valueanimator animator = Createdropanimator (V, 0, mhiddenviewmeasuredheight);

  Animator.start (); private void Animationivopen () {rotateanimation animation = new Rotateanimation (0, 180, Animation.relati
    Ve_to_self, 0.5f, Animation.relative_to_self, 0.5f);
    Animation.setfillafter (TRUE);
    Animation.setduration (100);
  Miv.startanimation (animation); private void Animationivclose () {rotateanimation animation = new Rotateanimation (180, 0, Animation.relat Ive_to_self, 0.5f, animation.reLative_to_self, 0.5f);
    Animation.setfillafter (TRUE);
    Animation.setduration (100);
  Miv.startanimation (animation);
    private void Animateclose (final view view) {int origheight = View.getheight ();
    Valueanimator animator = Createdropanimator (view, origheight, 0); Animator.addlistener (New Animatorlisteneradapter () {@Override public void Onanimationend (animator animation)
      {view.setvisibility (View.gone);
    }

    });
  Animator.start (); Private Valueanimator createdropanimator (final View v, int start, int end) {Valueanimator animator = Valueanimat
    Or.ofint (start, end); Animator.addupdatelistener (New Animatorupdatelistener () {@Override public void onanimationupdate (Valueanimat
        or arg0) {int value = (int) arg0.getanimatedvalue ();
        Viewgroup.layoutparams layoutparams = V.getlayoutparams ();
        Layoutparams.height = value;

      V.setlayoutparams (Layoutparams);
    }
    }); REturn animator;
 }

}

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.