系统实现悬浮窗-菜单-悬浮按钮功能

于 2024-09-27 00:33:23 发布
阅读量1.3k 收藏 24
点赞数 27
分类专栏： SystemUI 文章标签： 系统悬浮框 悬浮圆球 悬浮菜单 SystemUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ItJavawfc/article/details/142579532
版权

文章目录

需求：系统实现悬浮窗菜单功能或悬浮小球定制功能

  • 模拟最早 iPhone4S 悬浮菜单功能，点击后显示菜单；当前苹果也有此功能
  • 模拟当前部分Android 品类上面的悬浮球设置

实际手机产品效果

在这里插入图片描述在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

悬浮窗作用

  • 关联手势控制：点击、双击、长按，控制关联功能定制
  • 关联菜单：点击显示菜单，实现功能入口

一、实际应用场景

手机端已经把悬浮按钮功能实现很好了，但是都是隐藏的功能，手机自带手势功能已经非常友好了，有个悬浮窗反倒是影响了体验。但是对于部分其它带屏产品，悬浮窗功能还是有必要要的。

  • 产品确实需要有一个简单悬浮菜单，屏蔽底部导航、保留或者屏蔽手势导航，一个菜单的入口
  • 产品底部导航栏功能占用太多，放不下了，添加一个悬浮按钮，指定对应的功能

二、应用上面实现功能

首先在应用上面实现，后续移植，我们先实现悬浮按钮效果，对于控制管理在集成系统时需要考虑到架构相关，暂不考虑。
应用上其实就可以实现悬浮功能按钮，也方便管理，但是集成到系统里面，方便形成公版；应用端实现便于定制版本

思路

  • 界面一定是在服务Service里面添加的，通过窗体Window 添加
  • 那么窗体就是一个悬浮按钮
  • 对悬浮按钮进行监听：点击、双击、长按、拖拽移动，实现具体的功能，如果实现菜单那其实就是展示另外一个窗体而已

Demo演示效果

功能演示：悬浮按钮，点击熄屏

悬浮圆点演示效果

部分源码分析

Service层

添加view,view 的初始化

View 的添加
 @Override
    public int onStartCommand(Intent intent, int flags, int startId) {
        Log.d(TAG, "flags:" + flags + "__startId:" + startId);
        String operate = null;
        if (intent != null && !isBlank(operate = intent.getStringExtra("operate"))) {
            if (equals(operate, "show")) {
                mFloatView.addToWindow();
            }
        } else if (mOrientationLastIsShown && !mFloatView.isShown()) { // 小组件桌面显示的时候，旋转屏的时候会启动startCommand所以旋转屏的时候记录了状态
            mFloatView.addToWindow();
        }
        mOrientationLastIsShown = true;// 清空旋转屏记录的状态
        return super.onStartCommand(intent, flags, startId);
    }

View 初始化，view 点击事件、长按事件 
 /**
     * 初始化浮动小白点
     */
    private void initFloatView() {
        Log.d(TAG, "initFloatView: ");
        WindowManager wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
        mScreenPoint = new Point();
        wm.getDefaultDisplay().getSize(mScreenPoint);
        if (mFloatView != null) {
            mFloatView.removeFromWindow();
        }
        float x, y;
        String lastpoint = SharePreferencesHelper.getInstance(mContext).get(FloatView.LAST_POINT_KEY);
        if (!isBlank(lastpoint)) {
            String point[] = lastpoint.split("\\*");
            x = Float.valueOf(point[0]);
            y = Float.valueOf(point[1]);
            if (x != 0) {
                x = mScreenPoint.x;
            }
            if (y > mScreenPoint.y) {
            }
            Log.d(TAG, "mScreenPoint.y:" + mScreenPoint.y + "   mScreenPoint.x:" + mScreenPoint.x);
            y = y * mScreenPoint.y / (mScreenPoint.x - 48);
        } else { // 初始位置靠右边中间往下一些
            x = mScreenPoint.x;
            y = mScreenPoint.y * 3 / 4;
        }
        mFloatView = new FloatView(mContext, (int) x, (int) y, R.layout.float_layout);
        mFloatView.setFloatViewClickListener(new FloatView.IFloatViewClick() {
            @Override
            public void onFloatViewClick() {
                Log.d(TAG, "onFloatViewClick ");
            }
        });
        mFloatView.setFloatViewLongClickListener(new FloatView.IFloatViewLongClick() {
            @Override
            public void onFloatViewLongClick() {
                mFloatView.removeFromWindow();
                Log.d(TAG," mFloatView  onFloatViewLongClick");
             }
        });
    }

View层

