Android属性动画实现布局的下拉展开效果
程序员文章站
2024-03-05 14:00:12
在android的3.0之后,google又提出了属性动画的这样一个框架,他可以更好的帮助我们实现更丰富的动画效果。所以为了跟上技术的步伐,今天就聊一聊属性动画。
这一次...
在android的3.0之后,google又提出了属性动画的这样一个框架,他可以更好的帮助我们实现更丰富的动画效果。所以为了跟上技术的步伐,今天就聊一聊属性动画。
这一次的需求是这样的:当点击一个view的时候,显示下面隐藏的一个view,要实现这个功能,需要将v iew的visibility属性设置gone为visible即可,但是这个过程是一瞬间的,并不能实现我们要的效果。所以,属性动画是个不错的方案。
先把效果贴上
第一个:
第二个:
前面的这个是隐藏着,后面这个是显示的。当点击这个箭头的时候,来切换显示或者隐藏。
现在开始编码:
布局文件如下
<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.ltl.mpiggybank.mainactivity" > <relativelayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#458efd" android:padding="10dip" > <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerinparent="true" android:gravity="center_vertical" android:text="下拉展开动画" android:textcolor="#ffffff" android:textsize="20sp" /> </relativelayout> <linearlayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#548aea" android:gravity="center" android:orientation="vertical" > <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="20dip" android:text="昨日收益(元)" android:textcolor="#ffffff" android:textsize="16sp" /> <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="0.00" android:textcolor="#ffffff" android:textsize="45sp" /> </linearlayout> <linearlayout android:id="@+id/linear_hidden" android:layout_width="match_parent" android:layout_height="120dip" android:background="#548aea" android:gravity="center" android:orientation="vertical" > <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="20dip" android:text="显示的view" android:textcolor="#ffffff" android:textsize="16sp" /> <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="0.00" android:textcolor="#ffffff" android:textsize="35sp" /> </linearlayout> <linearlayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#548aea" android:gravity="center" android:onclick="onclick" android:orientation="vertical" > <imageview android:id="@+id/my_iv" android:layout_width="25dip" android:layout_height="25dip" android:layout_margin="20dip" android:src="@drawable/scroll" /> </linearlayout> </linearlayout>
这里面代码并不多,也很简单,三个线性布局,里面装载着各自的控件,并且还设置了id。按钮是一个线性布局,采用了onclick自身的点击事件。接下来,当点击了这个线性布局的时候,需要隐藏的控件最终到达一个高度,这个就是我们的目标值,只需要通过布局中的dp转换成像素就行了。
mdensity = getresources().getdisplaymetrics().density; mhiddenviewmeasuredheight = (int) (mdensity * 120 + 0.5);
这里是120就是我们布局里面定义的高度。
然后给这个过程增加一个动画效果。
valueanimator animator = valueanimator.ofint(start, end); animator.addupdatelistener(new animatorupdatelistener() { @override public void onanimationupdate(valueanimator arg0) { int value = (int) arg0.getanimatedvalue(); viewgroup.layoutparams layoutparams = v.getlayoutparams(); layoutparams.height = value; v.setlayoutparams(layoutparams); } });
通过这样一个简单的valueanimator ,就可以很方便的实现显示和隐藏的动画效果了。
下面是完整的代码。
import android.animation.animator; import android.animation.animatorlisteneradapter; import android.animation.valueanimator; import android.animation.valueanimator.animatorupdatelistener; import android.os.bundle; import android.support.v7.app.actionbaractivity; import android.view.view; import android.view.viewgroup; import android.view.window; import android.view.animation.animation; import android.view.animation.rotateanimation; import android.widget.imageview; import android.widget.linearlayout; public class mainactivity extends actionbaractivity { private linearlayout mhiddenlayout; private float mdensity; private int mhiddenviewmeasuredheight; private imageview miv; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); requestwindowfeature(window.feature_no_title); setcontentview(r.layout.activity_main); mhiddenlayout = (linearlayout) findviewbyid(r.id.linear_hidden); miv = (imageview) findviewbyid(r.id.my_iv); mdensity = getresources().getdisplaymetrics().density; mhiddenviewmeasuredheight = (int) (mdensity * 120 + 0.5); } public void onclick(view v) { if (mhiddenlayout.getvisibility() == view.gone) { animateopen(mhiddenlayout); animationivopen(); } else { animateclose(mhiddenlayout); animationivclose(); } } private void animateopen(view v) { v.setvisibility(view.visible); valueanimator animator = createdropanimator(v, 0, mhiddenviewmeasuredheight); animator.start(); } private void animationivopen() { rotateanimation animation = new rotateanimation(0, 180, animation.relative_to_self, 0.5f, animation.relative_to_self, 0.5f); animation.setfillafter(true); animation.setduration(100); miv.startanimation(animation); } private void animationivclose() { rotateanimation animation = new rotateanimation(180, 0, animation.relative_to_self, 0.5f, animation.relative_to_self, 0.5f); animation.setfillafter(true); animation.setduration(100); miv.startanimation(animation); } private void animateclose(final view 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); } }); animator.start(); } private valueanimator createdropanimator(final view v, int start, int end) { valueanimator animator = valueanimator.ofint(start, end); animator.addupdatelistener(new animatorupdatelistener() { @override public void onanimationupdate(valueanimator arg0) { int value = (int) arg0.getanimatedvalue(); viewgroup.layoutparams layoutparams = v.getlayoutparams(); layoutparams.height = value; v.setlayoutparams(layoutparams); } }); return animator; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: JDK环境变量配置
推荐阅读
-
Android属性动画实现炫酷的登录界面
-
Android实现文字翻转动画的效果
-
Android使用PullToRefresh实现上拉加载和下拉刷新效果的代码
-
Android属性动画实现布局的下拉展开效果
-
Android UI设计系列之自定义SwitchButton开关实现类似IOS中UISwitch的动画效果(2)
-
Android实现文字翻转动画的效果
-
Android xml实现animation的4种动画效果实例代码
-
Android xml实现animation的4种动画效果实例代码
-
Android自定义view实现阻尼效果的加载动画
-
Android UI设计系列之自定义SwitchButton开关实现类似IOS中UISwitch的动画效果(2)