Android实现渐显按钮的左右滑动效果

本示例演示在Android中实现带渐显按钮的左右滑动效果。

  关于滑动效果,在我的上一篇博文中提到过,有兴趣的朋友可以访问:http://www.cnblogs.com/hanyonglu/archive/2012/02/13/2349827.html

  如果大家想实现带指引效果的左右滑动,请访问博文:http://www.cnblogs.com/hanyonglu/archive/2012/04/07/2435589.html

  先看下运行效果:

Android实现渐显按钮的左右滑动效果Android实现渐显按钮的左右滑动效果

  程序结构:

Android实现渐显按钮的左右滑动效果

  MainActivity文件中代码:

Android实现渐显按钮的左右滑动效果
packagecom.android.buttonpageflipper;

importandroid.app.Activity;
importandroid.graphics.PixelFormat;
importandroid.os.Bundle;
importandroid.os.Handler;
importandroid.os.Message;
importandroid.view.Gravity;
importandroid.view.MotionEvent;
importandroid.view.View;
importandroid.view.WindowManager;
importandroid.view.WindowManager.LayoutParams;
importandroid.widget.ImageView;
importandroid.widget.ViewFlipper;

/**
*Android实现带渐显按钮的左右滑动效果
*@Description:自然状态下按钮不可见,触摸屏幕时显示按钮
*
*@FileName: MainActivity.java
*
*@Package com.android.buttonpageflipper
*
*@Author Hanyonglu

*
*/
publicclassMainActivityextendsActivity{
//声明两个按钮,分别代表向左和向右滑动
privateImageViewbtnLeft=null;
privateImageViewbtnRight=null;

//设置WindowManager
privateWindowManagerwm=null;
privateWindowManager.LayoutParamswmParams=null;

//ImageView的alpha值
privateintmAlpha=0;
privatebooleanisHide;

privateViewFlipperviewFlipper=null;

/**Calledwhentheactivityisfirstcreated.*/
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

setTitle("Android实现渐显按钮的左右滑动效果");
viewFlipper=(ViewFlipper)this.findViewById(R.id.myViewFlipper);

//初始化左右按钮
initImageButtonView();
}

/**
*初始化悬浮按钮
*/
privatevoidinitImageButtonView(){
//获取WindowManager
wm=(WindowManager)getApplicationContext().getSystemService("window");

//设置LayoutParams相关参数
wmParams=newWindowManager.LayoutParams();

//设置windowtype
wmParams.type=LayoutParams.TYPE_PHONE;

//设置图片格式,效果为背景透明
wmParams.format=PixelFormat.RGBA_8888;

//设置Windowflag参数
wmParams.flags=LayoutParams.FLAG_NOT_TOUCH_MODAL
|LayoutParams.FLAG_NOT_FOCUSABLE;

//设置x、y初始值
wmParams.x=0;
wmParams.y=0;

//设置窗口长宽数据
wmParams.width=50;
wmParams.height=50;

//创建左右按钮
createLeftButtonView();
createRightButtonView();
}

/**
*设置左边按钮
*/
privatevoidcreateLeftButtonView(){
btnLeft=newImageView(this);
btnLeft.setImageResource(R.drawable.left);
btnLeft.setAlpha(0);

btnLeft.setOnClickListener(newView.OnClickListener(){
publicvoidonClick(Viewarg0){
//上一个图像
viewFlipper.setInAnimation(MainActivity.this,R.anim.push_left_in);
viewFlipper.setOutAnimation(MainActivity.this,R.anim.push_left_out);
viewFlipper.showPrevious();
}
});

//调整窗口
wmParams.gravity=Gravity.LEFT|Gravity.CENTER_VERTICAL;

//显示图像
wm.addView(btnLeft,wmParams);
}

/**
*设置右边按钮
*/
privatevoidcreateRightButtonView(){
btnRight=newImageView(this);
btnRight.setImageResource(R.drawable.right);
btnRight.setAlpha(0);

btnRight.setOnClickListener(newView.OnClickListener(){
publicvoidonClick(Viewarg0){
//下一个图像
viewFlipper.setInAnimation(MainActivity.this,R.anim.push_right_in);
viewFlipper.setOutAnimation(MainActivity.this,R.anim.push_right_out);
viewFlipper.showNext();
}
});

//调整窗口
wmParams.gravity=Gravity.RIGHT|Gravity.CENTER_VERTICAL;

//显示图像
wm.addView(btnRight,wmParams);
}