View初始化
 private void initView(Context context, View childView, int x, int y) {
        mContext = context;
        mMaxMoveX =  dip2px(mContext, 25);
        mYOffset =  dip2px(mContext, 15);
        mMoveYOffset =  dip2px(mContext, 15);
        mMoveMinLimit =  dip2px(mContext, 11);
        floatIV = (ImageView) childView.findViewById(R.id.float_id);
        wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
        mScreenPoint = new Point();
        wm.getDefaultDisplay().getSize(mScreenPoint);
        wmParams = new WindowManager.LayoutParams();
        wmParams.type = WindowManager.LayoutParams.TYPE_TOAST;
        wmParams.gravity = Gravity.LEFT | Gravity.TOP;
        wmParams.format = PixelFormat.RGBA_8888;
        wmParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE;
        wmParams.width = WindowManager.LayoutParams.WRAP_CONTENT;
        wmParams.height = WindowManager.LayoutParams.WRAP_CONTENT;
        wmParams.x = (int) x;
        wmParams.y = (int) y;
        wmParams.type = WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY;
        if (childView != null) {
            addView(childView);
        }
        // 记录最后所在位置
        SharePreferencesHelper.getInstance(mContext).set(LAST_POINT_KEY, x + "*" + y);
    }
view 添加到窗体
  /**
     * 显示
     *
     * @return isAddtoWindow
     */
    public boolean addToWindow() {
        if (wm == null) {
            return false;
        }
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            if (isAttachedToWindow()) {
                return false;
            }
        } else if (getParent() != null) {
            return false;
        }
        if (!isShown()) {
            if (floatIV != null) {
                floatIV.setImageResource(mLastIVDrawable);
            }
            startPreparedSleep();
            wm.addView(this, wmParams);
        }
        return true;
    }
悬浮球拖动
   @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (event.getPointerCount() > 1)
                    return false;
                isMove = false;
                mHandler.removeMessages(SLEEP);
                mHandler.sendEmptyMessageDelayed(LONG_CLICK, LONG_CLICK_TIME);
                mLastIVDrawable = R.drawable.float_white_btn;
                floatIV.setImageResource(R.drawable.float_white_big_btn);
                mTouchStartX = (int) event.getRawX() - this.getMeasuredWidth() / 2;
                mTouchStartY = (int) event.getRawY() - this.getMeasuredHeight() / 2 - mYOffset;
                return true;
            case MotionEvent.ACTION_MOVE:
                if (!allowMove) {
                    return false;
                }

                int moveX = (int) event.getRawX() - this.getMeasuredWidth() / 2;
                int moveY = (int) event.getRawY() - this.getMeasuredHeight() / 2 - mMoveYOffset;

                if (Math.abs(moveY - mTouchStartY) > mMoveMinLimit || Math.abs(moveX - mTouchStartX) > mMoveMinLimit) { //移动位置较小时认为是没有移动
                    wmParams.x = moveX;
                    wmParams.y = moveY;
                    wm.updateViewLayout(this, wmParams);
                    mHandler.removeMessages(LONG_CLICK);
                    isMove = true;
                }
                return false;
            case MotionEvent.ACTION_UP:
                int x = (int) event.getRawX() - this.getMeasuredWidth() / 2;
                int y = (int) event.getRawY() - this.getMeasuredHeight() / 2 - mYOffset;

                startPreparedSleep();
                mLastIVDrawable = R.drawable.float_white_btn;
                floatIV.setImageResource(R.drawable.float_white_btn);
                if (isMove) {
                    if (allowAutoMoveToSlide && allowMove) {
                        autoMoveSlide(x, y);
                    }
                } else {
                    mHandler.removeMessages(LONG_CLICK);
                   /* if (listener != null) {
                        listener.onFloatViewClick();
                    }*/
                    Log.d(TAG," 点击了，处理点击事件");
                    goToSleep(mContext);
                }
                return true;
            default:
                break;
        }
        return false;
    }
重点代码：
  • wm.addView(this, wmParams); 添加操作
  • wmParams.type = WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY; 窗体类型

三、系统上面实现功能

思路

  • 参考应用功能实现，创建服务或者在系统服务里面实现功能。 个人认为放置到设置或者SystemUI，两者中我选择SystemUI
  • 业务功能，比如View代码、资源代码放置到对应目录，能够引用即可

系统服务SystemUIService

Android12在线SystemUI源码
SystemUI顶层目录：
在这里插入图片描述

AndroidMenifest.xml 部分
 <!-- Keep theme in sync with SystemUIApplication.onCreate().
             Setting the theme on the application does not affect views inflated by services.
             The application theme is set again from onCreate to take effect for those views. -->
        <meta-data android:name="com.google.android.backup.api_key" android:value="AEdPqrEAAAAIWTZsUG100coeb3xbEoTWKd3ZL3R79JshRDZfYQ" />
        <!-- Broadcast receiver that gets the broadcast at boot time and starts
             up everything else.
             TODO: Should have an android:permission attribute
             -->
        <service android:name="SystemUIService"
            android:exported="true"
        />

SystemUIService 服务暂不分析，这个地方添加View即可

总结

