frank.sunny的个人技术空间
在互联网行业,实践总是走在理论的前面

原文地址 http://www.open-open.com/lib/view/open1328883424280.html

 

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

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

 

我们再用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  
03     public boolean onTouchEvent(MotionEvent event) {
04         switch (event.getAction()) {
05             case MotionEvent.ACTION_MOVE:
06         case MotionEvent.ACTION_DOWN:
07         //System.out.println("========ACTION_DOWN");
08         showFloatView();           
09         break;
10         case MotionEvent.ACTION_UP:
11         //System.out.println("========ACTION_UP");
12         hideFloatView();               
13         break;
14     }
15     return true;
16     }

最后,要在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     }

给大家展示下效果图:
Android用悬浮按钮实现翻页效果

下面是程序的完整代码:

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      */
076     private void createLeftFloatView(){
077         leftbtn=new ImageView(this);
078         leftbtn.setImageResource(R.drawable.prev);
079         leftbtn.setAlpha(0);
080         leftbtn.setOnClickListener(new View.OnClickListener() {
081                 public void onClick(View arg0) {
082         //上一篇
083         viewFlipper.setInAnimation(PageFlipperActivity.this, R.anim.in_leftright);
084         viewFlipper.setOutAnimation(PageFlipperActivity.this, R.anim.out_leftright);
085         viewFlipper.showPrevious();
086         }
087     });
088         //调整悬浮窗口
089           wmParams.gravity=Gravity.LEFT|Gravity.CENTER_VERTICAL;
090          //显示myFloatView图像
091           wm.addView(leftbtn, wmParams);
092     }
093     /**
094      * 创建右边悬浮按钮
095      */
096     private void createRightFloatView(){
097         rightbtn=new ImageView(this);
098         rightbtn.setImageResource(R.drawable.next);
099         rightbtn.setAlpha(0);
100          rightbtn.setOnClickListener(new View.OnClickListener() {  
101         public void onClick(View arg0) {
102         //下一篇
103         viewFlipper.setInAnimation(PageFlipperActivity.this, R.anim.in_rightleft);
104         viewFlipper.setOutAnimation(PageFlipperActivity.this, R.anim.out_rightleft);
105         viewFlipper.showNext();
106         }
107     });
108         //调整悬浮窗口
109           wmParams.gravity=Gravity.RIGHT|Gravity.CENTER_VERTICAL;
110          //显示myFloatView图像
111           wm.addView(rightbtn, wmParams);
112     }
113     /**
114      * 图片渐变显示处理
115      */
116     private Handler mHandler = new Handler()
117     {
118     public void handleMessage(Message msg) {
119  
120                 if(msg.what==1 && mAlpha<255){  
121         //System.out.println("---"+mAlpha);                
122         mAlpha += 50;
123         if(mAlpha>255)
124                 mAlpha=255;
125         leftbtn.setAlpha(mAlpha);
126         leftbtn.invalidate();
127         rightbtn.setAlpha(mAlpha);
128         rightbtn.invalidate();
129         if(!isHide && mAlpha<255)
130             mHandler.sendEmptyMessageDelayed(1100);
131         }else if(msg.what==0 && mAlpha>0){
132         //System.out.println("---"+mAlpha);
133         mAlpha -= 10;
134         if(mAlpha<0)
135             mAlpha=0;
136         leftbtn.setAlpha(mAlpha);
137         leftbtn.invalidate();
138         rightbtn.setAlpha(mAlpha);
139         rightbtn.invalidate();
140         if(isHide && mAlpha>0)
141             mHandler.sendEmptyMessageDelayed(0100);
142         }          
143     }
144  
145     };
146      
147     private void showFloatView(){
148         isHide = false;
149         mHandler.sendEmptyMessage(1);
150     }
151      
152     private void hideFloatView(){
153     new Thread(){
154                 public void run() {
155             try {
156                  Thread.sleep(1500);
157                  isHide = true;
158                  mHandler.sendEmptyMessage(0);
159             catch (Exception e) {
160                  ;
161             }
162         }
163     }.start();
164     }
165      
166     @Override
167     public boolean onTouchEvent(MotionEvent event) {
168         switch (event.getAction()) {
169             case MotionEvent.ACTION_MOVE:
170         case MotionEvent.ACTION_DOWN:
171         //System.out.println("========ACTION_DOWN");
172         showFloatView();           
173         break;
174         case MotionEvent.ACTION_UP:
175         //System.out.println("========ACTION_UP");
176         hideFloatView();               
177         break;
178     }
179     return true;
180     }
181  
182     @Override
183     public void onDestroy(){
184         super.onDestroy();
185         //在程序退出(Activity销毁)时销毁悬浮窗口
186         wm.removeView(leftbtn);
187         wm.removeView(rightbtn);
188     }
189 }
posted on 2012-04-16 11:15  frank.sunny  阅读(1456)  评论(0编辑  收藏  举报