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文档, 最后才是群里问问 --- 牙叔教程
作者：牙叔教程
链接：https://juejin.cn/post/7022213162485153829