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

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

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

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

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

01private WindowManager wm=null;

02private WindowManager.LayoutParams wmParams=null;

03 

04private 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个方法分别来控制悬浮按钮的显示、隐藏：

01private void showFloatView(){

02    isHide = false;

03    mHandler.sendEmptyMessage(1);

04}

05 

06private void hideFloatView(){

07new 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    }

给大家展示下效果图：


下面是程序的完整代码：

001package com.liux.pageflipper;

002 

003import android.app.Activity;

004import android.graphics.PixelFormat;

005import android.os.Bundle;

006import android.os.Handler;

007import android.os.Message;

008import android.view.Gravity;

009import android.view.MotionEvent;

010import android.view.View;

011import android.view.WindowManager;

012import android.view.WindowManager.LayoutParams;

013import android.widget.ImageView;

014import 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 */

020public 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(newView.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(newView.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