文章
文章商铺文档快讯

Autojs模块：UI界面

脚本如何对接UI界面

哔哩哔哩：https://www.bilibili.com/video/BV1rCfiYxEKW/

示例代码

1、按钮控件

"ui";
​
ui.layout(
    <vertical padding="16">
        <button text="普通按钮" w="auto"/>
        <button text="带颜色按钮" style="Widget.AppCompat.Button.Colored" w="auto"/>
        <button text="无边框按钮" style="Widget.AppCompat.Button.Borderless" w="auto"/>
        <button text="无边框有颜色按钮" style="Widget.AppCompat.Button.Borderless.Colored" w="auto"/>
        <button text="长长的按钮" w="*"/>
        <button id="click_me" text="点我" w="auto"/>
    </vertical>
);
​
ui.click_me.on("click", ()=>{
    toast("我被点啦");
});
​
ui.click_me.on("long_click", ()=>{
    toast("我被长按啦");
});

2、表格控件(一)

3、表格控件(二)

4、表格控件(三)

5、表格控件(四)

"ui";
​
ui.layout(
    <vertical>
        <linear>
            <input id="input" layout_weight="1" textColor="black" textSize="16sp" marginLeft="16"/>
            <button id="search" text="搜索" style="Widget.AppCompat.Button.Borderless.Colored"/>
            <button id="reset" text="重置" style="Widget.AppCompat.Button.Borderless.Colored"/>
        </linear>
        <grid id="icons" spanCount="4" h="*">
            <img src="@drawable/{{this}}" h="80" margin="12" bg="?selectableItemBackgroundBorderless"/>
        </grid>
    </vertical>
);
​
//部分内置图标名称
var icons = ['ic_speaker_phone_black_48dp', 'ic_stay_current_landscape_black_48dp', 'ic_stay_current_portrait_black_48dp', 'ic_stay_primary_landscape_black_48dp'];
​
ui.icons.setDataSource(icons);
​
ui.icons.on("item_click", function(icon){
    var d = "@drawable/" + icon;
    setClip(d);
    toast(d + "已复制到剪贴板");
});
​
ui.search.on("click", function(){
    var text = ui.input.text();
    if(text.length == 0){
        return;
    }
    search(text);
});
​
ui.reset.on("click", function(){
    ui.icons.setDataSource(icons);
});
​
function search(keywords){
    var result = [];
    for(var i = 0; i < icons.length; i++){
        var icon = icons[i];
        if(icon.indexOf(keywords) >= 0){
            result.push(icon);
        }
    }
    ui.icons.setDataSource(result);
}
​

6、复选框单选框控件

"ui";
​
ui.layout(
    <vertical padding="16">
        <checkbox id="cb1" text="复选框"/>
        <checkbox id="cb2" checked="true" text="勾选的复选框"/>
        <radiogroup>
            <radio text="单选框1"/>
            <radio text="单选框2"/>
            <radio text="单选框3"/>
        </radiogroup>
        <radiogroup mariginTop="16">
            <radio text="单选框1"/>
            <radio text="单选框2"/>
            <radio text="勾选的单选框3" checked="true"/>
        </radiogroup>
    </vertical>
);
​
ui.cb1.on("check", (checked)=>{
    if(checked){
        toast("第一个框被勾选了");
    }else{
        toast("第一个框被取消勾选了");
    }
});

7、进度条控件（一）

8、进度条控件（二）

