下拉展开动画效果_下拉展开的动画效果

实现的效果

当点击一个View的时候，显示下面隐藏的一个View。要实现这个效果，只需要在点击的时候将View的Visition属性由gone设置为visible即可，但这个过程是瞬间完成的，怎么让View在显示时增加一个动画效果呢？需要实现这个效果，需要让隐藏的View的高度不断发生变化，但是不是迅速增大到目标值。所以用ValueAnimator来模拟这个过程。
1

首先，写一个简单的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@android:color/holo_blue_dark"
      android:gravity="center_vertical"
      android:onClick="llClick"
      android:orientation="horizontal">

      <ImageView
          android:id="@+id/iv"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:src="@mipmap/ic_launcher"/>

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginLeft="5dp"
          android:gravity="left"
          android:text="click me"
          android:textSize="30dp"/>

  </LinearLayout>

  <LinearLayout
      android:id="@+id/ll_hidden_view"
      android:layout_width="match_parent"
      android:layout_height="40dp"
      android:background="@android:color/holo_orange_light"
      android:gravity="center_vertical"
      android:orientation="horizontal"
      android:visibility="gone">

      <ImageView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          android:src="@mipmap/ic_launcher"/>

      <TextView
          android:id="@+id/tv_hidden"
          android:layout_width="wrap_content"
          android:layout_height="match_parent"
          android:gravity="center"
          android:text=" i am hidden"
          android:textSize="20dp"/>

  </LinearLayout>

</LinearLayout>
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

最后，使用ValueAnimator来创建一个从0到目标值的数值变化器，并由此来改变View的布局属性

实例代码如下

package com.zjzs.gisq.app;

import android.animation.ValueAnimator;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.Toast;

/**
* Created by susr on 2016/11/9 14:11.
*/
public class CloneActivity extends AppCompatActivity {

private LinearLayout mHiddenView;
private Float        mDensity;
private int          mHiddenViewHeight;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_clone);

    mHiddenView = (LinearLayout) findViewById(R.id.ll_hidden_view);

    // 获取像素的密度
    // density :密度
    mDensity = getResources().getDisplayMetrics().density;
    // 获取布局的高度
    mHiddenViewHeight = (int) (mDensity * 30 + 0.5F);
}

public void llClick(View view) {
    if (mHiddenView.getVisibility() == View.GONE) {

        Toast.makeText(this, "打开动画了", Toast.LENGTH_SHORT).show();
        animateOpen(mHiddenView);
        // mHiddenView.setVisibility(View.VISIBLE);
    } else {

        Toast.makeText(this, "关闭动画了", Toast.LENGTH_SHORT).show();
        animateClose(mHiddenView);
    }


}

private void animateClose(final View view) {
    int height = view.getHeight();
    ValueAnimator animator = createDropAnimator(view, height, 0);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            view.setVisibility(View.GONE);
        }
    });
    animator.start();
}

private void animateOpen(View view) {
    mHiddenView.setVisibility(View.VISIBLE);
    ValueAnimator animator = createDropAnimator(view, 0, mHiddenViewHeight);
    animator.start();
}

private ValueAnimator createDropAnimator(final View view, int start, int end) {
    ValueAnimator animator = ValueAnimator.ofInt(start, end);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            // PropertyValuesHolder[] values = animation.getValues();
            int value = (Integer) animation.getAnimatedValue();
            ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
            layoutParams.height = value;
            view.setLayoutParams(layoutParams);
        }
    });

    return animator;
}
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

}