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

原文地址：http://www.oschina.net/question/157182_37944

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

首先，一个按钮要实现悬浮，就要用到系统顶级窗口相关的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(new View.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(new View.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" rel="nofollow" target="_blank">@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
054 wmParams.type=LayoutParams.TYPE_PHONE; //设置window type
055 wmParams.format=PixelFormat.RGBA_8888; //设置图片格式，效果为背景透明
056 //设置Window flag
057 wmParams.flags=LayoutParams.FLAG_NOT_TOUCH_MODAL
058 | LayoutParams.FLAG_NOT_FOCUSABLE;
059
060 //以屏幕左上角为原点，设置x、y初始值
061 wmParams.x=0;
062 wmParams.y=0;
063 //设置悬浮窗口长宽数据
064 wmParams.width=50;
065 wmParams.height=50;
066
067 //创建悬浮按钮
068 createLeftFloatView();
069 createRightFloatView();
070 }
071
072 /**
073 * 创建左边悬浮按钮
074 */
075 private void createLeftFloatView(){
076 leftbtn=new ImageView(this);
077 leftbtn.setImageResource(R.drawable.prev);
078 leftbtn.setAlpha(0);
079 leftbtn.setOnClickListener(new View.OnClickListener() {
080 public void onClick(View arg0) {
081 //上一篇
082 viewFlipper.setInAnimation(PageFlipperActivity.this, R.anim.in_leftright);
083 viewFlipper.setOutAnimation(PageFlipperActivity.this, R.anim.out_leftright);
084 viewFlipper.showPrevious();
085 }
086 });
087 //调整悬浮窗口
088 wmParams.gravity=Gravity.LEFT|Gravity.CENTER_VERTICAL;
089 //显示myFloatView图像
090 wm.addView(leftbtn, wmParams);
091 }
092 /**
093 * 创建右边悬浮按钮
094 */
095 private void createRightFloatView(){
096 rightbtn=new ImageView(this);
097 rightbtn.setImageResource(R.drawable.next);
098 rightbtn.setAlpha(0);
099 rightbtn.setOnClickListener(new View.OnClickListener() {
100 public void onClick(View arg0) {
101 //下一篇
102 viewFlipper.setInAnimation(PageFlipperActivity.this, R.anim.in_rightleft);
103 viewFlipper.setOutAnimation(PageFlipperActivity.this, R.anim.out_rightleft);
104 viewFlipper.showNext();
105 }
106 });
107 //调整悬浮窗口
108 wmParams.gravity=Gravity.RIGHT|Gravity.CENTER_VERTICAL;
109 //显示myFloatView图像
110 wm.addView(rightbtn, wmParams);
111 }
112 /**
113 * 图片渐变显示处理
114 */
115 private Handler mHandler = new Handler()
116 {
117 public void handleMessage(Message msg) {
118 if(msg.what==1 && mAlpha<255){
119 //System.out.println("---"+mAlpha);
120 mAlpha += 50;
121 if(mAlpha>255)
122 mAlpha=255;
123 leftbtn.setAlpha(mAlpha);
124 leftbtn.invalidate();
125 rightbtn.setAlpha(mAlpha);
126 rightbtn.invalidate();
127 if(!isHide && mAlpha<255)
128 mHandler.sendEmptyMessageDelayed(1, 100);
129 }else if(msg.what==0 && mAlpha>0){
130 //System.out.println("---"+mAlpha);
131 mAlpha -= 10;
132 if(mAlpha<0)
133 mAlpha=0;
134 leftbtn.setAlpha(mAlpha);
135 leftbtn.invalidate();
136 rightbtn.setAlpha(mAlpha);
137 rightbtn.invalidate();
138 if(isHide && mAlpha>0)
139 mHandler.sendEmptyMessageDelayed(0, 100);
140 }
141 }
142 };
143
144 private void showFloatView(){
145 isHide = false;
146 mHandler.sendEmptyMessage(1);
147 }
148
149 private void hideFloatView(){
150 new Thread(){
151 public void run() {
152 try {
153 Thread.sleep(1500);
154 isHide = true;
155 mHandler.sendEmptyMessage(0);
156 } catch (Exception e) {
157 ;
158 }
159 }
160 }.start();
161 }
162
163 @Override
164 public boolean onTouchEvent(MotionEvent event) {
165 switch (event.getAction()) {
166 case MotionEvent.ACTION_MOVE:
167 case MotionEvent.ACTION_DOWN:
168 //System.out.println("========ACTION_DOWN");
169 showFloatView();
170 break;
171 case MotionEvent.ACTION_UP:
172 //System.out.println("========ACTION_UP");
173 hideFloatView();
174 break;
175 }
176 return true;
177 }
178
179 @Override
180 public void onDestroy(){
181 super.onDestroy();
182 //在程序退出(Activity销毁）时销毁悬浮窗口
183 wm.removeView(leftbtn);
184 wm.removeView(rightbtn);
185 }
186 }

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