"ui";
​
ui.layout(
    <vertical padding="16">
        <text text="处理中..." textColor="black" textSize="16sp"/>
        <progressbar />
​
        <text text="直线无限进度条" textColor="black" textSize="16sp" marginTop="24"/>
        <progressbar indeterminate="true" style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"/>
​
        <text text="直线进度条" textColor="black" textSize="16sp" marginTop="24"/>
        <progressbar progress="30" style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"/>
​
        <text text="可调节进度条" textColor="black" textSize="16sp" marginTop="24"/>
        <seekbar progress="20"/>
​
        <horizontal gravity="center" marginTop="24">
            <text id="progress_value" textColor="black" textSize="16sp" margin="8" text="0"/>
            <progressbar id="progress" w="*" style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"/>
        </horizontal>
        <button id="download">开始下载</button>
    </vertical>
);
​
var downloadId = null;
​
ui.download.click(()=>{
    if(downloadId != null){
        stopDownload();
    }else{
        startDownload();
    }
});
​
function stopDownload(){
    ui.download.text("开始下载");
    clearInterval(downloadId);
    downloadId = null;
}
​
function startDownload(){
    if(ui.progress.getProgress() == 100){
        ui.progress.setProgress(0);
    }
    ui.download.text("停止下载");
    downloadId = setInterval(()=>{
        var p = ui.progress.getProgress();
        p++;
        if(p > 100){
            stopDownload();
            return;
        }
        ui.progress.setProgress(p);
        ui.progress_value.setText(p.toString());
    }, 200);
}

9、卡片布局

"ui";
​
ui.layout(
    <vertical>
        <appbar>
            <toolbar id="toolbar" title="卡片布局"/>
        </appbar>
    
        <card w="*" h="70" margin="10 5" cardCornerRadius="2dp"
            cardElevation="1dp" gravity="center_vertical">
            <vertical padding="18 8" h="auto">
                <text text="写操作系统作业" textColor="#222222" textSize="16sp"/>
                <text text="明天第1～2节" textColor="#999999" textSize="14sp"/>
            </vertical>
            <View bg="#f44336" h="*" w="10"/>
        </card>
    
        <card w="*" h="70" margin="10 5" cardCornerRadius="2dp"
            cardElevation="1dp" gravity="center_vertical">
            <vertical padding="18 8" h="auto">
                <text text="修复ui模式的Bug" textColor="#222222" textSize="16sp"/>
                <text text="无限期" textColor="#999999" textSize="14sp"/>
            </vertical>
            <View bg="#ff5722" h="*" w="10"/>
        </card>
    
        <card w="*" h="70" margin="10 5" cardCornerRadius="2dp"
            cardElevation="1dp" gravity="center_vertical">
            <vertical padding="18 8" h="auto">
                <text text="发布Auto.js 5.0.0正式版" textColor="#222222" textSize="16sp"/>
                <text text="2019年1月" textColor="#999999" textSize="14sp"/>
            </vertical>
            <View bg="#4caf50" h="*" w="10"/>
        </card>
    
        <card w="*" h="70" margin="10 5" cardCornerRadius="2dp"
            cardElevation="1dp" gravity="center_vertical">
    
            <vertical padding="18 8" h="auto">
                <text text="完成毕业设计和论文" textColor="#222222" textSize="16sp"/>
                <text text="2019年4月" textColor="#999999" textSize="14sp"/>
            </vertical>
    
            <View bg="#2196f3" h="*" w="10"/>
    
        </card>
    
    </vertical>
);

10、列表控件（一）

11、列表控件（二）

12、列表控件（三）

"ui";
​
ui.layout(
    <frame>
        <list id="list">
            <vertical>
                <text id="name" textSize="16sp" textColor="#000000" text="姓名: {{name}}"/>
                <text id="age" textSize="16sp" textColor="#000000" text="年龄: {{age}}岁"/>
                <button id="deleteItem" text="删除"/>
            </vertical>
        </list>
    </frame>
);
​
var items = [
    {name: "小明", age: 18}, {name: "小红", age: 30},
    {name: "小东", age: 19}, {name: "小强", age: 31},
    {name: "小满", age: 20}, {name: "小一", age: 32},
    {name: "小和", age: 21}, {name: "小二", age: 1},
    {name: "小贤", age: 22}, {name: "小三", age: 2},
    {name: "小伟", age: 23}, {name: "小四", age: 3},
    {name: "小黄", age: 24}, {name: "小五", age: 4},
    {name: "小健", age: 25}, {name: "小六", age: 5},
    {name: "小啦", age: 26}, {name: "小七", age: 6},
    {name: "小哈", age: 27}, {name: "小八", age: 7},
    {name: "小啊", age: 28}, {name: "小九", age: 8},
    {name: "小啪", age: 29}, {name: "小十", age: 9}
];
​
ui.list.setDataSource(items);
​
ui.list.on("item_click", function(item, i, itemView, listView){
    toast("被点击的人名字为: " + item.name + "，年龄为: " + item.age);
});
​
ui.list.on("item_bind", function(itemView, itemHolder){
    itemView.deleteItem.on("click", function(){
        let item = itemHolder.item;
        toast("被删除的人名字为: " + item.name + "，年龄为: " + item.age);
        items.splice(itemHolder.position, 1);
    });
})

