autojs模仿QQ长按弹窗菜单实现示例

 更新时间:2023年01月26日 11:36:38   作者:牙叔教程  
这篇文章主要为大家介绍了autojs模仿QQ长按弹窗菜单实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

分析弹框菜单

  • 圆角
  • 列表, 类似grid
  • 箭头位于文字中间上(下)方

需求分析

如果要写一个这样的教程, 我们需要做什么

  • 写一个列表, 用来触发长按选项
  • 写一个弹窗菜单

代码分析

列表怎么写,

先来一个最简单的布局代码

"nodejs ui";
require("rhino").install();
const ui = require("ui");
class MainActivity extends ui.Activity {
  constructor() {
    super();
    this.items = [];
    for (var i = 10; i < 100; i++) {
      this.items.push(randomStr(i + 1));
    }
  }
  get layoutXmlFile() {
    return "layout.xml";
  }
  onContentViewSet() {}
}
ui.setMainActivity(MainActivity);

layout.xml文件内容, 就一个recyclerview

<column>
	<androidx.recyclerview.widget.RecyclerView id="recyclerView" padding='12' layout_width="match_parent" layout_height="match_parent">
	</androidx.recyclerview.widget.RecyclerView>
</column>

RecyclerView基础代码

在onContentViewSet这个方法中, 我们去写列表, 列表设置adapter即可;

我们要创建自己的Adapter类, 继承自RecyclerView.Adapter

class MyAdapter extends androidx.recyclerview.widget.RecyclerView.Adapter {}

这里用MyAdapter命名合适吗? 不合适, 如果你以后也用了MyAdapter, 那么可能造成类名冲突, 所以, 我们改个名字, 我们是在测试, 因此就叫 TestReayclerViewAdapter,

还有一点是, 因为我们要写两个类, 还有一个文件实例化两个类, 因此我们把这个三个文件放到同一个文件夹

我们自顶向下来写代码, 首先我们写的是setTestRecyclerViewAdapter.js, 他这个里面要做几件事:

  • 加载两个类, Adapter和Holder, Holder先加载, 因为他会在Adapter中使用
  • 实例化两个类

类呢, 我们先不写, 我们先写伪代码

setTestRecyclerViewAdapter.js

module.exports=function(recyclerView,items){
  await $java.defineClass(TestRecyclerViewViewHolder)
  await $java.defineClass(TestRecyclerViewAdapter)
  var adapter=new TestRecyclerViewAdapter(items)
  recyclerView.setAdapter(adapter)
}

这样写怎么样, 有问题吗?

有问题, 如果每次都defineClass, 那么就会报错, 重复定义类, 因此, 我们设置个flag, 类只定义一次

let definedClass = false;
module.exports = async function (recyclerView, items) {
  if (!definedClass) {
    await $java.defineClass(TestRecyclerViewViewHolder);
    await $java.defineClass(TestRecyclerViewAdapter);
    definedClass = true;
  }
  var adapter = new TestRecyclerViewAdapter(items);
  recyclerView.setAdapter(adapter);
};

这样就没问题了, 接下来我们写TestRecyclerViewAdapter, 为什么先写他呢, 前面说过了, 我们是自顶向下写,

TestRecyclerViewAdapter里面要写什么呢? 重写三个方法

  • onCreateViewHolder
  • onBindViewHolder
  • getItemCount
  • getItemViewType

TestRecyclerViewAdapter.js

const ui = require("ui");
class TestRecyclerViewAdapter extends androidx.recyclerview.widget.RecyclerView.Adapter {
  constructor(data) {
    super();
    this.data = data;
  }
  onCreateViewHolder(parent) {
    return new TestRecyclerViewViewHolder(ui.inflateXml(parent.getContext(), holderXml, parent));
  }
  onBindViewHolder(holder, position) {
    holder.bind(this.data[position], position);
  }
  getItemCount() {
    return this.data.length;
  }
  getItemViewType() {
    return 0;
  }
}
module.exports = TestRecyclerViewAdapter;

这个代码里面, 唯一需要变动的地方是holderXml

接下来该写TestRecyclerViewViewHolder

class TestRecyclerViewViewHolder extends androidx.recyclerview.widget.RecyclerView.ViewHolder {
  constructor(itemView) {
    super(itemView);
  }
  bind(item) {
    this.itemView.attr("text", item);
    this.item = item;
  }
}
module.exports = TestRecyclerViewViewHolder;

到这里为止, 一个recyclerview的骨架就成型了, 先看看效果

最简单的列表就是如此, 我们给他润色一下, 字体放大, 再加个圆角背景

列表有了, 接下来我们要考虑弹框的事情了, 那么第一个考虑的点就是, 长按事件

长按事件

长按事件在哪个文件写呢?

我们既可以在Adapter中写, 也可以在Holder中写,

如果在Holder中写, 那么我们就要把长按的方法, 从Adapter传给Holder, 我们需要多写几个字幕母, 因此我选择在Adapter中写长按事件

