zoukankan      html  css  js  c++  java

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

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

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

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

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

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

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

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

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

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

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

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    private void showFloatView(){
        isHide = false;
        mHandler.sendEmptyMessage(1);
    }
     
    private void hideFloatView(){
    new Thread(){
        public void run() {
        try {
                   Thread.sleep(1500);
                   isHide = true;
                   mHandler.sendEmptyMessage(0);
             } catch (Exception e) {
                    ;
             }
        }
    }.start();
    }

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

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_DOWN:
            //System.out.println("========ACTION_DOWN");
            showFloatView();           
            break;
            case MotionEvent.ACTION_UP:
            //System.out.println("========ACTION_UP");
            hideFloatView();               
            break;
        }
        return true;
        }

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

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

    给大家展示下效果图：


    下面是程序的完整代码：

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    package com.liux.pageflipper;
     
    import android.app.Activity;
    import android.graphics.PixelFormat;
    import android.os.Bundle;
    import android.os.Handler;
    import android.os.Message;
    import android.view.Gravity;
    import android.view.MotionEvent;
    import android.view.View;
    import android.view.WindowManager;
    import android.view.WindowManager.LayoutParams;
    import android.widget.ImageView;
    import android.widget.ViewFlipper;
    /**
     * 悬浮按钮实现翻篇效果
     * <a href="http://my.oschina.net/arthor" target="_blank" rel="nofollow">@author</a> liux  http://my.oschina.net/liux
     * @date 2012-2-10 下午2:48:52
     */
    public class PageFlipperActivity extends Activity{
         
        private WindowManager wm=null;
        private WindowManager.LayoutParams wmParams=null;
         
        private ImageView leftbtn=null;
        private ImageView rightbtn=null;
         
        // ImageView的alpha值  
        private int mAlpha = 0;
        private boolean isHide;
         
        private ViewFlipper viewFlipper = null;
         
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
             
            viewFlipper = (ViewFlipper) this.findViewById(R.id.myViewFlipper);
             
            //初始化悬浮按钮
             initFloatView();
         
        }
        /**
         * 初始化悬浮按钮
         */
        private void initFloatView(){
            //获取WindowManager
            wm=(WindowManager)getApplicationContext().getSystemService("window");
            //设置LayoutParams(全局变量）相关参数
            wmParams = new WindowManager.LayoutParams();
             
            wmParams.type=LayoutParams.TYPE_PHONE;   //设置window type
            wmParams.format=PixelFormat.RGBA_8888;   //设置图片格式，效果为背景透明
             //设置Window flag
            wmParams.flags=LayoutParams.FLAG_NOT_TOUCH_MODAL
                                   | LayoutParams.FLAG_NOT_FOCUSABLE;
     
            //以屏幕左上角为原点，设置x、y初始值
             wmParams.x=0;
            wmParams.y=0;
            //设置悬浮窗口长宽数据
             wmParams.width=50;
            wmParams.height=50;
             
            //创建悬浮按钮
             createLeftFloatView();
            createRightFloatView();
        }
         
        /**
         * 创建左边悬浮按钮
         */
        private void createLeftFloatView(){
            leftbtn=new ImageView(this);
            leftbtn.setImageResource(R.drawable.prev);
            leftbtn.setAlpha(0);
            leftbtn.setOnClickListener(new View.OnClickListener() {
                    public void onClick(View arg0) {
            //上一篇
            viewFlipper.setInAnimation(PageFlipperActivity.this, R.anim.in_leftright);
            viewFlipper.setOutAnimation(PageFlipperActivity.this, R.anim.out_leftright);
            viewFlipper.showPrevious();
            }
        });
            //调整悬浮窗口
              wmParams.gravity=Gravity.LEFT|Gravity.CENTER_VERTICAL;
             //显示myFloatView图像
              wm.addView(leftbtn, wmParams);
        }
        /**
         * 创建右边悬浮按钮
         */
        private void createRightFloatView(){
            rightbtn=new ImageView(this);
            rightbtn.setImageResource(R.drawable.next);
            rightbtn.setAlpha(0);
             rightbtn.setOnClickListener(new View.OnClickListener() {  
            public void onClick(View arg0) {
            //下一篇
            viewFlipper.setInAnimation(PageFlipperActivity.this, R.anim.in_rightleft);
            viewFlipper.setOutAnimation(PageFlipperActivity.this, R.anim.out_rightleft);
            viewFlipper.showNext();
            }
        });
            //调整悬浮窗口
              wmParams.gravity=Gravity.RIGHT|Gravity.CENTER_VERTICAL;
             //显示myFloatView图像
              wm.addView(rightbtn, wmParams);
        }
        /**
         * 图片渐变显示处理
         */
        private Handler mHandler = new Handler()
        {
        public void handleMessage(Message msg) {
                    if(msg.what==1 && mAlpha<255){  
            //System.out.println("---"+mAlpha);                
            mAlpha += 50;
            if(mAlpha>255)
                    mAlpha=255;
            leftbtn.setAlpha(mAlpha);
            leftbtn.invalidate();
            rightbtn.setAlpha(mAlpha);
            rightbtn.invalidate();
            if(!isHide && mAlpha<255)
                mHandler.sendEmptyMessageDelayed(1, 100);
            }else if(msg.what==0 && mAlpha>0){
            //System.out.println("---"+mAlpha);
            mAlpha -= 10;
            if(mAlpha<0)
                mAlpha=0;
            leftbtn.setAlpha(mAlpha);
            leftbtn.invalidate();
            rightbtn.setAlpha(mAlpha);
            rightbtn.invalidate();
            if(isHide && mAlpha>0)
                mHandler.sendEmptyMessageDelayed(0, 100);
            }          
        }
        };
         
        private void showFloatView(){
            isHide = false;
            mHandler.sendEmptyMessage(1);
        }
         
        private void hideFloatView(){
        new Thread(){
                    public void run() {
                try {
                     Thread.sleep(1500);
                     isHide = true;
                     mHandler.sendEmptyMessage(0);
                } catch (Exception e) {
                     ;
                }
            }
        }.start();
        }
         
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_DOWN:
            //System.out.println("========ACTION_DOWN");
            showFloatView();           
            break;
            case MotionEvent.ACTION_UP:
            //System.out.println("========ACTION_UP");
            hideFloatView();               
            break;
        }
        return true;
        }
     
        @Override
        public void onDestroy(){
            super.onDestroy();
            //在程序退出(Activity销毁）时销毁悬浮窗口
            wm.removeView(leftbtn);
            wm.removeView(rightbtn);
        }
    }

    附上源码：http://www.oschina.net/code/snippet_157182_8608
  • 相关阅读:
    ES6、ES7、ES8特性
    【react】XXX项目环境搭建
    map
    vector
    list
    米勒素数模板
    POJ-2421-Constructing Roads（最小生成树 普利姆）
    HDU1301 Jungle Roads(Kruskal)
    Truck History（prime）
    phpstorm快捷键和激活
  • 原文地址：https://www.cnblogs.com/Free-Thinker/p/5836260.html
Copyright © 2011-2022 走看看