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

迷途d书童 发布于 2012/02/10 17:51
阅读 36K+
收藏 81

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

首先,一个按钮要实现悬浮,就要用到系统顶级窗口相关的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);
    }
}

附上源码http://www.oschina.net/code/snippet_157182_8608

加载中
0
0
1
12
强势顶起。。。。。。
0
0
d
douself
谢谢楼主
0
Failure
Failure
顶啊~~~
0
施小豆
楼主我爱你~~!!
0
L
L.zzzl
 希望能解决问题!感谢
0
王政财
王政财
人过留名 多谢分享
返回顶部
顶部