TestRecyclerViewAdapter.js 中 修改 onCreateViewHolder 方法即可

  onCreateViewHolder(parent) {
    let testRecyclerViewViewHolder = new TestRecyclerViewViewHolder(ui.inflateXml(parent.getContext(), holderXml, parent));
    testRecyclerViewViewHolder.itemView.setOnLongClickListener(() => {
      console.log("你长按了我: " + testRecyclerViewViewHolder.item);
      return true;
    });
    return testRecyclerViewViewHolder;
  }

长按事件可能是多种多样的, 因此, 我们在TestRecyclerViewAdapter.js中, 增加一个方法setLongClick

  setLongClick(longClick) {
    this.longClick = longClick;
  }

相应的修改onCreateViewHolder代码

  onCreateViewHolder(parent) {
    let testRecyclerViewViewHolder = new TestRecyclerViewViewHolder(ui.inflateXml(parent.getContext(), holderXml, parent));
    testRecyclerViewViewHolder.itemView.setOnLongClickListener(() => {
      this.longClick();
      return true;
    });
    return testRecyclerViewViewHolder;
  }

setTestRecyclerViewAdapter.js中的代码要添加一行

adapter.setLongClick(() => console.log("this is long click"));

代码修改了一些以后, 就应该测试一下, 测试正常以后, 再进行下一步操作, 小幅迭代

点击后出现弹框, 我们先不管菜单, 先弹个框出来

我们创建一个文件: showMenuWindow.js

const ui = require("ui");
const PopupWindow = android.widget.PopupWindow;
const ViewGroup = android.view.ViewGroup;
function showMenuWindow(view) {
  let popMenuWindow = ui.inflateXml(
    view.getContext(),
    `
    <column>
    <button id="btn1" text="btn1" />
    </column>
    `,
    null
  );
  let mPopWindow = new PopupWindow(popMenuWindow, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, true);
  mPopWindow.setOutsideTouchable(true);
  mPopWindow.showAsDropDown(view);
}
module.exports = showMenuWindow;

然后在setTestRecyclerViewAdapter.js文件中调用他

adapter.setLongClick(showMenuWindow);

因此showMenuWindow有一个参数view, 就是你长按的那个view, 所以我们还要去Adapter中修改setLongClick

    testRecyclerViewViewHolder.itemView.setOnLongClickListener(() => {
      this.longClick(testRecyclerViewViewHolder.itemView);
      return true;
    });

经过测试代码正常运行,

接下来呢, 是把这个弹框改成菜单的样式,

今天先写到这里, 下一个教程继续

环境

设备: 小米11pro
Android版本: 12
Autojs版本: 9.3.11

名人名言

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

声明

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

以上就是autojs模仿QQ长按弹窗菜单实现示例的详细内容,更多关于autojs实现QQ长按弹窗菜单的资料请关注脚本之家其它相关文章!

相关文章

  • Android雷达扫描动态界面制作

    Android雷达扫描动态界面制作

    这篇文章主要为大家详细介绍了Android雷达扫描动态界面制作资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Bitmap引起的OOM问题

    Bitmap引起的OOM问题

    这篇文章主要介绍了Bitmap引起的OOM问题,为什么会引起,以及避免引起的方法,文中有详细的代码示例,有需要的朋友可以参考下
    2023-04-04
  • Qt for Android开发实例教程

    Qt for Android开发实例教程

    这篇文章主要介绍了Qt for Android开发的方法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-08-08
  • Android inflater 用法及不同点

    Android inflater 用法及不同点

    在 实际开发中LayoutInflater这个类还是非常有用的,它的作用类似于findViewById()。这篇文章主要介绍了Android inflater 用法,需要的朋友可以参考下
    2018-11-11
  • android自定义波浪加载动画的实现代码

    android自定义波浪加载动画的实现代码

    这篇文章主要为大家详细介绍了android自定义波浪加载动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Android编程实现泡泡聊天界面实例详解(附源码)

    Android编程实现泡泡聊天界面实例详解(附源码)

    这篇文章主要介绍了Android编程实现泡泡聊天界面,结合实例形式较为详细的分析了Android泡泡聊天界面的窗体定义与功能实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • Android微信分享大图遇到的问题的解决方法

    Android微信分享大图遇到的问题的解决方法

    这篇文章主要介绍了Android微信分享大图遇到的问题的解决方法,记录了微信图片分享出错的坑,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • Android ListView获得选项中的值

    Android ListView获得选项中的值

    本篇文章主要介绍Android ListView,在Android开发过程中经常会用到ListView 组件并有监听事件,这里给大家一个简单实例,来说明如何得到ListView选项中的值
    2016-07-07
  • android 退出程序解决内存释放的问题

    android 退出程序解决内存释放的问题

    做Android项目的时候发现一个问题:当应用程序退出了,点击"设置"查看应用程序,界面显示着可以点击"强制关闭 由于这个问题我发现了一个更加严重的问题,那就是,在我应用程序退出之后,系统并没有释放掉我应用程序所占内存
    2012-11-11
  • Android实现雅虎新闻摘要加载视差动画效果

    Android实现雅虎新闻摘要加载视差动画效果

    这篇文章主要介绍了Android实现雅虎新闻摘要加载视差动画效果,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-08

最新评论