autojs边缘菜单

简介: 牙叔教程 简单易懂

牙叔教程 简单易懂


效果展示


缘起


有人问我这个效果怎么做, 我就研究了一下, 我自己是想不到这样的需求的, 他说oppo就是这种风格的


环境


手机: Mi 11 Pro


Android版本: 11


Autojs版本: 9.0.10


思路


  • 这个功能主要强调的是边缘
  • 把悬浮窗贴到屏幕边缘, 当手指在边缘触摸时, 悬浮窗第一时间接管触摸事件


你将学到以下知识点


  • 创建温度计形状的悬浮窗
  • 多个悬浮窗之间的互相调度控制
  • 悬浮窗显示动画
  • grid容器的使用方法
  • text设置圆角的多种方法
  • 悬浮窗居中以及贴边的计算方法

备注

小米手机测试的时候, 小米自带的手势功能对应的边缘悬浮窗, 永远在最上层,

我们只能在, 离边缘远一点点的位置, 响应触摸事件,


代码讲解


1. 边缘的悬浮窗UI
let floatingRod = floaty.rawWindow(
  <card id="rod" cardCornerRadius="10dp">
    <vertical>
      <View id="rod1" clickable="true" bg="{{config.color.rod1.collapsed}}" w="16dp" h="100dp"></View>
      <View id="rod2" clickable="true" bg="{{config.color.rod2.collapsed}}" w="16dp" h="100dp"></View>
    </vertical>
  </card>
);


2. 边缘悬浮窗的显示方法

function show() {
  let ww = floatingRod.width;
  let wh = floatingRod.height / 2;
  floatingRod.setPosition(device.width - ww, device.height / 2 - wh);
}


3. 边缘悬浮窗的监听
floatingRod.rod1.setOnTouchListener(function (view, event) {
  switch (event.getAction()) {
    case event.ACTION_DOWN:
      log(" ACTION_DOWN");
      floatingRod.setPosition(-3000, -3000);
      menuWindow1Show();
      break;
  }
  return false;
});


4. 控件设置圆角背景
function setBackgroundRoundRounded(view, color) {
  let gradientDrawable = new GradientDrawable();
  gradientDrawable.setShape(GradientDrawable.RECTANGLE);
  gradientDrawable.setColor(colors.parseColor(color));
  gradientDrawable.setCornerRadius(60);
  gradientDrawable.setSize(50, 50);
  view.setBackground(gradientDrawable);
}


5. 中间悬浮窗的UI
let floatingMenu = floaty.rawWindow(
  <vertical id="firstParent" alpha="0">
    <card cardCornerRadius="10dp">
      <vertical id="parent" padding="6">
        <text textSize="20sp" textColor="#ffffff" gravity="center_horizontal">
          牙叔教程
        </text>
        <scroll id="scroll" h="200dp">
          <grid id="menu" spanCount="2">
            <card cardCornerRadius="10dp" h="30dp" w="80dp" margin="9">
              <text
                textColor="#ccffffff"
                text="{{this.labelName}}"
                textSize="20sp"
                bg="{{this.labelColor}}"
                gravity="center"
              />
            </card>
          </grid>
        </scroll>
      </vertical>
    </card>
  </vertical>
);


6. 导出函数给主程序调用
function main(floatingRodShow) {
  floatingMenu.menu.on("item_click", function (item, i, itemView, listView) {
    toastLog(item.labelName);
    floatingRodShow();
    hide();
  });
  return show;
}
module.exports = main;


名人名言


思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问
--- 牙叔教程


声明


部分内容来自网络
本教程仅用于学习, 禁止用于其他用途



相关文章
|
3月前
|
安全 前端开发 iOS开发
钉钉里微应用ios 底部安全区域的颜色怎么修改?
钉钉里微应用ios 底部安全区域的颜色怎么修改?
145 5
|
1月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
187 0
|
编解码 算法 数据安全/隐私保护
TechSmith Camtasia Studio2022专门录制屏幕动作的工具
Camtasia Studio是TechSmith旗下一款专门录制屏幕动作的工具,它能在任何颜色模式下轻松地记录屏幕动作,包括影像、音效、鼠标移动轨迹、解说声音等等。
324 0
|
前端开发 测试技术 Android开发
autojs显示指定区域
牙叔教程 简单易懂
238 0
|
Android开发
|
数据可视化
autojs可视化控件位置
牙叔教程 简单易学 使用场景
313 0
autojs可视化控件位置
|
文字识别 前端开发
autojs之选择指定区域
使用情景 为了展示ocr的识别效果, 要把识别的文字圈起来, 并且显示识别到的文字
340 0
autojs之选择指定区域
SwiftUI—如何在预览窗口使用不同的模拟器预览用户界面
SwiftUI—如何在预览窗口使用不同的模拟器预览用户界面
328 0
SwiftUI—如何在预览窗口使用不同的模拟器预览用户界面
|
数据安全/隐私保护
Qt-网易云音乐界面实现-2 红红的程序运行图标,和相似下方音乐条
被调出来出差了,这次出差可以说是非常不开心,这次出差也算给我自己提了个醒吧,那就是注意自己的精力,自己的口碑,和比人对自己的信任。具体内容如下
122 0
Qt-网易云音乐界面实现-2 红红的程序运行图标,和相似下方音乐条
Qt-网易云音乐界面实现-8 主导航的实现-QtabWidget
哎呀,堕落了,快有小两周没哟更新了,是在是没有动力了,浏览量连三位数都没有,是在是没有写下去的信心。
123 0
Qt-网易云音乐界面实现-8 主导航的实现-QtabWidget