腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

autojs模仿QQ長按彈窗菜單實現(xiàn)示例

更新時間：2023年01月26日 11:36:38 作者：牙叔教程

這篇文章主要為大家介紹了autojs模仿QQ長按彈窗菜單實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

分析彈框菜單

圓角
列表, 類似grid
箭頭位于文字中間上(下)方

需求分析

如果要寫一個這樣的教程, 我們需要做什么

寫一個列表, 用來觸發(fā)長按選項
寫一個彈窗菜單

代碼分析

列表怎么寫,

先來一個最簡單的布局代碼

"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文件內(nèi)容, 就一個recyclerview

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

RecyclerView基礎(chǔ)代碼

在onContentViewSet這個方法中, 我們?nèi)懥斜? 列表設(shè)置adapter即可;

我們要創(chuàng)建自己的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, 那么就會報錯, 重復(fù)定義類, 因此, 我們設(shè)置個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;
  }

相應(yīng)的修改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"));

代碼修改了一些以后, 就應(yīng)該測試一下, 測試正常以后, 再進(jìn)行下一步操作, 小幅迭代

點擊后出現(xiàn)彈框, 我們先不管菜單, 先彈個框出來

我們創(chuàng)建一個文件: 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文件中調(diào)用他

adapter.setLongClick(showMenuWindow);

因此showMenuWindow有一個參數(shù)view, 就是你長按的那個view, 所以我們還要去Adapter中修改setLongClick

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