android 动画实现侧滑菜单效果

在项目开发过程中，我们有时需要实现菜单贴边隐藏效果，对此android 系统提供了抽屉控件给我们使用，但相对其他控件来说，抽屉效果实现还是有点麻烦，下面我们用动画来实现一个弹出菜单的效果，效果图如下：

左图：菜单收缩效果    右图：菜单弹出效果

   

实现流程：

主类MainActivity.java

package com.shanghai.picturestorybook.activity;

import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.LinearLayout;
import android.animation.AnimatorInflater;
import android.animation.AnimatorSet;
import android.app.Activity;

public class MainActivity extends Activity {
private Animation animToLeft,animToRight;
private LinearLayout linear_menu;
private int animMoveClass = 0;
private Move move;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
animToLeft = AnimationUtils.loadAnimation(this, R.anim.translate_left);
animToRight = AnimationUtils.loadAnimation(this, R.anim.translate_right);
animToLeft.setFillAfter(true);//动画停止后不返回初始位置
animToRight.setFillAfter(true);




linear_menu = (LinearLayout) findViewById(R.id.linear_menu);
move = new Move();

findViewById(R.id.tv_closeMenu).setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
//Toast.makeText(this, "开始奉化", Toast.LENGTH_SHORT).show();
if(animMoveClass == 0){
AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(MainActivity.this, R.anim.property_anim);
set.setTarget(move);
set.start();
//linear_menu.startAnimation(animToLeft);
animMoveClass = 1;
}
else{
AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(MainActivity.this, R.anim.property_animto);
set.setTarget(move);
set.start();
//linear_menu.startAnimation(animToRight);
animMoveClass = 0;
}


}
});

}

/**
 * 控制视图移动的效果类【避免视图移动点击失效】
 * @author Administrator
 *
 */
class Move
{
private int y;
private int x;

public int getY()
{  
return y;
}

public void setY(int y)
{
this.y = y;
linear_menu.layout(linear_menu.getLeft(), y, linear_menu.getRight(),
y + linear_menu.getMeasuredHeight());
}

public int getX()
{
return x;
}

public void setX(int x)
{
this.x = x;
linear_menu.layout(x, linear_menu.getTop(), x + linear_menu.getMeasuredWidth(),
linear_menu.getBottom());
}

}

}

布局文件描述：

动画文件translate_left.xml

<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:fromXDelta="0" 
android:toXDelta="-150" 
android:fromYDelta="0"
android:toYDelta="0" 
android:duration="100" />

动画文件 translate_right.xml

<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:fromXDelta="-150" 
android:toXDelta="0" 
android:fromYDelta="0"
android:toYDelta="0" 
android:duration="100" />

主布局文件activity_main.xml

说明：声明一个放置菜单的LinearLayout即可（因示例代码里有其他的控件，为防止干扰阅读，就不贴代码了恩）

完整实例：

http://download.csdn.net/detail/yuan_love/8316091

注明：文章中引用的图片来自网络，如果侵犯了作者的权益，请通知本人，本人即刻处理