Android屬性動(dòng)畫(huà)實(shí)現(xiàn)布局的下拉展開(kāi)效果

更新時(shí)間：2016年07月12日 11:31:31 作者：qq_25193681

這篇文章主要為大家詳細(xì)介紹了Android屬性動(dòng)畫(huà)實(shí)現(xiàn)布局的下拉展開(kāi)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在Android的3.0之后，google又提出了屬性動(dòng)畫(huà)的這樣一個(gè)框架，他可以更好的幫助我們實(shí)現(xiàn)更豐富的動(dòng)畫(huà)效果。所以為了跟上技術(shù)的步伐，今天就聊一聊屬性動(dòng)畫(huà)。

這一次的需求是這樣的：當(dāng)點(diǎn)擊一個(gè)View的時(shí)候，顯示下面隱藏的一個(gè)View，要實(shí)現(xiàn)這個(gè)功能，需要將V iew的visibility屬性設(shè)置gone為visible即可，但是這個(gè)過(guò)程是一瞬間的，并不能實(shí)現(xiàn)我們要的效果。所以，屬性動(dòng)畫(huà)是個(gè)不錯(cuò)的方案。

先把效果貼上

第一個(gè)：

第二個(gè)：

前面的這個(gè)是隱藏著，后面這個(gè)是顯示的。當(dāng)點(diǎn)擊這個(gè)箭頭的時(shí)候，來(lái)切換顯示或者隱藏。

現(xiàn)在開(kāi)始編碼：

布局文件如下

<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:orientation="vertical"
  tools:context="com.ltl.mpiggybank.MainActivity" >

  <RelativeLayout
    android:layout_width="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_centerInParent="true"
      android:gravity="center_vertical"
      android:text="下拉展開(kāi)動(dòng)畫(huà)"
      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:orientation="vertical" >

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="20dip"
      android:text="昨日收益(元)"
      android:textColor="#ffffff"
      android:textSize="16sp" />

    <TextView
      android:layout_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"
      android:textColor="#ffffff"
      android:textSize="16sp" />

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="0.00"
      android:textColor="#ffffff"
      android:textSize="35sp" />
  </LinearLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#548AEA"
    android:gravity="center"
    android:onClick="onClick"
    android:orientation="vertical" >

    <ImageView
      android:id="@+id/my_iv"
      android:layout_width="25dip"
      android:layout_height="25dip"
      android:layout_margin="20dip"
      android:src="@drawable/scroll" />
  </LinearLayout>

</LinearLayout>

這里面代碼并不多，也很簡(jiǎn)單，三個(gè)線(xiàn)性布局，里面裝載著各自的控件，并且還設(shè)置了ID。按鈕是一個(gè)線(xiàn)性布局，采用了onClick自身的點(diǎn)擊事件。接下來(lái)，當(dāng)點(diǎn)擊了這個(gè)線(xiàn)性布局的時(shí)候，需要隱藏的控件最終到達(dá)一個(gè)高度，這個(gè)就是我們的目標(biāo)值，只需要通過(guò)布局中的dp轉(zhuǎn)換成像素就行了。

mDensity = getResources().getDisplayMetrics().density;
mHiddenViewMeasuredHeight = (int) (mDensity * 120 + 0.5);

這里是120就是我們布局里面定義的高度。

然后給這個(gè)過(guò)程增加一個(gè)動(dòng)畫(huà)效果。

  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);

      }
    });

通過(guò)這樣一個(gè)簡(jiǎn)單的ValueAnimator ，就可以很方便的實(shí)現(xiàn)顯示和隱藏的動(dòng)畫(huà)效果了。
下面是完整的代碼。

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.RELATIVE_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.RELATIVE_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 = 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);

      }
    });
    return animator;
  }

}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: