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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Snow_Ice_Yang/article/details/82969142

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

<?xml version="1.0" encoding="utf-8"?>
<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.eg.lyx.demo.MainActivity">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#fadfaf"
        android:gravity="center"
        android:text="点击下面的箭头可以折叠放开View"/>

    <ImageButton
        android:id="@+id/iBtn"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:background="#FFFFFF"
        android:src="@drawable/arrow_bottom_black"/>

    <LinearLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:visibility="gone">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:background="#afc7fa"
            android:ellipsize="end"
            android:gravity="center"
            android:singleLine="true"
            android:text="CtsCardLocationMgr.INSTANCE.INSTANCE.isFromRedPoint没有制为true"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:background="#daaffa"
            android:gravity="center"
            android:text="smartIP为空44139"/>

    </LinearLayout>
</LinearLayout>

通过一个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开关 , 已防止这个情况出现.

文章参考于：

https://blog.csdn.net/RELY_ON_YOURSELF/article/details/71255390