Android属性动画实现布局的下拉展开效果

内容摘要
在Android的3.0之后，google又提出了属性动画的这样一个框架，他可以更好的帮助我们实现更丰富的动画效果。所以为了跟上技术的步伐，今天就聊一聊属性动画。
这一次的需求是这样
文章正文

在Android的3.0之后，google又提出了属性动画的这样一个框架，他可以更好的帮助我们实现更丰富的动画效果。所以为了跟上技术的步伐，今天就聊一聊属性动画。

这一次的需求是这样的：当点击一个View的时候，显示下面隐藏的一个View，要实现这个功能，需要将V iew的visibility属性设置gone为visible即可，但是这个过程是一瞬间的，并不能实现我们要的效果。所以，属性动画是个不错的方案。

先把效果贴上

第一个：


 第二个：

前面的这个是隐藏着，后面这个是显示的。当点击这个箭头的时候，来切换显示或者隐藏。

现在开始编码：

布局文件如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<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="下拉展开动画"
      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>

这里面代码并不多，也很简单，三个线性布局，里面装载着各自的控件，并且还设置了ID。按钮是一个线性布局，采用了onClick自身的点击事件。接下来，当点击了这个线性布局的时候，需要隐藏的控件最终到达一个高度，这个就是我们的目标值，只需要通过布局中的dp转换成像素就行了。

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

这里是120就是我们布局里面定义的高度。

然后给这个过程增加一个动画效果。

1
2
3
4
5
6
7
8
9
10
11
12
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);
 
    }
  });

通过这样一个简单的ValueAnimator ，就可以很方便的实现显示和隐藏的动画效果了。
下面是完整的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
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;
  }
 
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。
代码注释
上一篇ajax传递多个参数的实现代码下一篇div css图文混排列表设计中的基础问题总结

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！