13、时间日期选择控件

"ui";
​
ui.layout(
    <scroll>
        <vertical padding="16">
            <text text="日历样式日期选择" textColor="black" textSize="16sp" marginTop="16"/>
            <datepicker />
​
            <text text="滑动日期选择" textColor="black" textSize="16sp" marginTop="16"/>
            <datepicker datePickerMode="spinner"/>
​
            <text text="时钟样式时间选择" textColor="black" textSize="16sp" marginTop="16"/>
            <timepicker />
​
            <text text="滑动时间选择" textColor="black" textSize="16sp" marginTop="16"/>
            <timepicker timePickerMode="spinner"/>
​
        </vertical>
    </scroll>
)

14、输入框控件

"ui";
​
ui.layout(
    <vertical padding="16">
         <text text="输入框" textColor="black" textSize="16sp" marginTop="16"/>
         <input />
​
         <!-- hint属性用来设置输入框的提示-->
         <text text="带提示的输入框" textColor="black" textSize="16sp" marginTop="16"/>
         <input hint="请输入一些内容"/>
​
         <!-- inputType属性用来设置输入类型，包括number, email, phone等-->
         <text text="数字输入框" textColor="black" textSize="16sp" marginTop="16"/>
         <input inputType="number" text="123"/>
​
         <!-- password属性用来设置输入框是否是密码输入框 -->
         <text text="密码输入框" textColor="black" textSize="16sp" marginTop="16"/>
         <input password="true"/>
​
         <!-- lines属性用来设置输入框的行数 -->
         <text text="多行输入框" textColor="black" textSize="16sp" marginTop="16"/>
         <input lines="3"/>
​
         <text text="设置输入框错误信息" textColor="black" textSize="16sp" marginTop="16"/>
         <input id="qq" inputType="number" hint="请输入您的QQ号码"/>
         <button id="ok" text="确定" w="auto" style="Widget.AppCompat.Button.Colored"/>
    </vertical>
);
​
ui.ok.click(()=>{
    var text = ui.qq.text();
    if(text.length == 0){
        ui.qq.setError("输入不能为空");
        return;
    }
    var qq = parseInt(text);
    if(qq < 10000){
        ui.qq.setError("QQ号码格式错误");
        return;
    }
    ui.qq.setError(null);
});
​

15、图片控件（一）

"ui";
​
ui.layout(
<scroll>
    <vertical bg="#707070" padding="16">
        <text text="网络图片" textColor="black" textSize="16sp" marginTop="16"/>
        <img src="http://www.autojs.org/assets/uploads/profile/3-profileavatar.png"
            w="100" h="100"/>
​
        <text text="带边框的图片" textColor="black" textSize="16sp" marginTop="16"/>
        <img src="http://www.autojs.org/assets/uploads/profile/1-profileavatar.jpeg"
                w="100" h="100" borderWidth="2dp" borderColor="#202020"/>
​
        <text text="圆形图片" textColor="black" textSize="16sp" marginTop="16"/>
        <img src="http://www.autojs.org/assets/uploads/profile/1-profileavatar.jpeg"
                w="100" h="100" circle="true"/>
​
        <text text="带边框的圆形图片" textColor="black" textSize="16sp" marginTop="16"/>
        <img src="http://www.autojs.org/assets/uploads/profile/1-profileavatar.jpeg"
                w="100" h="100" circle="true" borderWidth="2dp" borderColor="#202020"/>
​
        <text text="圆角图片" textColor="black" textSize="16sp" marginTop="16"/>
        <img id="rounded_img" src="http://www.autojs.org/assets/uploads/profile/1-profileavatar.jpeg"
                w="100" h="100" radius="20dp" scaleType="fitXY"/>
        <button id="change_img" text="更改图片"/>
    </vertical>
</scroll>
);
​
ui.change_img.on("click", ()=>{
    ui.rounded_img.setSource("http://www.autojs.org/assets/uploads/profile/1-profilecover.jpeg");
});

