Android属性动画实现布局的下拉展开效果
在Android的3.0之后,google⼜提出了属性动画的这样⼀个框架,他可以更好的帮助我们实现更丰富的动画效果。所以为了跟上技术的步伐,今天就聊⼀聊属性动画。
这⼀次的需求是这样的:当点击⼀个View的时候,显⽰下⾯隐藏的⼀个View,要实现这个功能,需要将V iew的visibility属性设置gone为visible即可,但是这个过程是⼀瞬间的,并不能实现我们要的效果。所以,属性动画是个不错的⽅案。
先把效果贴上
第⼀个:
第⼆个:
前⾯的这个是隐藏着,后⾯这个是显⽰的。当点击这个箭头的时候,来切换显⽰或者隐藏。
现在开始编码:
布局⽂件如下
<LinearLayout xmlns:android="schemas.android/apk/res/android"
xmlns:tools="schemas.android/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"rotate属性
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) AnimatedValue();
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) {
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
mHiddenLayout = (LinearLayout) findViewById(R.id.linear_hidden);
mIv = (ImageView) findViewById(_iv);
mDensity = getResources().getDisplayMetrics().density;
mHiddenViewMeasuredHeight = (int) (mDensity * 120 + 0.5);
}
public void onClick(View v) {
if (Visibility() == 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 = Height();
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) AnimatedValue();
ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
layoutParams.height = value;
v.setLayoutParams(layoutParams);
}
});
return animator;
}
}
以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论