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

xiaoxiao2021-02-28  67

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

<?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://www.6miu.com/read-51238.html

最新回复(0)