16、文本控件

"ui";
​
ui.layout(
    <vertical padding="16">
        <text textSize="40sp">大字</text>
        <text textSize="12sp">小字</text>
        <text textStyle="bold" textColor="black">加粗</text>
        <text textStyle="italic">斜体</text>
        <text textColor="#00ff00">原谅色</text>
        <text margin="8">Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导及开发。尚未有统一中文名称，中国大陆地区较多人使用“安卓”或“安致”。Android操作系统最初由Andy Rubin开发，主要支持手机。2005年8月由Google收购注资。2007年11月，Google与84家硬件制造商、软件开发商及电信营运商组建开放手机联盟共同研发改良Android系统。</text>
        <text maxLines="1" ellipsize="end" margin="8">Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导及开发。尚未有统一中文名称，中国大陆地区较多人使用“安卓”或“安致”。Android操作系统最初由Andy Rubin开发，主要支持手机。2005年8月由Google收购注资。2007年11月，Google与84家硬件制造商、软件开发商及电信营运商组建开放手机联盟共同研发改良Android系统。</text>
        <text maxLines="2" ellipsize="end" margin="8">Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导及开发。尚未有统一中文名称，中国大陆地区较多人使用“安卓”或“安致”。Android操作系统最初由Andy Rubin开发，主要支持手机。2005年8月由Google收购注资。2007年11月，Google与84家硬件制造商、软件开发商及电信营运商组建开放手机联盟共同研发改良Android系统。</text>
        <text w="*" gravity="center" textSize="20sp">居中</text>
        <text autoLink="all">自动超链接网址www.baidu.com, 邮箱 123@qq.com等</text>
    </vertical>
);

17、下拉菜单

"ui";
​
ui.layout(
    <vertical padding="16">
        <horizontal>
            <text textSize="16sp">下拉菜单</text>
            <spinner id="sp1" entries="选项1|选项2|选项3"/>
        </horizontal>
        <horizontal>
            <text textSize="16sp">对话框菜单</text>
            <spinner id="sp2" entries="选项4|选项5|选项6" spinnerMode="dialog"/>
        </horizontal>
        <button id="ok">确定</button>
        <button id="select3">选择选项3</button>
    </vertical>
);
​
ui.ok.on("click", ()=>{
    var i = ui.sp1.getSelectedItemPosition();
    var j = ui.sp2.getSelectedItemPosition();
    toast("您的选择是选项" + (i + 1) + "和选项" + (j + 4));
});
​
ui.select3.on("click", ()=>{
    ui.sp1.setSelection(2);
});

18、自定义控件—布局模板

"ui";
​
var InputLayout = (function() {
    //继承至ui.Widget
    util.extend(InputLayout, ui.Widget);
​
    function InputLayout() {
        ui.Widget.call(this);
        this.defineAttr("hint", (view, attr, value, defineSetter)=>{
            view._hint.setText(value);
        });
        this.defineAttr("text", (view, attr, value, defineSetter)=>{
             view._input.setText(value);
         });
    }
    InputLayout.prototype.render = function() {
        return (
            <vertical>
                <text id="_hint" textSize="16sp" margin="4" textColor="gray"/>
                <input id="_input" margin="0 16"/>
            </vertical>
        );
    }
    InputLayout.prototype.getInput = function() {
        return this.view._input.getText();
    };
    ui.registerWidget("input-layout", InputLayout);
    return InputLayout;
})();
​
ui.layout(
    <vertical>
        <input-layout id="name" hint="请输入名字"/>
        <input-layout id="age" hint="请输入年龄" text="18"/>
        <button id="ok" text="确认"/>
    </vertical>
);
​
ui.ok.on("click", function(){
    toast("名字是：" + ui.name.widget.getInput() + ", 年龄是：" + ui.age.widget.getInput());
});

