autojs模仿QQ長(zhǎng)按彈窗菜單實(shí)現(xiàn)示例

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

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

分析彈框菜單

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

需求分析

如果要寫(xiě)一個(gè)這樣的教程, 我們需要做什么

寫(xiě)一個(gè)列表, 用來(lái)觸發(fā)長(zhǎng)按選項(xiàng)
寫(xiě)一個(gè)彈窗菜單

代碼分析

列表怎么寫(xiě),

先來(lái)一個(gè)最簡(jiǎn)單的布局代碼

"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)容, 就一個(gè)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這個(gè)方法中, 我們?nèi)?xiě)列表, 列表設(shè)置adapter即可;

我們要?jiǎng)?chuàng)建自己的Adapter類(lèi), 繼承自RecyclerView.Adapter

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

這里用MyAdapter命名合適嗎? 不合適, 如果你以后也用了MyAdapter, 那么可能造成類(lèi)名沖突, 所以, 我們改個(gè)名字, 我們是在測(cè)試, 因此就叫 TestReayclerViewAdapter,

還有一點(diǎn)是, 因?yàn)槲覀円獙?xiě)兩個(gè)類(lèi), 還有一個(gè)文件實(shí)例化兩個(gè)類(lèi), 因此我們把這個(gè)三個(gè)文件放到同一個(gè)文件夾

我們自頂向下來(lái)寫(xiě)代碼, 首先我們寫(xiě)的是setTestRecyclerViewAdapter.js, 他這個(gè)里面要做幾件事:

加載兩個(gè)類(lèi), Adapter和Holder, Holder先加載, 因?yàn)樗麜?huì)在Adapter中使用
實(shí)例化兩個(gè)類(lèi)

類(lèi)呢, 我們先不寫(xiě), 我們先寫(xiě)偽代碼

setTestRecyclerViewAdapter.js

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

這樣寫(xiě)怎么樣, 有問(wèn)題嗎?

有問(wèn)題, 如果每次都defineClass, 那么就會(huì)報(bào)錯(cuò), 重復(fù)定義類(lèi), 因此, 我們?cè)O(shè)置個(gè)flag, 類(lèi)只定義一次

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);
};

這樣就沒(méi)問(wèn)題了, 接下來(lái)我們寫(xiě)TestRecyclerViewAdapter, 為什么先寫(xiě)他呢, 前面說(shuō)過(guò)了, 我們是自頂向下寫(xiě),

TestRecyclerViewAdapter里面要寫(xiě)什么呢? 重寫(xiě)三個(gè)方法

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;

這個(gè)代碼里面, 唯一需要變動(dòng)的地方是holderXml

接下來(lái)該寫(xiě)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;

到這里為止, 一個(gè)recyclerview的骨架就成型了, 先看看效果

最簡(jiǎn)單的列表就是如此, 我們給他潤(rùn)色一下, 字體放大, 再加個(gè)圓角背景

列表有了, 接下來(lái)我們要考慮彈框的事情了, 那么第一個(gè)考慮的點(diǎn)就是, 長(zhǎng)按事件

長(zhǎng)按事件

長(zhǎng)按事件在哪個(gè)文件寫(xiě)呢?

我們既可以在Adapter中寫(xiě), 也可以在Holder中寫(xiě),

如果在Holder中寫(xiě), 那么我們就要把長(zhǎng)按的方法, 從Adapter傳給Holder, 我們需要多寫(xiě)幾個(gè)字幕母, 因此我選擇在Adapter中寫(xiě)長(zhǎng)按事件

TestRecyclerViewAdapter.js 中修改 onCreateViewHolder 方法即可

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

長(zhǎng)按事件可能是多種多樣的, 因此, 我們?cè)赥estRecyclerViewAdapter.js中, 增加一個(gè)方法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)該測(cè)試一下, 測(cè)試正常以后, 再進(jìn)行下一步操作, 小幅迭代

點(diǎn)擊后出現(xiàn)彈框, 我們先不管菜單, 先彈個(gè)框出來(lái)

我們創(chuàng)建一個(gè)文件: 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有一個(gè)參數(shù)view, 就是你長(zhǎng)按的那個(gè)view, 所以我們還要去Adapter中修改setLongClick

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