弹窗菜单
由粗到细, 自顶向下的写代码
我们现在要修改的文件是showMenuWindow.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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;
|
我们先修改xml, QQ的弹窗由两部分组成
因此, xml如下
|
1
2
3
4
5
|
<column>
<androidx.recyclerview.widget.RecyclerView id="recyclerView" padding="16" layout_width="match_parent" layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
<android.view.View id='arrow' ></android.view.View>
</column>
|
这给菜单我们用的也是recyclerView, 因此先设置他的adapter, 如果不会就看上一节课程;
|
1
2
3
4
5
6
7
|
function showMenuWindow(view) {
let popMenuWindow = ui.inflateXml(
...
);
setPopMenuRecyclerViewAdapter(popMenuWindow.recyclerView, []);
...
}
|
设置Adapter的时候, 第一个参数我们是有的, 第二个参数是adapter要绑定的数据, 现在没有;
这给菜单数据应该有哪些属性呢?
因此, 数据大概是这样的
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
menus: [
{
name: "复制",
handle: () => {
console.log("复制");
},
},
{
name: "分享",
handle: () => {
console.log("分享");
},
},
],
|
这种可配置的数据, 我们把它放到config.js中.
数据有了, 接下来我们进入setPopMenuRecyclerViewAdapter方法内部,
提醒一下, 我是复制黏贴的上一节课的setAdapter方法, 因此设置recyclerview的方法大差不差.
setPopMenuRecyclerViewAdapter.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
let definedClass = false;
const PopMenuRecyclerViewViewHolder = require("./PopMenuRecyclerViewViewHolder");
const PopMenuRecyclerViewAdapter = require("./PopMenuRecyclerViewAdapter");
const showMenuWindow = require("../showMenuWindow.js");
module.exports = async function (recyclerView, items) {
if (!definedClass) {
await $java.defineClass(PopMenuRecyclerViewViewHolder);
await $java.defineClass(PopMenuRecyclerViewAdapter);
definedClass = true;
}
var adapter = new PopMenuRecyclerViewAdapter(items);
adapter.setLongClick(showMenuWindow);
recyclerView.setAdapter(adapter);
};
|
基本上就是复制黏贴, 修改一下类名即可
PopMenuRecyclerViewAdapter.js中, 修改一下holderXml即可
PopMenuRecyclerViewViewHolder.js, bind需要修改
|
1
2
3
4
|
bind(item) {
this.itemView.attr("text", item);
this.item = item;
}
|
除了设置adapter, 菜单弹框还需要设置layoutManager, 这样我们可以控制水平方向上菜单的数量
|
1
2
|
const layoutManager = new androidx.recyclerview.widget.GridLayoutManager(this, 5);
grid.setLayoutManager(layoutManager);
|
先设置layoutManager, 再设置adapter
PopMenuRecyclerViewViewHolder.js, 需要修改一下bind方法, 他的item是对象, 文本是item.name
|
1
2
3
4
|
bind(item) {
this.itemView.attr("text", item.name);
this.item = item;
}
|
运行代码, 看看效果
菜单出来了, 接着写箭头, 菜单的xml是
|
1
2
3
4
5
|
<column>
<androidx.recyclerview.widget.RecyclerView id="recyclerView" padding="16" layout_width="match_parent" layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
<android.view.View id='arrow' ></android.view.View>
</column>
|
下面那个View就是我们放箭头的地方
箭头
箭头可能指向上方, 也可能指向下方, 我们通过设置View的前景, 来展示箭头
|
1
|
arrowView.setForeground(drawable);
|
这里我们要写自己的drawable, 因此, 要继承
|
1
|
class TriangleDrawable extends android.graphics.drawable.Drawable {}
|
重写他的draw方法
|
1
2
3
|
draw(canvas) {
canvas.drawPath(this.path, paint);
}
|
画笔创建一支就好, 因为没有发现要创建多支画笔的需求, 以后需要再改, 满足当下即可;
path肯定够是变的, 因为箭头有上下两个位置;
那么在这个TriangleDrawable类中, 我们要实现那些东西呢?
- 设置箭头方向 setDirection
- 目前想不到别的了
如何确认箭头方向?
假设列表有ABC三条数据, ABC依次排列, 在A的顶部, 如果有控件继续放置一条数据D的话,
那么我们就把弹框菜单放到A的顶部, 如果没有, 就放到A的底部
怎么判断是否有足够的空间放下D数据呢? 和那些东西有关?
有这两个信息, 我们就可以判断箭头的方向了.
为了判断箭头方向, 我们新建一个文件, getArrowDirection.js, 文件夹名popMenuRecyclerView, 和箭头明显不合适, 因此我们新建文件夹popMenuArrow
被长按的view的顶部坐标
弹框菜单的高度, 因为弹框还没有显示出来, 所以我们要预先测量他的高度
|
1
2
|
popWindow.getContentView().measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
let popupWindowHeight = popWindow.getContentView().getMeasuredHeight()
|
判断箭头指向
|
1
2
3
4
5
6
|
if (longClickedViewTop - popupWindowHeight < 0) {
// 上面放不下了, 菜单在下面出现, 箭头指向上方
return "up";
} else {
return "down";
}
|
我们给箭头一个背景色, 先看当前的效果
可以看到箭头上下的效果已经出来了,
箭头View的挪动使用了addView和removeView
|
1
2
3
|
let arrowView = popMenuWindow.findView("arrow");
popMenuWindow.findView("root").removeView(arrowView);
popMenuWindow.findView("root").addView(arrowView, 0);
|
这里有个问题, 箭头的背景色为什么那么长, 是弹框菜单的两倍多.
这是因为GridLayoutManager第二个参数设置了5, 我们改为Math.min, 取最小值, 宽度问题就符合预期了
|
1
|
const layoutManager = new GridLayoutManager(view.getContext(), Math.min(popMenus.length, 5));
|
调整popwindow的位置
如果弹框菜单在长按控件的上方, 那么应该偏移多少?
Y轴偏移量 = 弹框菜单的高度 + 长按控件的高度
调用方法如下
|
1
2
3
4
5
|
let offset = popMenuCalculateOffset(view, mPopWindow, arrowDirection);
if (arrowDirection == "down") {
console.log("箭头朝下");
mPopWindow.showAsDropDown(view, offset.x, offset.y);
}
|
我们新建一个文件 popMenuCalculateOffset.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
module.exports = function popMenuCalculateOffset(longClickedView, popWindow, arrowDirection) {
let contentView = popWindow.getContentView();
let width = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
let height = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
contentView.measure(width, height);
popWindow.setBackgroundDrawable(new ColorDrawable(0));
let contentViewHeight = contentView.getMeasuredHeight();
let longClickedViewHeight = longClickedView.getHeight();
console.log("contentViewHeight = " + contentViewHeight);
if (arrowDirection == "down") {
let y = contentViewHeight + longClickedViewHeight;
return { x: 0, y: -y };
} else {
return { x: 0, y: 0 };
}
};
|
获取高宽高以后, 我们的
|
1
2
3
4
5
6
7
8
9
10
|
let offset = popMenuCalculateOffset(view, mPopWindow, arrowDirection);
if (arrowDirection == "down") {
console.log("箭头朝下");
mPopWindow.showAsDropDown(view, offset.x, offset.y);
} else {
let arrowView = popMenuWindow.findView("arrow");
popMenuWindow.findView("root").removeView(arrowView);
popMenuWindow.findView("root").addView(arrowView, 0);
mPopWindow.showAsDropDown(view, offset.x, offset.y);
}
|
代码写了不少了, 看看效果, 及时排查bug
箭头朝上
箭头朝下
绘制箭头
我们用canvas画个三角形, 首先我们要继承类, 重写他的draw方法
|
1
|
class TriangleDrawable extends android.graphics.drawable.Drawable {}
|
单独写一个类文件 TriangleDrawable.js, 放到文件夹 popMenuArrow;
绘制箭头之前, 要知道箭头的宽高, 和箭头的中点;
- 箭头的宽高, 我们就用arrowView的高度;
- 箭头的中点, 我们指向被长按的控件 X 轴的中心
为了使类, 尽可能的比较纯, 我们传递的参数选择具体的数值, 而不是控件;
这里的纯指的是没有副作用, 以及可复用的程度
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
class TriangleDrawable extends android.graphics.drawable.Drawable {
setHeight(height) {
this.height = height;
}
setWidth(width) {
this.width = width;
}
setDirection(direction) {
this.direction = direction;
}
setColor(color) {
this.color = Color.parse(color).value;
}
setLongClickedViewWidth(longClickedViewWidth) {
this.longClickedViewWidth = longClickedViewWidth;
}
draw(canvas) {
trianglePath.reset();
if (this.direction == "down") {
console.log("down");
trianglePath.moveTo(this.width / 2, this.height);
trianglePath.lineTo(this.width / 2 - this.height / 2, 0);
trianglePath.lineTo(this.width / 2 + this.height / 2, 0);
} else {
trianglePath.moveTo(this.width / 2, 0);
trianglePath.lineTo(this.width / 2 - this.height / 2, this.height);
trianglePath.lineTo(this.width / 2 + this.height / 2, this.height);
}
trianglePath.close();
canvas.drawPath(trianglePath, paint);
}
}
module.exports = TriangleDrawable;
|
在popupWindow出现之前, 我们要把箭头绘制出来,
|
1
2
|
await setArrowForeground(arrow, arrowDirection, view);
mPopWindow.showAsDropDown(view, offset.x, offset.y);
|
使用onPreDraw, 在绘制之前, 我们可以获取到正确的宽高
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
arrow.getViewTreeObserver().addOnPreDrawListener(
new android.view.ViewTreeObserver.OnPreDrawListener({
onPreDraw: function () {
arrow.getViewTreeObserver().removeOnPreDrawListener(this);
let arrowHeight = arrow.getHeight();
let arrowWidth = arrow.getWidth();
triangleDrawable.setWidth(arrowWidth);
triangleDrawable.setHeight(arrowHeight);
arrow.setForeground(triangleDrawable);
return true;
},
})
);
|
代码写了不少了, 先测试一下效果
箭头朝上
箭头朝下
修改颜色和圆角
颜色这个就不多说了, 非常容易修改, 说下圆角
修改圆角是在这个文件中: showMenuWindow.js, 我们要给RecyclerView包裹一层card
|
1
2
3
|
<card cardCornerRadius="8dp" w='wrap_content'>
...
</card>
|
给弹框菜单添加点击事件
也就是给弹框菜单中的recyclerview添加点击事件
增加点击事件所在的文件是 popMenuRecyclerView/PopMenuRecyclerViewAdapter.js,
我们修改他的onCreateViewHolder
|
1
2
3
4
5
6
7
8
9
|
onCreateViewHolder(parent) {
let testRecyclerViewViewHolder = new PopMenuRecyclerViewViewHolder(ui.inflateXml(parent.getContext(), holderXml, parent));
testRecyclerViewViewHolder.itemView.setOnClickListener(() => {
let item = this.data[testRecyclerViewViewHolder.getAdapterPosition()];
item.handle();
return true;
});
return testRecyclerViewViewHolder;
}
|
点击事件生效了, 还有个问题, 点击了之后,弹框菜单没有消失, 我们在这里又引用不到弹框实例, 怎么弄?
弹框菜单点击事件引用弹框实例
我们可以用全局对象, 挂载弹框的实例;
我们不选怎全局对象, 而是去能引用的地方引用实例;
在 showMenuWindow.js 这个文件中, 出现了popupWindow实例, 我们把这个实例作为参数, 传递给
setPopMenuRecyclerViewAdapter
|
1
|
setPopMenuRecyclerViewAdapter(mPopWindow, grid, popMenus);
|
setPopMenuRecyclerViewAdapter.js
|
1
2
3
4
5
6
7
8
9
10
|
module.exports = async function (mPopWindow, recyclerView, items) {
const menuClick = (item, itemView) => {
console.log(itemView);
item.handle();
mPopWindow.dismiss();
};
var adapter = new PopMenuRecyclerViewAdapter(items);
adapter.setClick(menuClick);
recyclerView.setAdapter(adapter);
};
|
我们在这个文件中给adapter设置了点击事件, 相应的要在 PopMenuRecyclerViewAdapter.js 文件中添加方法,
setClick
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
class PopMenuRecyclerViewAdapter extends androidx.recyclerview.widget.RecyclerView.Adapter {
constructor(data) {
super();
this.data = data;
this.click = () => {};
}
onCreateViewHolder(parent) {
let testRecyclerViewViewHolder = new PopMenuRecyclerViewViewHolder(ui.inflateXml(parent.getContext(), holderXml, parent));
testRecyclerViewViewHolder.itemView.setOnClickListener(() => {
let item = this.data[testRecyclerViewViewHolder.getAdapterPosition()];
this.click(item, testRecyclerViewViewHolder.itemView);
return true;
});
return testRecyclerViewViewHolder;
}
...
setClick(click) {
this.click = click;
}
}
module.exports = PopMenuRecyclerViewAdapter;
|
到这里就模仿的差不多了, 差不多就行.
如果要增加多个菜单, 在config.js中修改配置即可
环境
设备: 小米11pro
Android版本: 12
Autojs版本: 9.3.11
名人名言
思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问 --- 牙叔教程
声明
部分内容来自网络 本教程仅用于学习, 禁止用于其他用途