19、自定义控件—带颜色按钮

"ui";
​
var ColoredButton = (function() {
    //继承ui.Widget
    util.extend(ColoredButton, ui.Widget);
​
    function ColoredButton() {
        //调用父类构造函数
        ui.Widget.call(this);
        //自定义属性color，定义按钮颜色
        this.defineAttr("color", (view, name, defaultGetter) => {
            return this._color;
        }, (view, name, value, defaultSetter) => {
            this._color = value;
            view.attr("backgroundTint", value);
        });
        //自定义属性onClick，定义被点击时执行的代码
        this.defineAttr("onClick", (view, name, defaultGetter) => {
            return this._onClick;
        }, (view, name, value, defaultSetter) => {
            this._onClick = value;
        });
    }
    ColoredButton.prototype.render = function() {
        return (
            <button textSize="16sp" style="Widget.AppCompat.Button.Colored" w="auto"/>
        );
    }
    ColoredButton.prototype.onViewCreated = function(view) {
        view.on("click", () => {
            if (this._onClick) {
                eval(this._onClick);
            }
        });
    }
    ui.registerWidget("colored-button", ColoredButton);
    return ColoredButton;
})();
​
ui.layout(
    <vertical>
        <colored-button text="第一个按钮" color="#ff5722"/>
        <colored-button text="第二个按钮" onClick="hello()"/>
    </vertical>
);
​
function hello() {
    alert("Hello ~");
​
}
​

20、自定义控件—配置勾选框

"ui";
​
//这个自定义控件是一个勾选框checkbox，能够保存自己的勾选状态，在脚本重新启动时能恢复状态
var PrefCheckBox = (function() {
    //继承至ui.Widget
    util.extend(PrefCheckBox, ui.Widget);
​
    function PrefCheckBox() {
        //调用父类构造函数
        ui.Widget.call(this);
        //自定义属性key，定义在配置中保存时的key
        this.defineAttr("key");
    }
    PrefCheckBox.prototype.render = function() {
        return (
            <checkbox />
        );
    }
    PrefCheckBox.prototype.onFinishInflation = function(view) {
        view.setChecked(PrefCheckBox.getPref().get(this.getKey(), false));
        view.on("check", (checked) => {
            PrefCheckBox.getPref().put(this.getKey(), checked);
        });
    }
    PrefCheckBox.prototype.getKey = function() {
        if(this.key){
            return this.key;
        }
        let id = this.view.attr("id");
        if(!id){
            throw new Error("should set a id or key to the checkbox");
        }
        return id.replace("@+id/", "");
    }
    PrefCheckBox.setPref = function(pref) {
        PrefCheckBox._pref = pref;
    }
    PrefCheckBox.getPref = function(){
        if(!PrefCheckBox._pref){
            PrefCheckBox._pref = storages.create("pref");
        }
        return PrefCheckBox._pref;
    }
    ui.registerWidget("pref-checkbox", PrefCheckBox);
    return PrefCheckBox;
})();
​
ui.layout(
    <vertical>
        <pref-checkbox id="perf1" text="配置1"/>
        <pref-checkbox id="perf2" text="配置2"/>
        <button id="btn" text="获取配置"/>
    </vertical>
);
​
ui.btn.on("click", function(){
    toast("配置1为" + PrefCheckBox.getPref().get("perf1"));
    toast("配置2为" + PrefCheckBox.getPref().get("perf2"));
});
​