源码参考：
系统悬浮框核心代码
应用端悬浮框源码
扩展：
菜单功能：只需要点击白点后添加一个wm View呀
控制功能：要么用SystemUI和Settings关联逻辑来控制；要么Service 通过binder 实现绑定，对外提供接口，通过aidl 来进程间通信控制

悬浮按钮
冰之沁泠的博客
07-23 483
悬浮按钮是Design Support库中的。 <android.support.design.widget.FloatingActionButton android:layout_width="70dp" android:layout_height="70dp" android:layout_gravity="end|...
按钮悬浮效果 html,CSS模拟实现MaterialDesign样式的悬浮操作按钮_html/css_WEB-ITnose
weixin_35940165的博客
06-03 899
撰写于 2016年6月5日 修改于 2016年6月5日分类编程杂记标签前端Material Design 的悬浮操作按钮虽然会挡住一部分页面内容，但的确提供了一种不错的表现操作按钮的思路。手里一个微信的项目正好准备试试用这种风格来表现创建一类的操作。关于 Material Design 的按钮介绍，可以看 这里。这里实现一个类似于 Gmail App 中的新建邮件按钮风格类似的样式，为了简便，就直...
Android 5.0新控件——FloatingActionButton（悬浮按钮）
weixin_34010566的博客
12-30 724
Android 5.0新控件——FloatingActionButton（悬浮按钮） FloatingActionButton是5.0以后的新控件，一个悬浮按钮，之所以叫做悬浮按钮，主要是因为自带阴影属性，看上去像是悬浮的而已，其实就可以简单理解成一个带有阴影效果的Button。 效果图 使用 使用方法和Button一样 有的文章说Float...
可移动的悬浮按钮(WindowManager)
12-14
可移动的悬浮按钮，用WindowManager,自动义FloatView实现，代码简单移动，只需一步，直接接入项目中。。
悬浮按钮Demo
12-01
悬浮按钮
悬浮按钮和可交互按钮
qq_35698774的博客
08-11 1257
2014年Googel I/O大会上重磅推出了一套全新的界面设计语言MaterialDesign。因为设计人员也不了解这个东西，开发人员实现起来也很费劲，几乎没有一个可以用的API，都需要自己实现所以普及程度比较低。 而google也意识到了这一问题，于是2015年的Google I/O大会上推出了一个Design Support库，这个库将一些具有代表性的一些控件和效果进行了封装，这样就大大的简化了实现难度。 立面设计也是MaterialDesign中一...
HTML网页悬浮按钮
FYH003的博客
02-16 2625
按钮在网页右下角悬浮，不会跟随页面滚动。
android 悬浮按钮 简书,悬浮按钮
weixin_32838901的博客
05-29 372
悬浮按钮在父布局中宽高设置为match_parentandroid:id="@+id/floatBtn"android:layout_width="match_parent"android:layout_height="match_parent"/>public class CustomFloatButton extends View {private Context context;pri...
Android 拖动的悬浮按钮
Agnoi丶军
03-05 630
public class FloatDragView { private Activity context; // 上下文 private ImageView mImageView; // 可拖动按钮 private static int mScreenWidth = -1; //屏幕的宽度 private static int mScreenHeight = -1...
html 按钮悬浮效果,css3按钮悬浮效果
weixin_42509766的博客
06-03 1092
a {text-decoration:none}body {margin:0;padding:0;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:Raleway;background-color:#ecf0f1;}.cop...
按钮悬浮效果纯html+css
weixin_43545369的博客
09-25 1107
<button class="noselect"></button> * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #42378f; background-image
页面悬浮按钮可拖动实现（vue和js写法）
最新发布
qq_51819142的博客
12-20 4380
注：如果想在vue项目中的每个页面都加上悬浮按钮，可用js，写在APP.vue的onLaunch（）函数里。2.然后在main.js中注册全局组件（这里大家根据自己的实际路径替换）3.最后在需要这个悬浮按钮的页面模板中用这个组件就可以了。1.创建一个FloatingButton.vue的组件。1. 每个页面都能自动加上悬浮按钮。
按钮悬浮特效【持续更新】
weixin_43623808的博客
12-27 327
贝塞尔曲线测试 https://cubic-bezier.com/#.32,0,.43,1.59 第一种动画： 源代码地址： https://github.com/wenrouxiansheng/jsRule/tree/master/button_animation
使用自定义 View 绘制一个悬浮式可拖拽按钮
weixin_33941350的博客
03-14 186
前言 最近公司因为业务要求需要实现一个可以拖拽的悬浮按钮，Android 官方提供了 FloatingActionButton 但是并不支持定制。于是我打算采用自定义 View 的方法来实现。Android 官方文档告诉我们，使用自定义控件需要以下的步骤。（根据你的需要，某些步骤可以省略） 创建 View 处理 View 的布局 绘制 View 与用户进行交互 优化已定义的 View 下面我分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

野火少年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值