牙叔教程 简单易懂
组件例子
autojs自带参考示例->界面控件->自定义控件
最简单的组件
var MyView = (function () { //继承至ui.Widget util.extend(MyView, ui.Widget); function MyView() { ui.Widget.call(this); } MyView.prototype.render = function () { return <View></View>; }; ui.registerWidget("my-view", MyView); return MyView; })();
组件的状态
组件有自己的状态， 也有修改状态的方法，也有自己的生命周期
比如， 我们给组件添加一个状态：颜色
var MyView = (function () { //继承至ui.Widget util.extend(MyView, ui.Widget); function MyView() { ui.Widget.call(this); this.defineAttr( "my-view-color", (view, name, defaultGetter) => { return this._color; }, (view, name, value, defaultSetter) => { this._color = value; view.attr("background", value); } ); } MyView.prototype.render = function () { return <View></View>; }; ui.registerWidget("my-view", MyView); return MyView; })(); ui.layout( <vertical> <my-view my-view-color="#ff0000"></my-view> </vertical> );
新增的代码是这个， 它的书写位置是自定义组件的构造函数 function MyView(){...} 里面;
他有三个参数：
- 属性名字
- getter
- setter
this.defineAttr( "my-view-color", (view, name, defaultGetter) => { return this._color; }, (view, name, value, defaultSetter) => { this._color = value; view.attr("background", value); } );
外界获取组件的颜色
log(ui.myView.widget._color);
组件的生命周期
- onViewCreated
- onFinishInflation
添加生命周期
MyView.prototype.onViewCreated = function (view) {}; MyView.prototype.onFinishInflation = function (view) {};
我们打印一下， 看看谁先谁后
[ 'onViewCreated', 'onFinishInflation' ]
看这名字像一颗种子种下了，然后长成了大树
给组件添加点击事件
每个组件的点击事件应该是独立的，因此我们在组件的构造函数中添加一个属性clickAction
function MyView() { ui.Widget.call(this); this.clickAction = function () {}; }
然后在 onViewCreated 或者 onFinishInflation 监听按钮点击， 然后触发点击事件clickAction
MyView.prototype.onFinishInflation = function (view) { let that = this; view.on("click", function () { that.clickAction(); }); };
如果我们想在组件之外修改点击事件， 那么就要在组件里面， 去接受外面的修改行为；
我们给组件添加一个set方法， 去修改点击事件：
MyView.prototype.setClickAction = function (fn) { this.clickAction = fn; };
外界调用组件的set方法
也许你会觉得应该这样写？
ui.myView.setClickAction(function () { toastLog("外界修改了my-view"); });
报错了
TypeError: Cannot find function setClickAction in object android.view.View{18664b9 V.ED..C.. ......ID 0,0-0,0 #133a2cd}.
正确写法， 要在myView后面加一个 .widget
ui.myView.widget.setClickAction(function () { log("this is new clickAction"); });
统计使用了多少个组件
ui.layout( <vertical> <my-view id="myView" my-view-color="#ff0000"></my-view> <my-view id="myView2" my-view-color="#00ff00"></my-view> <my-view id="myView3" my-view-color="#0000ff"></my-view> </vertical> );
这里使用了三个组件， 我们要获取组件的个数， 怎么获取？
我们在构造函数的上方添加一个变量 counter
let counter = 0; function MyView() {}
再在onViewCreated 中修改counter, 新增一个组件， onViewCreated就会调用一次
MyView.prototype.onViewCreated = function (view) { counter++; };
最后，我们把获取counter的方法挂到MyView上面
MyView.getCounter = function () { return counter; };
获取组件个数
log(MyView.getCounter());
所有代码
"ui"; engines.all().map((ScriptEngine) => { if (engines.myEngine().toString() !== ScriptEngine.toString()) { ScriptEngine.forceStop(); } }); activity.window.addFlags(android.view.View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION); importClass(android.view.View); let arr = []; var MyView = (function () { //继承至ui.Widget util.extend(MyView, ui.Widget); let counter = 0; function MyView() { ui.Widget.call(this); this.clickAction = function () { log("this is myView clickAction"); }; this.defineAttr( "my-view-color", (view, name, defaultGetter) => { return this._color; }, (view, name, value, defaultSetter) => { this._color = value; view.attr("background", value); } ); } MyView.prototype.setClickAction = function (fn) { this.clickAction = fn; }; MyView.prototype.render = function () { return <View></View>; }; MyView.prototype.onViewCreated = function (view) { counter++; }; MyView.getCounter = function () { return counter; }; MyView.prototype.onFinishInflation = function (view) { let that = this; view.on("click", function () { that.clickAction(); }); }; ui.registerWidget("my-view", MyView); return MyView; })(); ui.layout( <vertical> <my-view id="myView" my-view-color="#ff0000"></my-view> <my-view id="myView2" my-view-color="#00ff00"></my-view> <my-view id="myView3" my-view-color="#0000ff"></my-view> </vertical> ); ui.myView.widget.setClickAction(function () { log("this is new clickAction"); }); log(MyView.getCounter());
环境
雷电模拟器： 4.0.63
Android版本: 7.1.2
Autojs版本: 8.8.20
名人名言
思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问 --- 牙叔教程
声明
部分内容来自网络 本教程仅用于学习, 禁止用于其他用途