21、自定义控件—模块

"ui";
​
var PrefCheckBox = require('./XXX.js');
​
ui.layout(
    <vertical>
        <pref-checkbox id="perf1" text="配置1"/>
        <pref-checkbox id="perf2" text="配置2"/>
        <button id="btn" text="获取配置"/>
    </vertical>
);
​
ui.btn.on("click", function(){
    toast("配置1为" + PrefCheckBox.getPref().get("perf1"));
    toast("配置2为" + PrefCheckBox.getPref().get("perf2"));
});

– 脚本对接UI界面

1、准备UI界面和脚本

2、通过开始运行按钮启动脚本

3、设置UI页头和UI页面

3.1、补充：设置页头的颜色

ui.statusBarColor("#ff0000");

4、设置无障碍开启关闭按钮

{/**
* 无障碍服务卡片
**/}
<card w="*" h="40" margin="10" cardCornerRadius="2dp"
cardElevation="1dp" gravity="center_vertical">
​
    <Switch id="autoService" text="无障碍服务" checked="{{auto.service != null}}" padding="18 8 8 8" textSize="15sp"/>
​
    <View bg="#4caf50" h="*" w="10"/>
    
</card>
​
//开启无障碍服务
ui.autoService.on("check", function(checked) {
    if(checked && auto.service == null) {
        app.startActivity({
            action: "android.settings.ACCESSIBILITY_SETTINGS"
        });
    }
    if(!checked && auto.service != null){
        auto.service.disableSelf();
    }
});
​
ui.emitter.on("resume", function() {
    ui.autoService.checked = auto.service != null;
});

5、设置选择脚本功能下拉框

{/*** 功能选择卡片 **/}
<card w="*" h="40" margin="10 1"    cardCornerRadius="2dp"
cardElevation="1dp" gravity="center_vertical">
    <horizontal>
    <text text="功能选择" padding="18 8 8 8" textSize="15sp" gravity="center_vertical" textColor="black"/>
{/*** 功能选项
                              **/}
<spinner id="sp1" entries="自动养号|自动顶贴|自动发帖" textColor="blue" marginLeft="20"/>
    </horizontal>
<View bg="#ff00ff" h="*" w="10"/>
    </card>
​
//获取下拉框的选中索引
ui.sp1.getSelectedItemPosition()

6、按钮的排列和样式设置

<vertical>
    <button text="第一个按钮" marginLeft="10"  w="200"/>
    <button  style="Widget.AppCompat.Button.Colored" id="start" text="开始运行" marginRight="10" w="*"/>
</vertical>

7、设置UI界面中的配置项

<card w="*" h="*" margin="10 5" cardCornerRadius="2dp"
                         cardElevation="1dp">
    <scroll>
        <vertical>
​
        </vertical>
    </scroll>          
</card>

8、简单复选框的使用

<checkbox id="cb_signAll" text="全部签到"/>
​
var signAll = false;
​
//签到选择框
 ui.cb_signAll.on("check", (checked)=>{
​
     signAll = checked;
​
 });

9、UI界面中复选框如何保存选择状态

10、配置项中的输入框

<horizontal w="*" marginTop="10">
     <text layout_gravity="bottom" text="输入一:" textColor="black" textSize="16sp" marginTop="10"/>
     <input id="input1" marginLeft="10" layout_gravity="bottom" w="150" text=""/>
</horizontal>

11、如何保存输入框内的值

//创建储存对象
var storage = storages.create("demo数据");
​
storage.put("input1", ui.input1.text());
​
var input1 = storage.get("input1");
if(input1 && input1 != ""){
    ui.input1.setText(input1);
}

12、开始运行按钮检测无障碍服务

if(auto.service == null) {
     toast("请先开启无障碍服务！");
     return;
}

13、开始运行按钮启动主函数

main();

14、在脚本中使用UI界面的值（1）

15、在脚本中使用UI界面的值（2）

16、在脚本中使用UI界面的值（3）

0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