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

来源：互联网发布：叶诗文知乎编辑：程序博客网时间：2024/05/19 13:25

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

<?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开关 , 已防止这个情况出现.
由于本人语言组织能力不足 , 哈哈…担心表达的不清楚 , 啰嗦的比较多 , 请各位看官包涵!

1 1