/**
*设置按钮渐显效果
*/
privateHandlermHandler=newHandler()
{
publicvoidhandleMessage(Messagemsg){
if(msg.what==1&&mAlpha<255){
//通过设置不透明度设置按钮的渐显效果
mAlpha+=50;

if(mAlpha>255)
mAlpha=255;

btnLeft.setAlpha(mAlpha);
btnLeft.invalidate();
btnRight.setAlpha(mAlpha);
btnRight.invalidate();

if(!isHide&&mAlpha<255)
mHandler.sendEmptyMessageDelayed(1,100);
}elseif(msg.what==0&&mAlpha>0){
mAlpha-=10;

if(mAlpha<0)
mAlpha=0;
btnLeft.setAlpha(mAlpha);
btnLeft.invalidate();
btnRight.setAlpha(mAlpha);
btnRight.invalidate();

if(isHide&&mAlpha>0)
mHandler.sendEmptyMessageDelayed(0,800);
}
}
};

privatevoidshowImageButtonView(){
isHide=false;
mHandler.sendEmptyMessage(1);
}

privatevoidhideImageButtonView(){
newThread(){
publicvoidrun(){
try{
Thread.sleep(1500);
isHide=true;
mHandler.sendEmptyMessage(0);
}catch(Exceptione){
;
}
}
}.start();
}

@Override
publicbooleanonTouchEvent(MotionEventevent){
switch(event.getAction()){
caseMotionEvent.ACTION_MOVE:
caseMotionEvent.ACTION_DOWN:
showImageButtonView();
break;
caseMotionEvent.ACTION_UP:
hideImageButtonView();
break;
}

returntrue;
}

@Override
publicvoidonDestroy(){
super.onDestroy();
//在程序退出(Activity销毁)时销毁窗口
wm.removeView(btnLeft);
wm.removeView(btnRight);
}

}

Android实现渐显按钮的左右滑动效果

  main.xml文件中代码:

Android实现渐显按钮的左右滑动效果
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical">

<ViewFlipper
android:id="@+id/myViewFlipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!--第一个页面-->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/one"
android:gravity="center"/>
</LinearLayout>
<!--第二个页面-->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/two"
android:gravity="center"/>
</LinearLayout>
<!--第三个页面-->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/three"
android:gravity="center"/>
</LinearLayout>
<!--第四个页面-->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/four"
android:gravity="center"/>
</LinearLayout>
<!--第五个页面-->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/five"
android:gravity="center"/>
</LinearLayout>
</ViewFlipper>
</LinearLayout>

Android实现渐显按钮的左右滑动效果

  push_left_in.xml文件中代码:

Android实现渐显按钮的左右滑动效果
<?xmlversion="1.0"encoding="utf-8"?>

<setxmlns:android="http://schemas.android.com/apk/res/android">
<translateandroid:fromXDelta="100%p"android:toXDelta="0"
android:duration="500"/>
<alphaandroid:fromAlpha="0.1"android:toAlpha="1.0"
android:duration="500"/>

</set>

Android实现渐显按钮的左右滑动效果

  push_left_out.xml文件中代码:

Android实现渐显按钮的左右滑动效果
<?xmlversion="1.0"encoding="utf-8"?>
<setxmlns:android="http://schemas.android.com/apk/res/android">
<translateandroid:fromXDelta="0"android:toXDelta="-100%p"
android:duration
="500"/>
<alphaandroid:fromAlpha="1.0"android:toAlpha="0.1"
android:duration
="500"/>

</set>

Android实现渐显按钮的左右滑动效果

  push_right_in.xml文件中代码:

Android实现渐显按钮的左右滑动效果
<?xmlversion="1.0"encoding="utf-8"?>

<setxmlns:android="http://schemas.android.com/apk/res/android">
<translateandroid:fromXDelta="-100%p"android:toXDelta="0"
android:duration="500"/>
<alphaandroid:fromAlpha="0.1"android:toAlpha="1.0"
android:duration="500"/>

</set>

Android实现渐显按钮的左右滑动效果

  push_right_out.xml文件中代码:

Android实现渐显按钮的左右滑动效果
<?xmlversion="1.0"encoding="utf-8"?>
<setxmlns:android="http://schemas.android.com/apk/res/android">
<translateandroid:fromXDelta="0"android:toXDelta="100%p"
android:duration
="500"/>
<alphaandroid:fromAlpha="1.0"android:toAlpha="0.1"
android:duration
="500"/>

</set>

Android实现渐显按钮的左右滑动效果

  最后,别忘记了在配置文件中设置权限。

  希望转载的朋友能够尊重作者的劳动成果,加上转载地址:http://www.cnblogs.com/hanyonglu/archive/2012/02/13/2350171.html谢谢。

  示例下载:点击下载

  结束。 ^_^