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

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

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

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

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

01 private WindowManager wm=null;
02 private WindowManager.LayoutParams wmParams=null;
03
04 private void initFloatView(){
05     //获取WindowManager
06     wm=(WindowManager)getApplicationContext().getSystemService("window");
07     //设置LayoutParams(全局变量）相关参数
08      wmParams = new WindowManager.LayoutParams();
09
10     wmParams.type=LayoutParams.TYPE_PHONE;   //设置window type
11     wmParams.format=PixelFormat.RGBA_8888;   //设置图片格式，效果为背景透明
12      //设置Window flag
13     wmParams.flags=LayoutParams.FLAG_NOT_TOUCH_MODAL
14                      | LayoutParams.FLAG_NOT_FOCUSABLE;
15
16     //以屏幕左上角为原点，设置x、y初始值
17      wmParams.x=0;
18     wmParams.y=0;
19     //设置悬浮窗口长宽数据
20      wmParams.width=50;
21     wmParams.height=50;
22 }

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

01     /**
02     * 创建左边悬浮按钮
03     */
04     private void createLeftFloatView(){
05         leftbtn=new ImageView(this);
06         leftbtn.setImageResource(R.drawable.prev);
07         leftbtn.setAlpha(0);
08         leftbtn.setOnClickListener(newView.OnClickListener() {
09         public void onClick(View arg0) {
10             //上一篇
11         }
12     });
13         //调整悬浮窗口
14         wmParams.gravity=Gravity.LEFT|Gravity.CENTER_VERTICAL;
15         //显示myFloatView图像
16         wm.addView(leftbtn, wmParams);
17     }
18     /**
19     * 创建右边悬浮按钮
20     */
21     private void createRightFloatView(){
22         rightbtn=new ImageView(this);
23         rightbtn.setImageResource(R.drawable.next);
24         rightbtn.setAlpha(0);
25         rightbtn.setOnClickListener(newView.OnClickListener() {
26         public void onClick(View arg0) {
27             //下一篇
28         }
29     });
30         //调整悬浮窗口
31         wmParams.gravity=Gravity.RIGHT|Gravity.CENTER_VERTICAL;
32         //显示myFloatView图像
33         wm.addView(rightbtn, wmParams);
34     }

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

01     // ImageView的alpha值
02     private int mAlpha = 0;
03     private boolean isHide;
04     /**
05      * 图片渐变显示处理
06      */
07     private Handler mHandler = new Handler()
08     {
09     public void handleMessage(Message msg) {
10         if(msg.what==1&& mAlpha<255){
11         //System.out.println("---"+mAlpha);
12         mAlpha += 50;
13         if(mAlpha>255)
14             mAlpha=255;
15              leftbtn.setAlpha(mAlpha);
16              leftbtn.invalidate();
17              rightbtn.setAlpha(mAlpha);
18              rightbtn.invalidate();
19         if(!isHide && mAlpha<255)
20             mHandler.sendEmptyMessageDelayed(1, 100);
21         }else if(msg.what==0 && mAlpha>0){
22         //System.out.println("---"+mAlpha);
23         mAlpha -= 10;
24         if(mAlpha<0)
25             mAlpha=0;
26         leftbtn.setAlpha(mAlpha);
27         leftbtn.invalidate();
28         rightbtn.setAlpha(mAlpha);
29         rightbtn.invalidate();
30         if(isHide && mAlpha>0)
31             mHandler.sendEmptyMessageDelayed(0, 100);
32         }
33     }
34     };

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

01 private void showFloatView(){
02     isHide = false;
03     mHandler.sendEmptyMessage(1);
04 }
05
06 private void hideFloatView(){
07 new Thread(){
08     public void run() {
09     try {
10                Thread.sleep(1500);
11                isHide = true;
12                mHandler.sendEmptyMessage(0);
13          } catch (Exception e) {
14                 ;
15          }
16     }
17 }.start();
18 }

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

01     @Override
02     public boolean onTouchEvent(MotionEvent event) {
03         switch (event.getAction()) {
04             case MotionEvent.ACTION_MOVE:
05         case MotionEvent.ACTION_DOWN:
06         //System.out.println("========ACTION_DOWN");
07         showFloatView();
08         break;
09         case MotionEvent.ACTION_UP:
10         //System.out.println("========ACTION_UP");
11         hideFloatView();
12         break;
13     }
14     return true;
15     }

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

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

给大家展示下效果图：


下面是程序的完整代码：

001 package com.liux.pageflipper;
002
003 import android.app.Activity;
004 import android.graphics.PixelFormat;
005 import android.os.Bundle;
006 import android.os.Handler;
007 import android.os.Message;
008 import android.view.Gravity;
009 import android.view.MotionEvent;
010 import android.view.View;
011 import android.view.WindowManager;
012 import android.view.WindowManager.LayoutParams;
013 import android.widget.ImageView;
014 import android.widget.ViewFlipper;
015 /**
016  * 悬浮按钮实现翻篇效果
017  * <a href="http://my.oschina.net/arthor" target="_blank" rel="nofollow">@author</a> liux  http://my.oschina.net/liux
018  * @date 2012-2-10 下午2:48:52
019  */
020 public class PageFlipperActivity extends Activity{
021
022     private WindowManager wm=null;
023     private WindowManager.LayoutParams wmParams=null;
024
025     private ImageView leftbtn=null;
026     private ImageView rightbtn=null;
027
028     // ImageView的alpha值
029     private int mAlpha = 0;
030     private boolean isHide;
031
032     private ViewFlipper viewFlipper = null;
033
034     @Override
035     public void onCreate(Bundle savedInstanceState) {
036         super.onCreate(savedInstanceState);
037         setContentView(R.layout.main);
038
039         viewFlipper = (ViewFlipper) this.findViewById(R.id.myViewFlipper);
040
041         //初始化悬浮按钮
042          initFloatView();
043
044     }
045     /**
046      * 初始化悬浮按钮
047      */
048     private void initFloatView(){
049         //获取WindowManager
050         wm=(WindowManager)getApplicationContext().getSystemService("window");
051         //设置LayoutParams(全局变量）相关参数
052         wmParams = new WindowManager.LayoutParams();
053