autojs模仿QQ長按彈窗選單實現範例

2023-01-26 18:01:20

分析彈框選單

圓角
列表, 類似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;
    });