Android用悬浮按钮实现翻页效果

您的评价:

收藏该经验

今天给大家分享下自己用悬浮按钮点击实现翻页效果的例子。

首先，一个按钮要实现悬浮，就要用到系统顶级窗口相关的WindowManager，WindowManager.LayoutParams。那么在AndroidManifest.xml中添加权限：

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

然后，我们要对WindowManager，WindowManager.LayoutParams的相关属性进行下设置：

private WindowManager wm=null;private WindowManager.LayoutParams wmParams=null;private void initFloatView(){    //获取WindowManager    wm=(WindowManager)getApplicationContext().getSystemService("window");    //设置LayoutParams(全局变量）相关参数     wmParams = new WindowManager.LayoutParams();    	    wmParams.type=LayoutParams.TYPE_PHONE;   //设置window type    wmParams.format=PixelFormat.RGBA_8888;   //设置图片格式，效果为背景透明     //设置Window flag    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;}

通过WindowManager的addView方法创建的View可以实现悬浮窗口效果！因此，我们需要为屏幕创建2个悬浮按钮了。

    /**    * 创建左边悬浮按钮    */    private void createLeftFloatView(){    	leftbtn=new ImageView(this);    	leftbtn.setImageResource(R.drawable.prev);    	leftbtn.setAlpha(0);    	leftbtn.setOnClickListener(new View.OnClickListener() {			public void onClick(View arg0) {			//上一篇		}	});    	//调整悬浮窗口        wmParams.gravity=Gravity.LEFT|Gravity.CENTER_VERTICAL;        //显示myFloatView图像        wm.addView(leftbtn, wmParams);    }    /**    * 创建右边悬浮按钮    */    private void createRightFloatView(){    	rightbtn=new ImageView(this);    	rightbtn.setImageResource(R.drawable.next);    	rightbtn.setAlpha(0);    	rightbtn.setOnClickListener(new View.OnClickListener() {			public void onClick(View arg0) {			//下一篇		}	});    	//调整悬浮窗口        wmParams.gravity=Gravity.RIGHT|Gravity.CENTER_VERTICAL;        //显示myFloatView图像        wm.addView(rightbtn, wmParams);    }

我把图片的Alpha值设置为0，是因为不想让悬浮按钮一开始就展现出来;我想通过对屏幕的触摸来实现悬浮按钮的渐变显示和渐变隐藏。那么我们还要对图片的渐变效果进行下处理：

    // ImageView的alpha值       private int mAlpha = 0;    private boolean isHide;    /**     * 图片渐变显示处理     */    private Handler mHandler = new Handler()    {	public void handleMessage(Message msg) {	    if(msg.what==1 && mAlpha<255){   		//System.out.println("---"+mAlpha);							mAlpha += 50;		if(mAlpha>255)		    mAlpha=255;	         leftbtn.setAlpha(mAlpha);	         leftbtn.invalidate();	         rightbtn.setAlpha(mAlpha);	         rightbtn.invalidate();		if(!isHide && mAlpha<255)		    mHandler.sendEmptyMessageDelayed(1, 100);	    }else if(msg.what==0 && mAlpha>0){		//System.out.println("---"+mAlpha);		mAlpha -= 10;		if(mAlpha<0)		    mAlpha=0;		leftbtn.setAlpha(mAlpha);		leftbtn.invalidate();		rightbtn.setAlpha(mAlpha);		rightbtn.invalidate();		if(isHide && mAlpha>0)		    mHandler.sendEmptyMessageDelayed(0, 100);	    }				}    };

我们再用2个方法分别来控制悬浮按钮的显示、隐藏：

    private void showFloatView(){    	isHide = false;    	mHandler.sendEmptyMessage(1);    }        private void hideFloatView(){	new Thread(){	    public void run() {		try {	               Thread.sleep(1500);	               isHide = true;	               mHandler.sendEmptyMessage(0);	         } catch (Exception e) {	                ;	         }	    }	}.start();    }

这里为了不让悬浮按钮显示后，马上就开始隐藏。我使用了一个线程，先暂停1.5秒钟，再开始渐变隐藏。
接下来，我要重写Activity的onTouchEvent触屏事件，代码如下：

    @Override    public boolean onTouchEvent(MotionEvent event) {    	switch (event.getAction()) {    	    case MotionEvent.ACTION_MOVE:	    case MotionEvent.ACTION_DOWN:		//System.out.println("========ACTION_DOWN");		showFloatView();					break;	    case MotionEvent.ACTION_UP:		//System.out.println("========ACTION_UP");		hideFloatView();						break;	}	return true;    }

最后，要在Activity销毁时销毁悬浮按钮，不然悬浮按钮会一直悬浮在那。因此，我们要再重写Activity的onDestroy()方法，并调用WindowManager的removeView()方法来移除悬浮按钮。

    @Override    public void onDestroy(){    	super.onDestroy();    	//在程序退出(Activity销毁）时销毁悬浮窗口    	wm.removeView(leftbtn);    	wm.removeView(rightbtn);    }

给大家展示下效果图：

下面是程序的完整代码：

package com.liux.pageflipper;import android.app.Activity;import android.graphics.PixelFormat;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.view.Gravity;import android.view.MotionEvent;import android.view.View;import android.view.WindowManager;import android.view.WindowManager.LayoutParams;import android.widget.ImageView;import android.widget.ViewFlipper;/** * 悬浮按钮实现翻篇效果 * @author liux  http://my.oschina.net/liux * @date 2012-2-10 下午2:48:52 */public class PageFlipperActivity extends Activity{	    private WindowManager wm=null;    private WindowManager.LayoutParams wmParams=null;	    private ImageView leftbtn=null;    private ImageView rightbtn=null;	    // ImageView的alpha值       private int mAlpha = 0;    private boolean isHide;	    private ViewFlipper viewFlipper = null;	    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);                viewFlipper = (ViewFlipper) this.findViewById(R.id.myViewFlipper);                //初始化悬浮按钮         initFloatView();        }    /**     * 初始化悬浮按钮     */    private void initFloatView(){        //获取WindowManager        wm=(WindowManager)getApplicationContext().getSystemService("window");        //设置LayoutParams(全局变量）相关参数        wmParams = new WindowManager.LayoutParams();    	        wmParams.type=LayoutParams.TYPE_PHONE;   //设置window type        wmParams.format=PixelFormat.RGBA_8888;   //设置图片格式，效果为背景透明         //设置Window flag        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;    	        //创建悬浮按钮         createLeftFloatView();        createRightFloatView();    }        /**     * 创建左边悬浮按钮     */    private void createLeftFloatView(){    	leftbtn=new ImageView(this);    	leftbtn.setImageResource(R.drawable.prev);    	leftbtn.setAlpha(0);    	leftbtn.setOnClickListener(new View.OnClickListener() {	        	    public void onClick(View arg0) {		//上一篇		viewFlipper.setInAnimation(PageFlipperActivity.this, R.anim.in_leftright);		viewFlipper.setOutAnimation(PageFlipperActivity.this, R.anim.out_leftright);		viewFlipper.showPrevious();	    }	});    	//调整悬浮窗口          wmParams.gravity=Gravity.LEFT|Gravity.CENTER_VERTICAL;         //显示myFloatView图像          wm.addView(leftbtn, wmParams);    }    /**     * 创建右边悬浮按钮     */    private void createRightFloatView(){    	rightbtn=new ImageView(this);    	rightbtn.setImageResource(R.drawable.next);    	rightbtn.setAlpha(0);         rightbtn.setOnClickListener(new View.OnClickListener() {		    public void onClick(View arg0) {		//下一篇		viewFlipper.setInAnimation(PageFlipperActivity.this, R.anim.in_rightleft);		viewFlipper.setOutAnimation(PageFlipperActivity.this, R.anim.out_rightleft);		viewFlipper.showNext();	    }	});    	//调整悬浮窗口          wmParams.gravity=Gravity.RIGHT|Gravity.CENTER_VERTICAL;         //显示myFloatView图像          wm.addView(rightbtn, wmParams);    }    /**     * 图片渐变显示处理     */    private Handler mHandler = new Handler()    {	public void handleMessage(Message msg) {        	    if(msg.what==1 && mAlpha<255){   		//System.out.println("---"+mAlpha);							mAlpha += 50;		if(mAlpha>255)	    	    mAlpha=255;		leftbtn.setAlpha(mAlpha);		leftbtn.invalidate();		rightbtn.setAlpha(mAlpha);		rightbtn.invalidate();		if(!isHide && mAlpha<255)		    mHandler.sendEmptyMessageDelayed(1, 100);	    }else if(msg.what==0 && mAlpha>0){		//System.out.println("---"+mAlpha);		mAlpha -= 10;		if(mAlpha<0)		    mAlpha=0;		leftbtn.setAlpha(mAlpha);		leftbtn.invalidate();		rightbtn.setAlpha(mAlpha);		rightbtn.invalidate();		if(isHide && mAlpha>0)		    mHandler.sendEmptyMessageDelayed(0, 100);	    }				}    };	    private void showFloatView(){    	isHide = false;    	mHandler.sendEmptyMessage(1);    }        private void hideFloatView(){	new Thread(){        	    public void run() {	        try {	             Thread.sleep(1500);	             isHide = true;	             mHandler.sendEmptyMessage(0);	        } catch (Exception e) {	             ;	        }	    }	}.start();    }        @Override    public boolean onTouchEvent(MotionEvent event) {    	switch (event.getAction()) {    	    case MotionEvent.ACTION_MOVE:	    case MotionEvent.ACTION_DOWN:		//System.out.println("========ACTION_DOWN");		showFloatView();					break;	    case MotionEvent.ACTION_UP:		//System.out.println("========ACTION_UP");		hideFloatView();						break;	}	return true;    }    @Override    public void onDestroy(){    	super.onDestroy();    	//在程序退出(Activity销毁）时销毁悬浮窗口    	wm.removeView(leftbtn);    	wm.removeView(rightbtn);    }}