autojs边缘菜单

24 篇文章 3 订阅

牙叔教程 简单易懂

效果展示

在这里插入图片描述

缘起

有人问我这个效果怎么做, 我就研究了一下, 我自己是想不到这样的需求的, 他说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文档, 最后才是群里问问
— 牙叔教程

声明

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

bilibili

牙叔教程

微信公众号 牙叔教程

在这里插入图片描述

QQ群

747748653
在这里插入图片描述

源码

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

牙叔教程

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

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

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

打赏作者

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

抵扣说明:

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

余额充值