牙叔教程 简单易懂
效果展示
缘起
有人问我这个效果怎么做, 我就研究了一下, 我自己是想不到这样的需求的, 他说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文档, 最后才是群里问问
--- 牙叔教程
声明
部分内容来自网络
本教程仅用于学习, 禁止用于其他用途
