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

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

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

查看源码

打印?

1<uses-permissionandroid: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 =newWindowManager.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    privatevoidcreateLeftFloatView(){

05        leftbtn=newImageView(this);

06        leftbtn.setImageResource(R.drawable.prev);

07        leftbtn.setAlpha(0);

08        leftbtn.setOnClickListener(newView.OnClickListener() { 

09        publicvoidonClick(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    privatevoidcreateRightFloatView(){

22        rightbtn=newImageView(this);

23        rightbtn.setImageResource(R.drawable.next);

24        rightbtn.setAlpha(0);

25        rightbtn.setOnClickListener(newView.OnClickListener() {    

26        publicvoidonClick(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    privateintmAlpha = 0;

03    privatebooleanisHide;

04    /**

05     * 图片渐变显示处理

06     */

07    privateHandler mHandler =newHandler()

08    {

09    publicvoidhandleMessage(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        }elseif(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  

35    };

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

查看源码

打印?

01private void showFloatView(){

02    isHide =false;

03    mHandler.sendEmptyMessage(1);

04}

05  

06private void hideFloatView(){

07new Thread(){

08    publicvoidrun() {

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    publicbooleanonTouchEvent(MotionEvent event) {

04        switch(event.getAction()) {

05            caseMotionEvent.ACTION_MOVE:

06        caseMotionEvent.ACTION_DOWN:

07        //System.out.println("========ACTION_DOWN");

08        showFloatView();            

09        break;

10        caseMotionEvent.ACTION_UP:

11        //System.out.println("========ACTION_UP");

12        hideFloatView();                

13        break;

14    }

15    returntrue;

16    }

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

查看源码

打印?

1    @Override

2    publicvoidonDestroy(){

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 extendsActivity{

021      

022    privateWindowManager wm=null;

023    privateWindowManager.LayoutParams wmParams=null;

024      

025    privateImageView leftbtn=null;

026    privateImageView rightbtn=null;

027      

028    // ImageView的alpha值   

029    privateintmAlpha = 0;

030    privatebooleanisHide;

031      

032    privateViewFlipper viewFlipper =null;

033      

034    @Override

035    publicvoidonCreate(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    privatevoidinitFloatView(){

049        //获取WindowManager

050        wm=(WindowManager)getApplicationContext().getSystemService("window");

051        //设置LayoutParams(全局变量）相关参数

052        wmParams =newWindowManager.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    privatevoidcreateLeftFloatView(){

077        leftbtn=newImageView(this);

078        leftbtn.setImageResource(R.drawable.prev);

079        leftbtn.setAlpha(0);

080        leftbtn.setOnClickListener(newView.OnClickListener() { 

081                publicvoidonClick(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    privatevoidcreateRightFloatView(){

097        rightbtn=newImageView(this);

098        rightbtn.setImageResource(R.drawable.next);

099        rightbtn.setAlpha(0);

100         rightbtn.setOnClickListener(newView.OnClickListener() {   

101        publicvoidonClick(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    privateHandler mHandler =newHandler()

117    {

118    publicvoidhandleMessage(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(1,100);

131        }elseif(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(0,100);

142        }           

143    }

144  

145    };

146      

147    privatevoidshowFloatView(){

148        isHide =false;

149        mHandler.sendEmptyMessage(1);

150    }

151      

152    privatevoidhideFloatView(){

153    newThread(){

154                publicvoidrun() {

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    publicbooleanonTouchEvent(MotionEvent event) {

168        switch(event.getAction()) {

169            caseMotionEvent.ACTION_MOVE:

170        caseMotionEvent.ACTION_DOWN:

171        //System.out.println("========ACTION_DOWN");

172        showFloatView();            

173        break;

174        caseMotionEvent.ACTION_UP:

175        //System.out.println("========ACTION_UP");

176        hideFloatView();                

177        break;

178    }

179    returntrue;

180    }

181  

182    @Override

183    publicvoidonDestroy(){

184        super.onDestroy();

185        //在程序退出(Activity销毁）时销毁悬浮窗口

186        wm.removeView(leftbtn);

187        wm.removeView(rightbtn);

188    }

189}

 

 

 

main.xml文件中代码：

<？xml version="1.0" encoding="utf-8"？>

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical">

    <ViewFlipper 
        android:id="＠+id/myViewFlipper"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent">
        <!-- 第一个页面 -->
        <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" 
            android:gravity="center">
            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:src="＠drawable/one" 
                android:gravity="center" />
        </LinearLayout>
        <!-- 第二个页面 -->
        <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" 
            android:gravity="center">
            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:src="＠drawable/two"
                android:gravity="center" />
        </LinearLayout>
        <!-- 第三个页面 -->
        <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" 
            android:gravity="center">
            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:src="＠drawable/three"
                android:gravity="center" />
        </LinearLayout>
        <!-- 第四个页面 -->
        <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" 
            android:gravity="center">
            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:src="＠drawable/four"
                android:gravity="center" />
        </LinearLayout>
        <!-- 第五个页面 -->
        <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" 
            android:gravity="center">
            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:src="＠drawable/five"
                android:gravity="center" />
        </LinearLayout>
    </ViewFlipper>
</LinearLayout>

 

push_left_in.xml文件中代码： 

<？xml version="1.0" encoding="utf-8"？> 

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:XDelta="100％p" android:toXDelta="0"
        android:duration="500" />
    <alpha android:Alpha="0.1" android:toAlpha="1.0"
        android:duration="500" />

push_left_out.xml文件中代码： 

<？xml version="1.0" encoding="utf-8"？>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:XDelta="0" android:toXDelta="-100％p"
        android:duration="500" />
    <alpha android:Alpha="1.0" android:toAlpha="0.1"
        android:duration="500" />

  push_right_in.xml文件中代码：

<？xml version="1.0" encoding="utf-8"？>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:XDelta="-100％p" android:toXDelta="0"
        android:duration="500" />
    <alpha android:Alpha="0.1" android:toAlpha="1.0"
        android:duration="500" />

  push_right_out.xml文件中代码：

<？xml version="1.0" encoding="utf-8"？>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:XDelta="0" android:toXDelta="100％p"
        android:duration="500" />
    <alpha android:Alpha="1.0" android:toAlpha="0.1"
        android:duration="500" />