autojs边缘菜单

牙叔教程简单易懂

效果展示

效果.gif

缘起

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

声明

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