当点击一个View时,显示下面隐藏的一个View(折叠的动画效果)

先写一个简单的布局 , 用于点击和隐藏 , 如下:

通过一个ValueAnimator来实现折叠的动画效果 , 代码如下:

package com.lyx.folddemo;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

    private LinearLayout mFoldedView;
    private float mDensity;
    private int mFoldedViewMeasureHeight;
    private ImageView iBtn;

    private boolean isFold = false;//是否是收起状态
    boolean isAnimating = false;//是否正在执行动画

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iBtn = (ImageView) findViewById(R.id.iBtn);
        mFoldedView = (LinearLayout) findViewById(R.id.content);
        showIbtn();

        //获取像素密度
        mDensity = getResources().getDisplayMetrics().density;
        //获取布局的高度
        int w = View.MeasureSpec.makeMeasureSpec(0,
                View.MeasureSpec.UNSPECIFIED);
        int h = View.MeasureSpec.makeMeasureSpec(0,
                View.MeasureSpec.UNSPECIFIED);
        mFoldedView.measure(w, h);
        int height = mFoldedView.getMeasuredHeight();
        mFoldedViewMeasureHeight = (int) (mDensity * height + 0.5);
        
        iBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //如果动画正在执行,直接return,相当于点击无效了,不会出现当快速点击时,
                // 动画的执行和ImageButton的图标不一致的情况
                if (isAnimating) return;
                //如果动画没在执行,走到这一步就将isAnimating制为true , 防止这次动画还没有执行完毕的
                //情况下,又要执行一次动画,当动画执行完毕后会将isAnimating制为false,这样下次动画又能执行
                isAnimating = true;

                if (mFoldedView.getVisibility() == View.GONE) {
                    //打开动画
                    animateOpen(mFoldedView);
                } else {
                    //关闭动画
                    animateClose(mFoldedView);
                }
            }


        });
    }

    /**
     * 展示ImageButton图标
     */
    private void showIbtn() {
        if (isFold) {
            iBtn.setImageResource(R.drawable.aa);
        } else {
            iBtn.setImageResource(R.drawable.arrow_bottom_black);
        }
        isFold = !isFold;
    }


    private void animateOpen(LinearLayout view) {
        view.setVisibility(View.VISIBLE);
        ValueAnimator animator = createDropAnimator(view, 0, mFoldedViewMeasureHeight);
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                isAnimating = false;
            }
        });
        animator.start();
    }

    private void animateClose(final LinearLayout 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);
                isAnimating = false;
            }
        });
        animator.start();
    }

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


}

实现的效果如下:

说一下一开始写这个效果出现的坑 , 就是最初我没有加isAnimating开关 , 就是动画是否执行完毕的开关 , 当我快速的点击折叠按钮 , 会出现按钮图标紊乱的情况 , 即当箭头向上时 , View已经收起了 , 效果图如下:

这是因为当快速点击时 , 动画的执行和ImageButton的图标改变不一致 , 就是可能动画还没执行 , 图标已经改变了 .所以我加了个isAnimating开关 , 已防止这个情况出现.
由于本人语言组织能力不足 , 哈哈…担心表达的不清楚 , 啰嗦的比较多 , 请各位看官包涵!