auto.js の基本操作を超完全に網羅しており、現在は autoX.js の制御方法となっています。2023年7月9日更新！(第2章/第4章)

02_auto.jsの基本操作 2/4

複雑なインターフェース

やることリスト

"ui";

importClass(android.graphics.Paint);

ui.layout(
    <frame>
        <vertical>
            <appbar>
                <toolbar id="toolbar" title="Todo" />
            </appbar>
            <list id="todoList">
                <card w="*" h="70" margin="10 5" cardCornerRadius="2dp"
                    cardElevation="1dp" foreground="?selectableItemBackground">
                    <horizontal gravity="center_vertical">
                        <View bg="{
    
    {this.color}}" h="*" w="10" />
                        <vertical padding="10 8" h="auto" w="0" layout_weight="1">
                            <text id="title" text="{
    
    {this.title}}" textColor="#222222" textSize="16sp" maxLines="1" />
                            <text text="{
    
    {this.summary}}" textColor="#999999" textSize="14sp" maxLines="1" />
                        </vertical>
                        <checkbox id="done" marginLeft="4" marginRight="6" checked="{
    
    {this.done}}" />
                    </horizontal>

                </card>
            </list>
        </vertical>
        <fab id="add" w="auto" h="auto" src="@drawable/ic_add_black_48dp"
            margin="16" layout_gravity="bottom|right" tint="#ffffff" />
    </frame>
);

var materialColors = ["#e91e63", "#ab47bc", "#5c6bc0", "#7e57c2", "##2196f3", "#00bcd4",
    "#26a69a", "#4caf50", "#8bc34a", "#ffeb3b", "#ffa726", "#78909c", "#8d6e63"];

var storage = storages.create("todoList");
//从storage获取todo列表
var todoList = storage.get("items", [
    {
    
    
        title: "写操作系统作业",
        summary: "明天第1～2节",
        color: "#f44336",
        done: false
    },
    {
    
    
        title: "给ui模式增加若干Bug",
        summary: "无限期",
        color: "#ff5722",
        done: false
    },
    {
    
    
        title: "发布Auto.js 5.0.0正式版",
        summary: "2019年1月",
        color: "#4caf50",
        done: false
    },
    {
    
    
        title: "完成毕业设计和论文",
        summary: "2019年4月",
        color: "#2196f3",
        done: false
    }
]);;

ui.todoList.setDataSource(todoList);

ui.todoList.on("item_bind", function (itemView, itemHolder) {
    
    
    //绑定勾选框事件
    itemView.done.on("check", function (checked) {
    
    
        let item = itemHolder.item;
        item.done = checked;
        let paint = itemView.title.paint;
        //设置或取消中划线效果
        if (checked) {
    
    
            paint.flags |= Paint.STRIKE_THRU_TEXT_FLAG;
        } else {
    
    
            paint.flags &= ~Paint.STRIKE_THRU_TEXT_FLAG;
        }
        itemView.title.invalidate();
    });
});

ui.todoList.on("item_click", function (item, i, itemView, listView) {
    
    
    itemView.done.checked = !itemView.done.checked;
});

ui.todoList.on("item_long_click", function (e, item, i, itemView, listView) {
    
    
    confirm("确定要删除" + item.title + "吗？")
        .then(ok => {
    
    
            if (ok) {
    
    
                todoList.splice(i, 1);
            }
        });
    e.consumed = true;
});

//当离开本界面时保存todoList
ui.emitter.on("pause", () => {
    
    
    storage.put("items", todoList);
});

ui.add.on("click", () => {
    
    
    dialogs.rawInput("请输入标题")
        .then(title => {
    
    
            if (!title) {
    
    
                return;
            }
            dialogs.rawInput("请输入期限", "明天")
                .then(summary => {
    
    
                    todoList.push({
    
    
                        title: title,
                        summary: summary,
                        color: materialColors[random(0, materialColors.length - 1)]
                    });
                });
        })
});

ログインインターフェース

"ui";

showLoginUI();
ui.statusBarColor("#000000")

//显示登录界面
function showLoginUI(){
    
    
    ui.layout(
      <frame>
        <vertical h="auto" align="center" margin="0 50">
          <linear>
             <text w="56" gravity="center" color="#111111" size="16">用户名</text>
             <input id="name" w="*" h="40"/>
          </linear>
          <linear>
             <text w="56" gravity="center" color="#111111" size="16">密码</text>
             <input id="password" w="*" h="40" password="true"/>
          </linear>
          <linear gravity="center">
             <button id="login" text="登录"/>
             <button id="register" text="注册"/>
          </linear>
        </vertical>
      </frame>
    );

    ui.login.on("click", () => {
    
    
       toast("您输入的用户名为" + ui.name.text() + " 密码为" + ui.password.text());
    });
    ui.register.on("click", () => showRegisterUI());
}

//显示注册界面
function showRegisterUI(){
    
    
    ui.layout(
      <frame>
        <vertical h="auto" align="center" margin="0 50">
          <linear>
             <text w="56" gravity="center" color="#111111" size="16">用户名</text>
             <input w="*" h="40"/>
          </linear>
          <linear>
             <text w="56" gravity="center" color="#111111" size="16">密码</text>
             <input w="*" h="40" password="true"/>
          </linear>
          <linear>
             <text w="56" gravity="center" color="#111111" size="16">邮箱</text>
             <input w="*" h="40" inputType="textEmailAddress"/>
          </linear>
          <linear gravity="center">
             <button>确定</button>
             <button id="cancel">取消</button>
          </linear>
        </vertical>
      </frame>
    );
    ui.cancel.on("click", () => showLoginUI());
}

インターフェーステンプレート

"ui";

var color = "#009688";

ui.layout(
    <drawer id="drawer">
        <vertical>
            <appbar>
                <toolbar id="toolbar" title="示例"/>
                <tabs id="tabs"/>
            </appbar>
            <viewpager id="viewpager">
                <frame>
                    <text text="第一页内容" textColor="black" textSize="16sp"/>
                </frame>
                <frame>
                    <text text="第二页内容" textColor="red" textSize="16sp"/>
                </frame>
                <frame>
                    <text text="第三页内容" textColor="green" textSize="16sp"/>
                </frame>
            </viewpager>
        </vertical>
        <vertical layout_gravity="left" bg="#ffffff" w="280">
            <img w="280" h="200" scaleType="fitXY" src="http://images.shejidaren.com/wp-content/uploads/2014/10/023746fki.jpg"/>
            <list id="menu">
                <horizontal bg="?selectableItemBackground" w="*">
                    <img w="50" h="50" padding="16" src="{
    
    {this.icon}}" tint="{
    
    {color}}"/>
                    <text textColor="black" textSize="15sp" text="{
    
    {this.title}}" layout_gravity="center"/>
                </horizontal>
            </list>
        </vertical>
    </drawer>
);


//创建选项菜单(右上角)
ui.emitter.on("create_options_menu", menu=>{
    
    
    menu.add("设置");
    menu.add("关于");
});
//监听选项菜单点击
ui.emitter.on("options_item_selected", (e, item)=>{
    
    
    switch(item.getTitle()){
    
    
        case "设置":
            toast("还没有设置");
            break;
        case "关于":
            alert("关于", "Auto.js界面模板 v1.0.0");
            break;
    }
    e.consumed = true;
});
activity.setSupportActionBar(ui.toolbar);

//设置滑动页面的标题
ui.viewpager.setTitles(["标签一", "标签二", "标签三"]);
//让滑动页面和标签栏联动
ui.tabs.setupWithViewPager(ui.viewpager);

//让工具栏左上角可以打开侧拉菜单
ui.toolbar.setupWithDrawer(ui.drawer);

ui.menu.setDataSource([
  {
    
    
      title: "选项一",
      icon: "@drawable/ic_android_black_48dp"
  },
  {
    
    
      title: "选项二",
      icon: "@drawable/ic_settings_black_48dp"
  },
  {
    
    
      title: "选项三",
      icon: "@drawable/ic_favorite_black_48dp"
  },
  {
    
    
      title: "退出",
      icon: "@drawable/ic_exit_to_app_black_48dp"
  }
]);

ui.menu.on("item_click", item => {
    
    
    switch(item.title){
    
    
        case "退出":
            ui.finish();
            break;
    }
})

ユーザーアンケート

"ui";

ui.layout(
    <vertical>
        <text textSize="18sp" textColor="#000000" margin="20" textStyle="bold">
            关于Auto.js的用户调查
        </text>
        <ScrollView>
            <vertical>
                <text textSize="16sp" margin="8">1. 您的年龄是?</text>
                <input text="18" inputType="number" margin="0 16"/>
                <text textSize="16sp" margin="8">2. 您用过其他类似软件(脚本精灵，按键精灵等)吗?</text>
                <radiogroup margin="0 16">
                    <radio text="没有用过"/>
                    <radio text="用过"/>
                    <radio text="用过，感觉不好用"/>
                    <radio text="没有Root权限无法使用"/>
                </radiogroup>
                <text textSize="16sp" margin="8">3. 您使用Auto.js通常用于做什么?(多选)</text>
                <checkbox text="游戏辅助" marginLeft="16"/>
                <checkbox text="点赞" marginLeft="16"/>
                <checkbox text="日常生活工作辅助" marginLeft="16"/>
                <checkbox text="练习编程" marginLeft="16"/>
                <checkbox text="自动化测试" marginLeft="16"/>
                <linear>
                    <checkbox text="其他" marginLeft="16"/>
                    <input w="*" margin="0 16"/>
                </linear>
                <text textSize="16sp" margin="8">4. 您更喜欢以下哪个图标?</text>
                <radiogroup margin="0 16">
                    <radio/>
                    <img w="100" h="100" margin="0 16" src="http://www.autojs.org/assets/uploads/profile/3-profileavatar.png"/>
                    <radio/>
                    <img w="100" h="100" margin="0 16" src="http://www.autojs.org/assets/uploads/files/1511945512596-autojs_logo.png"/>
                </radiogroup>
                <text textSize="16sp" margin="8">5. 您是什么时候开始使用Auto.js的呢?</text>
                <datepicker margin="4 16" datePickerMode="spinner"/>
                <text textSize="16sp" margin="8">6. 您用过下面这个Auto.js的论坛吗?</text>
                <webview id="webview" h="300" margin="0 16"/>
                <radiogroup marginLeft="16" marginTop="16">
                    <radio text="没有用过"/>
                    <radio text="用过"/>
                    <radio text="用过，感觉不好用"/>
                </radiogroup>
                <linear gravity="center">
                    <button margin="16">提交</button>
                    <button margin="16">放弃</button>
                </linear>
            </vertical>
        </ScrollView>
    </vertical>
)

ui.webview.loadUrl("http://www.autojs.org");

ちょっとしたテスト

"ui";

/**
 * By Da Zhang
 * 本脚本仅为娱乐，没有任何破坏性质
 */

ui.statusBarColor("#AA0000");

var Quin = 32552732;

ui.layout(
    <frame background="#AA0000">
     <vertical align="top" paddingTop="5" margin="10">
      <text id="oops" color="#FFFFFF" gravity="center" size="20">Oops, your files have been encrypted!</text>
      <text id="text" bg="#FFFFFF" gravity="left" color="#000000" size="15" marginTop="15" h="425"></text>
      <button id="payment" text="Payment" margin="20 0 0 0"/>
      <button id="decrypt" text="Decrypt"/>
     </vertical>
    </frame>
);
ui.text.text("我的手机出了什么问题？\n您的一些重要文件被我加密保存了。\n" + 
 "照片、图片、文档、压缩包、音频、视频文件、apk文件等，几乎所有类型的文件都被加密了，因此不能正常打开。\n" + 
 "这和一般文件损坏有本质上的区别。您大可在网上找找恢复文件的方法，我敢保证，没有我们的解密服务，就算老天爷来了也不能恢复这些文档。\n\n" + 
 "有没有恢复这些文档的方法?\n当然有可恢复的方法。只能通过我们的解密服务才能恢复。我以人格担保，能够提供安全有效的恢复服务。\n" + 
 "但这是收费的，也不能无限期的推迟。\n请点击 <Decrypt> 按钮，就可以免费恢复一些文档。请您放心，我是绝不会骗你的。\n" + 
 "但想要恢复全部文档，需要付款点费用。\n是否随时都可以固定金额付款，就会恢复的吗，当然不是，推迟付款时间越长，对你不利。\n" + 
 "最好3天之内付款费用，过了三天费用就会翻倍。\n还有，一个礼拜之内未付款，将会永远恢复不了。\n" + 
 "对了，忘了告诉你，对半年以上没钱付款的穷人，会有活动免费恢复，能否轮到你，就要看您的运气怎么样了。");
ui.oops.click(() => toast("Fuck you!"));
ui.oops.longClick(() => {
    
    
    var thisjoke="This is a joke : )";
    if(ui.oops.text() != thisjoke){
    
    
     ui.oops.text(thisjoke);
    }else{
    
    
     ui.oops.text("Oops, your files have been encrypted!");
    }
    return true;
});
ui.text.click(() => ui.text.append("。"));
ui.text.longClick(() => {
    
    
    ui.text.setText("\n"+ui.text.getText())
    return true;
});
ui.payment.click(() => {
    
    
 try{
    
    
  app.startActivity({
    
    
   action:"android.intent.action.VIEW",
   data:"mqqapi://card/show_pslcard?&uin=" + Quin
  });
  toast("Please payment by QQ");
 }catch(e){
    
    
  toast("Payment Error");
 }
});
ui.payment.longClick(() => {
    
    
 toast("You are silly b!");
 return true;
});
ui.decrypt.click(() => {
    
    
 toast("Decrypt Error");
 activity.finish();
});
ui.decrypt.longClick(() => {
    
    
 toast("You can't decrypt!");
 return true;
});

キャンバス

簡易版の機能イメージ

"ui";
//ui布局为一块画布
ui.layout(
    <frame>
        <canvas id="board" w="*" h="*"/>
    </frame>
);

//要绘制的函数，这里是一个一元二次函数
var f = function(x){
    
    
    return x * x + 3 * x - 4;
}

//绘制区间
var minX = -5;
var maxX = 5;
var minY = -10;

//画笔
var paint = new Paint();

ui.board.on("draw", function(canvas){
    
    
    var w = canvas.getWidth();
    var h = canvas.getHeight();
    //计算y轴区间上限
    var maxY = minY + (maxX - minX) * h / w;
    //设置画笔颜色为黑色
    paint.setColor(colors.parseColor("#000000"));
    //绘制两个坐标轴
    canvas.drawLine(w / 2, 0, w / 2, h, paint);
    canvas.drawLine(0, h / 2, w, h / 2, paint);
    //设置画笔颜色为红色
    paint.setColor(colors.parseColor("#ff0000"));
    //绘制图像
    for(var i = 0; i < w; i++){
    
    
        var x = minX + i / w * (maxX - minX);
        var y = f(x);
        var j = h - (y - minY) / (maxY - minY) * h;
        canvas.drawPoint(i, j, paint);
    }
});

ファンクショングラフィックスプレミアム

"ui";
//ui布局为一块画布和一些函数调整控件
ui.layout(
    <vertical>
        <linear>
            <input id="fx" textSize="16sp" text="x*x+3*x-4" layout_weight="1"/>
            <button id="ok" w="50dp"/>
        </linear>
        <linear>
            <button id="left" text="←" layout_weight="1"/>
            <button id="right" text="→" layout_weight="1"/>
            <button id="up" text="↓" layout_weight="1"/>
            <button id="down" text="↑" layout_weight="1"/>
            <button id="zoom_in" text="+" layout_weight="1"/>
            <button id="zoom_out" text="-" layout_weight="1"/>
        </linear>
        <canvas id="board" w="*" h="*"/>
    </vertical>
);

//函数表达式
var f = "x*x+3*x-4";
//绘制区间
var minX = -5;
var maxX = 5;
var minY;
var h = 1;
var w = 1;

//画笔
var paint = new Paint();
paint.setStrokeWidth(2);

ui.board.on("draw", function(canvas){
    
    
    w = canvas.getWidth();
    h = canvas.getHeight();
    if(minY == undefined){
    
    
        minY = -(maxX - minX) * h / w / 2;
    }
    //计算y轴区间上限
    var maxY = minY + (maxX - minX) * h / w;
    //设置画笔颜色为黑色
    paint.setColor(colors.parseColor("#000000"));
    //绘制两个坐标轴
    var x0 = parseInt(- minX / (maxX - minX) * w);
    canvas.drawLine(x0, 0, x0, h, paint);
    var y0 = parseInt(h + minY / (maxY - minY) * h);
    canvas.drawLine(0, y0, w, y0, paint);
    //设置画笔颜色为红色
    paint.setColor(colors.parseColor("#ff0000"));
    //绘制图像
    for(var i = 0; i < w; i++){
    
    
        var x = minX + i / w * (maxX - minX);
        var y = eval(f);
        var j = h - (y - minY) / (maxY - minY) * h;
        canvas.drawPoint(i, j, paint);
    }
});

ui.ok.click(()=>{
    
    
    f = String(ui.fx.text());
});

ui.left.click(()=>{
    
    
    var d = maxX - minX;
    maxX -= d / 10;
    minX -= d / 10;
});

ui.right.click(()=>{
    
    
    var d = maxX - minX;
    maxX += d / 10;
    minX += d / 10;
});

ui.up.click(()=>{
    
    
    var d = maxX - minX;
    minY += d / 8;
});

ui.down.click(()=>{
    
    
    var d = maxX - minX;
    minY -= d / 8;
});

ui.zoom_in.click(()=>{
    
    
    var d = maxX - minX;
    var a = (maxX + minX) / 2;
    maxX = a + d;
    minX = a - d;

    minY *= (maxX - minY) / d * h / w;
});

ui.zoom_out.click(()=>{
    
    
    var d = maxX - minX;
    maxX -= d / 2;
    minX += d / 2;
});

スクリプトエンジン

実行中のすべてのスクリプトを停止します

engines.stopAllAndToast();

スクリプトファイルを実行する

var scriptsPath = "/sdcard/脚本/";
if(!files.exists(scriptsPath)){
    
    
    scriptsPath = "/sdcard/Scripts/";
}
var scriptFiles = files.listDir(scriptsPath, function(name){
    
    
    return name.endsWith(".js");
});
var i = dialogs.singleChoice("请选择要运行的脚本", scriptFiles);
if(i < 0){
    
    
    exit();
}
var path = files.join(scriptsPath, scriptFiles[i]);
engines.execScriptFile(path);

記録ファイルを実行する

var scriptsPath = "/sdcard/脚本/";
if(!files.exists(scriptsPath)){
    
    
    scriptsPath = "/sdcard/Scripts/";
}
var scriptFiles = files.listDir(scriptsPath, function(name){
    
    
    return name.endsWith(".auto");
});
var i = dialogs.singleChoice("请选择要运行的脚本", scriptFiles);
if(i < 0){
    
    
    exit();
}
var path = files.join(scriptsPath, scriptFiles[i]);
engines.execAutoFile(path);

新しいスクリプトタスクを実行する

var script = "toast('Hello, Auto.js');" +
             "sleep(3000);" +
             "toast('略略略');";
var execution = engines.execScript("Hello",  script);
sleep(1000);
execution.getEngine().forceStop();

インターフェースコントロール

ボタンコントロール

"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("我被长按啦");
});

テーブル コントロール - 内蔵アイコン ビューア

"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_3d_rotation_black_48dp', 'ic_accessibility_black_48dp', 'ic_accessible_black_48dp', 'ic_account_balance_black_48dp', 'ic_account_balance_wallet_black_48dp', 'ic_account_box_black_48dp', 'ic_account_circle_black_48dp', 'ic_add_shopping_cart_black_48dp', 'ic_alarm_add_black_48dp', 'ic_alarm_black_48dp', 'ic_alarm_off_black_48dp', 'ic_alarm_on_black_48dp', 'ic_all_out_black_48dp', 'ic_android_black_48dp', 'ic_announcement_black_48dp', 'ic_aspect_ratio_black_48dp', 'ic_assessment_black_48dp', 'ic_assignment_black_48dp', 'ic_assignment_ind_black_48dp', 'ic_assignment_late_black_48dp', 'ic_assignment_returned_black_48dp', 'ic_assignment_return_black_48dp', 'ic_assignment_turned_in_black_48dp', 'ic_autorenew_black_48dp', 'ic_backup_black_48dp', 'ic_bookmark_black_48dp', 'ic_bookmark_border_black_48dp', 'ic_book_black_48dp', 'ic_bug_report_black_48dp', 'ic_build_black_48dp', 'ic_cached_black_48dp', 'ic_camera_enhance_black_48dp', 'ic_card_giftcard_black_48dp', 'ic_card_membership_black_48dp', 'ic_card_travel_black_48dp', 'ic_change_history_black_48dp', 'ic_check_circle_black_48dp', 'ic_chrome_reader_mode_black_48dp', 'ic_class_black_48dp', 'ic_code_black_48dp', 'ic_compare_arrows_black_48dp', 'ic_copyright_black_48dp', 'ic_credit_card_black_48dp', 'ic_dashboard_black_48dp', 'ic_date_range_black_48dp', 'ic_delete_black_48dp', 'ic_delete_forever_black_48dp', 'ic_description_black_48dp', 'ic_dns_black_48dp', 'ic_done_all_black_48dp', 'ic_done_black_48dp', 'ic_donut_large_black_48dp', 'ic_donut_small_black_48dp', 'ic_eject_black_48dp', 'ic_euro_symbol_black_48dp', 'ic_event_black_48dp', 'ic_event_seat_black_48dp', 'ic_exit_to_app_black_48dp', 'ic_explore_black_48dp', 'ic_extension_black_48dp', 'ic_face_black_48dp', 'ic_favorite_black_48dp', 'ic_favorite_border_black_48dp', 'ic_feedback_black_48dp', 'ic_find_in_page_black_48dp', 'ic_find_replace_black_48dp', 'ic_fingerprint_black_48dp', 'ic_flight_land_black_48dp', 'ic_flight_takeoff_black_48dp', 'ic_flip_to_back_black_48dp', 'ic_flip_to_front_black_48dp', 'ic_gavel_black_48dp', 'ic_get_app_black_48dp', 'ic_gif_black_48dp', 'ic_grade_black_48dp', 'ic_group_work_black_48dp', 'ic_g_translate_black_48dp', 'ic_help_black_48dp', 'ic_help_outline_black_48dp', 'ic_highlight_off_black_48dp', 'ic_history_black_48dp', 'ic_home_black_48dp', 'ic_hourglass_empty_black_48dp', 'ic_hourglass_full_black_48dp', 'ic_https_black_48dp', 'ic_http_black_48dp', 'ic_important_devices_black_48dp', 'ic_info_black_48dp', 'ic_info_outline_black_48dp', 'ic_input_black_48dp', 'ic_invert_colors_black_48dp', 'ic_label_black_48dp', 'ic_label_outline_black_48dp', 'ic_language_black_48dp', 'ic_launch_black_48dp', 'ic_lightbulb_outline_black_48dp', 'ic_line_style_black_48dp', 'ic_line_weight_black_48dp', 'ic_list_black_48dp', 'ic_lock_black_48dp', 'ic_lock_open_black_48dp', 'ic_lock_outline_black_48dp', 'ic_loyalty_black_48dp', 'ic_markunread_mailbox_black_48dp', 'ic_motorcycle_black_48dp', 'ic_note_add_black_48dp', 'ic_offline_pin_black_48dp', 'ic_opacity_black_48dp', 'ic_open_in_browser_black_48dp', 'ic_open_in_new_black_48dp', 'ic_open_with_black_48dp', 'ic_pageview_black_48dp', 'ic_pan_tool_black_48dp', 'ic_payment_black_48dp', 'ic_perm_camera_mic_black_48dp', 'ic_perm_contact_calendar_black_48dp', 'ic_perm_data_setting_black_48dp', 'ic_perm_device_information_black_48dp', 'ic_perm_identity_black_48dp', 'ic_perm_media_black_48dp', 'ic_perm_phone_msg_black_48dp', 'ic_perm_scan_wifi_black_48dp', 'ic_pets_black_48dp', 'ic_picture_in_picture_alt_black_48dp', 'ic_picture_in_picture_black_48dp', 'ic_play_for_work_black_48dp', 'ic_polymer_black_48dp', 'ic_power_settings_new_black_48dp', 'ic_pregnant_woman_black_48dp', 'ic_print_black_48dp', 'ic_query_builder_black_48dp', 'ic_question_answer_black_48dp', 'ic_receipt_black_48dp', 'ic_record_voice_over_black_48dp', 'ic_redeem_black_48dp', 'ic_remove_shopping_cart_black_48dp', 'ic_reorder_black_48dp', 'ic_report_problem_black_48dp', 'ic_restore_black_48dp', 'ic_restore_page_black_48dp', 'ic_room_black_48dp', 'ic_rounded_corner_black_48dp', 'ic_rowing_black_48dp', 'ic_schedule_black_48dp', 'ic_search_black_48dp', 'ic_settings_applications_black_48dp', 'ic_settings_backup_restore_black_48dp', 'ic_settings_black_48dp', 'ic_settings_bluetooth_black_48dp', 'ic_settings_brightness_black_48dp', 'ic_settings_cell_black_48dp', 'ic_settings_ethernet_black_48dp', 'ic_settings_input_antenna_black_48dp', 'ic_settings_input_component_black_48dp', 'ic_settings_input_composite_black_48dp', 'ic_settings_input_hdmi_black_48dp', 'ic_settings_input_svideo_black_48dp', 'ic_settings_overscan_black_48dp', 'ic_settings_phone_black_48dp', 'ic_settings_power_black_48dp', 'ic_settings_remote_black_48dp', 'ic_settings_voice_black_48dp', 'ic_shopping_basket_black_48dp', 'ic_shopping_cart_black_48dp', 'ic_shop_black_48dp', 'ic_shop_two_black_48dp', 'ic_speaker_notes_black_48dp', 'ic_speaker_notes_off_black_48dp', 'ic_spellcheck_black_48dp', 'ic_stars_black_48dp', 'ic_store_black_48dp', 'ic_subject_black_48dp', 'ic_supervisor_account_black_48dp', 'ic_swap_horiz_black_48dp', 'ic_swap_vertical_circle_black_48dp', 'ic_swap_vert_black_48dp', 'ic_system_update_alt_black_48dp', 'ic_tab_black_48dp', 'ic_tab_unselected_black_48dp', 'ic_theaters_black_48dp', 'ic_thumbs_up_down_black_48dp', 'ic_thumb_down_black_48dp', 'ic_thumb_up_black_48dp', 'ic_timeline_black_48dp', 'ic_toc_black_48dp', 'ic_today_black_48dp', 'ic_toll_black_48dp', 'ic_touch_app_black_48dp', 'ic_track_changes_black_48dp', 'ic_translate_black_48dp', 'ic_trending_down_black_48dp', 'ic_trending_flat_black_48dp', 'ic_trending_up_black_48dp', 'ic_turned_in_black_48dp', 'ic_turned_in_not_black_48dp', 'ic_update_black_48dp', 'ic_verified_user_black_48dp', 'ic_view_agenda_black_48dp', 'ic_view_array_black_48dp', 'ic_view_carousel_black_48dp', 'ic_view_column_black_48dp', 'ic_view_day_black_48dp', 'ic_view_headline_black_48dp', 'ic_view_list_black_48dp', 'ic_view_module_black_48dp', 'ic_view_quilt_black_48dp', 'ic_view_stream_black_48dp', 'ic_view_week_black_48dp', 'ic_visibility_black_48dp', 'ic_visibility_off_black_48dp', 'ic_watch_later_black_48dp', 'ic_work_black_48dp', 'ic_youtube_searched_for_black_48dp', 'ic_zoom_in_black_48dp', 'ic_zoom_out_black_48dp', 'ic_add_alert_black_48dp', 'ic_error_black_48dp', 'ic_error_outline_black_48dp', 'ic_warning_black_48dp', 'ic_add_to_queue_black_48dp', 'ic_airplay_black_48dp', 'ic_album_black_48dp', 'ic_art_track_black_48dp', 'ic_av_timer_black_48dp', 'ic_branding_watermark_black_48dp', 'ic_call_to_action_black_48dp', 'ic_closed_caption_black_48dp', 'ic_equalizer_black_48dp', 'ic_explicit_black_48dp', 'ic_fast_forward_black_48dp', 'ic_fast_rewind_black_48dp', 'ic_featured_play_list_black_48dp', 'ic_featured_video_black_48dp', 'ic_fiber_dvr_black_48dp', 'ic_fiber_manual_record_black_48dp', 'ic_fiber_new_black_48dp', 'ic_fiber_pin_black_48dp', 'ic_fiber_smart_record_black_48dp', 'ic_forward_10_black_48dp', 'ic_forward_30_black_48dp', 'ic_forward_5_black_48dp', 'ic_games_black_48dp', 'ic_hd_black_48dp', 'ic_hearing_black_48dp', 'ic_high_quality_black_48dp', 'ic_library_add_black_48dp', 'ic_library_books_black_48dp', 'ic_library_music_black_48dp', 'ic_loop_black_48dp', 'ic_mic_black_48dp', 'ic_mic_none_black_48dp', 'ic_mic_off_black_48dp', 'ic_movie_black_48dp', 'ic_music_video_black_48dp', 'ic_new_releases_black_48dp', 'ic_note_black_48dp', 'ic_not_interested_black_48dp', 'ic_pause_black_48dp', 'ic_pause_circle_filled_black_48dp', 'ic_pause_circle_outline_black_48dp', 'ic_playlist_add_black_48dp', 'ic_playlist_add_check_black_48dp', 'ic_playlist_play_black_48dp', 'ic_play_arrow_black_48dp', 'ic_play_circle_filled_black_48dp', 'ic_play_circle_filled_white_black_48dp', 'ic_play_circle_outline_black_48dp', 'ic_queue_black_48dp', 'ic_queue_music_black_48dp', 'ic_queue_play_next_black_48dp', 'ic_radio_black_48dp', 'ic_recent_actors_black_48dp', 'ic_remove_from_queue_black_48dp', 'ic_repeat_black_48dp', 'ic_repeat_one_black_48dp', 'ic_replay_10_black_48dp', 'ic_replay_30_black_48dp', 'ic_replay_5_black_48dp', 'ic_replay_black_48dp', 'ic_shuffle_black_48dp', 'ic_skip_next_black_48dp', 'ic_skip_previous_black_48dp', 'ic_slow_motion_video_black_48dp', 'ic_snooze_black_48dp', 'ic_sort_by_alpha_black_48dp', 'ic_stop_black_48dp', 'ic_subscriptions_black_48dp', 'ic_subtitles_black_48dp', 'ic_surround_sound_black_48dp', 'ic_videocam_black_48dp', 'ic_videocam_off_black_48dp', 'ic_video_call_black_48dp', 'ic_video_label_black_48dp', 'ic_video_library_black_48dp', 'ic_volume_down_black_48dp', 'ic_volume_mute_black_48dp', 'ic_volume_off_black_48dp', 'ic_volume_up_black_48dp', 'ic_web_asset_black_48dp', 'ic_web_black_48dp', 'ic_business_black_48dp', 'ic_call_black_48dp', 'ic_call_end_black_48dp', 'ic_call_made_black_48dp', 'ic_call_merge_black_48dp', 'ic_call_missed_black_48dp', 'ic_call_missed_outgoing_black_48dp', 'ic_call_received_black_48dp', 'ic_call_split_black_48dp', 'ic_chat_black_48dp', 'ic_chat_bubble_black_48dp', 'ic_chat_bubble_outline_black_48dp', 'ic_clear_all_black_48dp', 'ic_comment_black_48dp', 'ic_contacts_black_48dp', 'ic_contact_mail_black_48dp', 'ic_contact_phone_black_48dp', 'ic_dialer_sip_black_48dp', 'ic_dialpad_black_48dp', 'ic_email_black_48dp', 'ic_forum_black_48dp', 'ic_import_contacts_black_48dp', 'ic_import_export_black_48dp', 'ic_invert_colors_off_black_48dp', 'ic_live_help_black_48dp', 'ic_location_off_black_48dp', 'ic_location_on_black_48dp', 'ic_mail_outline_black_48dp', 'ic_message_black_48dp', 'ic_no_sim_black_48dp', 'ic_phonelink_erase_black_48dp', 'ic_phonelink_lock_black_48dp', 'ic_phonelink_ring_black_48dp', 'ic_phonelink_setup_black_48dp', 'ic_phone_black_48dp', 'ic_portable_wifi_off_black_48dp', 'ic_present_to_all_black_48dp', 'ic_ring_volume_black_48dp', 'ic_rss_feed_black_48dp', 'ic_screen_share_black_48dp', 'ic_speaker_phone_black_48dp', 'ic_stay_current_landscape_black_48dp', 'ic_stay_current_portrait_black_48dp', 'ic_stay_primary_landscape_black_48dp', 'ic_stay_primary_portrait_black_48dp', 'ic_stop_screen_share_black_48dp', 'ic_swap_calls_black_48dp', 'ic_textsms_black_48dp', 'ic_voicemail_black_48dp', 'ic_vpn_key_black_48dp', 'ic_add_black_48dp', 'ic_add_box_black_48dp', 'ic_add_circle_black_48dp', 'ic_add_circle_outline_black_48dp', 'ic_archive_black_48dp', 'ic_backspace_black_48dp', 'ic_block_black_48dp', 'ic_clear_black_48dp', 'ic_content_copy_black_48dp', 'ic_content_cut_black_48dp', 'ic_content_paste_black_48dp', 'ic_create_black_48dp', 'ic_delete_sweep_black_48dp', 'ic_drafts_black_48dp', 'ic_filter_list_black_48dp', 'ic_flag_black_48dp', 'ic_font_download_black_48dp', 'ic_forward_black_48dp', 'ic_gesture_black_48dp', 'ic_inbox_black_48dp', 'ic_link_black_48dp', 'ic_low_priority_black_48dp', 'ic_mail_black_48dp', 'ic_markunread_black_48dp', 'ic_move_to_inbox_black_48dp', 'ic_next_week_black_48dp', 'ic_redo_black_48dp', 'ic_remove_black_48dp', 'ic_remove_circle_black_48dp', 'ic_remove_circle_outline_black_48dp', 'ic_reply_all_black_48dp', 'ic_reply_black_48dp', 'ic_report_black_48dp', 'ic_save_black_48dp', 'ic_select_all_black_48dp', 'ic_send_black_48dp', 'ic_sort_black_48dp', 'ic_text_format_black_48dp', 'ic_unarchive_black_48dp', 'ic_undo_black_48dp', 'ic_weekend_black_48dp', 'ic_access_alarms_black_48dp', 'ic_access_alarm_black_48dp', 'ic_access_time_black_48dp', 'ic_add_alarm_black_48dp', 'ic_airplanemode_active_black_48dp', 'ic_airplanemode_inactive_black_48dp', 'ic_battery_20_black_48dp', 'ic_battery_30_black_48dp', 'ic_battery_50_black_48dp', 'ic_battery_60_black_48dp', 'ic_battery_80_black_48dp', 'ic_battery_90_black_48dp', 'ic_battery_alert_black_48dp', 'ic_battery_charging_20_black_48dp', 'ic_battery_charging_30_black_48dp', 'ic_battery_charging_50_black_48dp', 'ic_battery_charging_60_black_48dp', 'ic_battery_charging_80_black_48dp', 'ic_battery_charging_90_black_48dp', 'ic_battery_charging_full_black_48dp', 'ic_battery_full_black_48dp', 'ic_battery_std_black_48dp', 'ic_battery_unknown_black_48dp', 'ic_bluetooth_black_48dp', 'ic_bluetooth_connected_black_48dp', 'ic_bluetooth_disabled_black_48dp', 'ic_bluetooth_searching_black_48dp', 'ic_brightness_auto_black_48dp', 'ic_brightness_high_black_48dp', 'ic_brightness_low_black_48dp', 'ic_brightness_medium_black_48dp', 'ic_data_usage_black_48dp', 'ic_developer_mode_black_48dp', 'ic_devices_black_48dp', 'ic_dvr_black_48dp', 'ic_gps_fixed_black_48dp', 'ic_gps_not_fixed_black_48dp', 'ic_gps_off_black_48dp', 'ic_graphic_eq_black_48dp', 'ic_location_disabled_black_48dp', 'ic_location_searching_black_48dp', 'ic_network_cell_black_48dp', 'ic_network_wifi_black_48dp', 'ic_nfc_black_48dp', 'ic_screen_lock_landscape_black_48dp', 'ic_screen_lock_portrait_black_48dp', 'ic_screen_lock_rotation_black_48dp', 'ic_screen_rotation_black_48dp', 'ic_sd_storage_black_48dp', 'ic_settings_system_daydream_black_48dp', 'ic_signal_cellular_0_bar_black_48dp', 'ic_signal_cellular_1_bar_black_48dp', 'ic_signal_cellular_2_bar_black_48dp', 'ic_signal_cellular_3_bar_black_48dp', 'ic_signal_cellular_4_bar_black_48dp', 'ic_signal_cellular_connected_no_internet_0_bar_black_48dp', 'ic_signal_cellular_connected_no_internet_1_bar_black_48dp', 'ic_signal_cellular_connected_no_internet_2_bar_black_48dp', 'ic_signal_cellular_connected_no_internet_3_bar_black_48dp', 'ic_signal_cellular_connected_no_internet_4_bar_black_48dp', 'ic_signal_cellular_no_sim_black_48dp', 'ic_signal_cellular_null_black_48dp', 'ic_signal_cellular_off_black_48dp', 'ic_signal_wifi_0_bar_black_48dp', 'ic_signal_wifi_1_bar_black_48dp', 'ic_signal_wifi_1_bar_lock_black_48dp', 'ic_signal_wifi_2_bar_black_48dp', 'ic_signal_wifi_2_bar_lock_black_48dp', 'ic_signal_wifi_3_bar_black_48dp', 'ic_signal_wifi_3_bar_lock_black_48dp', 'ic_signal_wifi_4_bar_black_48dp', 'ic_signal_wifi_4_bar_lock_black_48dp', 'ic_signal_wifi_off_black_48dp', 'ic_storage_black_48dp', 'ic_usb_black_48dp', 'ic_wallpaper_black_48dp', 'ic_widgets_black_48dp', 'ic_wifi_lock_black_48dp', 'ic_wifi_tethering_black_48dp', 'ic_attach_file_black_48dp', 'ic_attach_money_black_48dp', 'ic_border_all_black_48dp', 'ic_border_bottom_black_48dp', 'ic_border_clear_black_48dp', 'ic_border_color_black_48dp', 'ic_border_horizontal_black_48dp', 'ic_border_inner_black_48dp', 'ic_border_left_black_48dp', 'ic_border_outer_black_48dp', 'ic_border_right_black_48dp', 'ic_border_style_black_48dp', 'ic_border_top_black_48dp', 'ic_border_vertical_black_48dp', 'ic_bubble_chart_black_48dp', 'ic_drag_handle_black_48dp', 'ic_format_align_center_black_48dp', 'ic_format_align_justify_black_48dp', 'ic_format_align_left_black_48dp', 'ic_format_align_right_black_48dp', 'ic_format_bold_black_48dp', 'ic_format_clear_black_48dp', 'ic_format_color_fill_black_48dp', 'ic_format_color_reset_black_48dp', 'ic_format_color_text_black_48dp', 'ic_format_indent_decrease_black_48dp', 'ic_format_indent_increase_black_48dp', 'ic_format_italic_black_48dp', 'ic_format_line_spacing_black_48dp', 'ic_format_list_bulleted_black_48dp', 'ic_format_list_numbered_black_48dp', 'ic_format_paint_black_48dp', 'ic_format_quote_black_48dp', 'ic_format_shapes_black_48dp', 'ic_format_size_black_48dp', 'ic_format_strikethrough_black_48dp', 'ic_format_textdirection_l_to_r_black_48dp', 'ic_format_textdirection_r_to_l_black_48dp', 'ic_format_underlined_black_48dp', 'ic_functions_black_48dp', 'ic_highlight_black_48dp', 'ic_insert_chart_black_48dp', 'ic_insert_comment_black_48dp', 'ic_insert_drive_file_black_48dp', 'ic_insert_emoticon_black_48dp', 'ic_insert_invitation_black_48dp', 'ic_insert_link_black_48dp', 'ic_insert_photo_black_48dp', 'ic_linear_scale_black_48dp', 'ic_merge_type_black_48dp', 'ic_mode_comment_black_48dp', 'ic_mode_edit_black_48dp', 'ic_monetization_on_black_48dp', 'ic_money_off_black_48dp', 'ic_multiline_chart_black_48dp', 'ic_pie_chart_black_48dp', 'ic_pie_chart_outlined_black_48dp', 'ic_publish_black_48dp', 'ic_short_text_black_48dp', 'ic_show_chart_black_48dp', 'ic_space_bar_black_48dp', 'ic_strikethrough_s_black_48dp', 'ic_text_fields_black_48dp', 'ic_title_black_48dp', 'ic_vertical_align_bottom_black_48dp', 'ic_vertical_align_center_black_48dp', 'ic_vertical_align_top_black_48dp', 'ic_wrap_text_black_48dp', 'ic_attachment_black_48dp', 'ic_cloud_black_48dp', 'ic_cloud_circle_black_48dp', 'ic_cloud_done_black_48dp', 'ic_cloud_download_black_48dp', 'ic_cloud_off_black_48dp', 'ic_cloud_queue_black_48dp', 'ic_cloud_upload_black_48dp', 'ic_create_new_folder_black_48dp', 'ic_file_download_black_48dp', 'ic_file_upload_black_48dp', 'ic_folder_black_48dp', 'ic_folder_open_black_48dp', 'ic_folder_shared_black_48dp', 'ic_cast_black_48dp', 'ic_cast_connected_black_48dp', 'ic_computer_black_48dp', 'ic_desktop_mac_black_48dp', 'ic_desktop_windows_black_48dp', 'ic_developer_board_black_48dp', 'ic_devices_other_black_48dp', 'ic_device_hub_black_48dp', 'ic_dock_black_48dp', 'ic_gamepad_black_48dp', 'ic_headset_black_48dp', 'ic_headset_mic_black_48dp', 'ic_keyboard_arrow_down_black_48dp', 'ic_keyboard_arrow_left_black_48dp', 'ic_keyboard_arrow_right_black_48dp', 'ic_keyboard_arrow_up_black_48dp', 'ic_keyboard_backspace_black_48dp', 'ic_keyboard_black_48dp', 'ic_keyboard_capslock_black_48dp', 'ic_keyboard_hide_black_48dp', 'ic_keyboard_return_black_48dp', 'ic_keyboard_tab_black_48dp', 'ic_keyboard_voice_black_48dp', 'ic_laptop_black_48dp', 'ic_laptop_chromebook_black_48dp', 'ic_laptop_mac_black_48dp', 'ic_laptop_windows_black_48dp', 'ic_memory_black_48dp', 'ic_mouse_black_48dp', 'ic_phonelink_black_48dp', 'ic_phonelink_off_black_48dp', 'ic_phone_android_black_48dp', 'ic_phone_iphone_black_48dp', 'ic_power_input_black_48dp', 'ic_router_black_48dp', 'ic_scanner_black_48dp', 'ic_security_black_48dp', 'ic_sim_card_black_48dp', 'ic_smartphone_black_48dp', 'ic_speaker_black_48dp', 'ic_speaker_group_black_48dp', 'ic_tablet_android_black_48dp', 'ic_tablet_black_48dp', 'ic_tablet_mac_black_48dp', 'ic_toys_black_48dp', 'ic_tv_black_48dp', 'ic_videogame_asset_black_48dp', 'ic_watch_black_48dp', 'ic_add_a_photo_black_48dp', 'ic_add_to_photos_black_48dp', 'ic_adjust_black_48dp', 'ic_assistant_black_48dp', 'ic_assistant_photo_black_48dp', 'ic_audiotrack_black_48dp', 'ic_blur_circular_black_48dp', 'ic_blur_linear_black_48dp', 'ic_blur_off_black_48dp', 'ic_blur_on_black_48dp', 'ic_brightness_1_black_48dp', 'ic_brightness_2_black_48dp', 'ic_brightness_3_black_48dp', 'ic_brightness_4_black_48dp', 'ic_brightness_5_black_48dp', 'ic_brightness_6_black_48dp', 'ic_brightness_7_black_48dp', 'ic_broken_image_black_48dp', 'ic_brush_black_48dp', 'ic_burst_mode_black_48dp', 'ic_camera_alt_black_48dp', 'ic_camera_black_48dp', 'ic_camera_front_black_48dp', 'ic_camera_rear_black_48dp', 'ic_camera_roll_black_48dp', 'ic_center_focus_strong_black_48dp', 'ic_center_focus_weak_black_48dp', 'ic_collections_black_48dp', 'ic_collections_bookmark_black_48dp', 'ic_colorize_black_48dp', 'ic_color_lens_black_48dp', 'ic_compare_black_48dp', 'ic_control_point_black_48dp', 'ic_control_point_duplicate_black_48dp', 'ic_crop_16_9_black_48dp', 'ic_crop_3_2_black_48dp', 'ic_crop_5_4_black_48dp', 'ic_crop_7_5_black_48dp', 'ic_crop_black_48dp', 'ic_crop_din_black_48dp', 'ic_crop_free_black_48dp', 'ic_crop_landscape_black_48dp', 'ic_crop_original_black_48dp', 'ic_crop_portrait_black_48dp', 'ic_crop_rotate_black_48dp', 'ic_crop_square_black_48dp', 'ic_dehaze_black_48dp', 'ic_details_black_48dp', 'ic_edit_black_48dp', 'ic_exposure_black_48dp', 'ic_exposure_neg_1_black_48dp', 'ic_exposure_neg_2_black_48dp', 'ic_exposure_plus_1_black_48dp', 'ic_exposure_plus_2_black_48dp', 'ic_exposure_zero_black_48dp', 'ic_filter_1_black_48dp', 'ic_filter_2_black_48dp', 'ic_filter_3_black_48dp', 'ic_filter_4_black_48dp', 'ic_filter_5_black_48dp', 'ic_filter_6_black_48dp', 'ic_filter_7_black_48dp', 'ic_filter_8_black_48dp', 'ic_filter_9_black_48dp', 'ic_filter_9_plus_black_48dp', 'ic_filter_black_48dp', 'ic_filter_b_and_w_black_48dp', 'ic_filter_center_focus_black_48dp', 'ic_filter_drama_black_48dp', 'ic_filter_frames_black_48dp', 'ic_filter_hdr_black_48dp', 'ic_filter_none_black_48dp', 'ic_filter_tilt_shift_black_48dp', 'ic_filter_vintage_black_48dp', 'ic_flare_black_48dp', 'ic_flash_auto_black_48dp', 'ic_flash_off_black_48dp', 'ic_flash_on_black_48dp', 'ic_flip_black_48dp', 'ic_gradient_black_48dp', 'ic_grain_black_48dp', 'ic_grid_off_black_48dp', 'ic_grid_on_black_48dp', 'ic_hdr_off_black_48dp', 'ic_hdr_on_black_48dp', 'ic_hdr_strong_black_48dp', 'ic_hdr_weak_black_48dp', 'ic_healing_black_48dp', 'ic_image_aspect_ratio_black_48dp', 'ic_image_black_48dp', 'ic_iso_black_48dp', 'ic_landscape_black_48dp', 'ic_leak_add_black_48dp', 'ic_leak_remove_black_48dp', 'ic_lens_black_48dp', 'ic_linked_camera_black_48dp', 'ic_looks_3_black_48dp', 'ic_looks_4_black_48dp', 'ic_looks_5_black_48dp', 'ic_looks_6_black_48dp', 'ic_looks_black_48dp', 'ic_looks_one_black_48dp', 'ic_looks_two_black_48dp', 'ic_loupe_black_48dp', 'ic_monochrome_photos_black_48dp', 'ic_movie_creation_black_48dp', 'ic_movie_filter_black_48dp', 'ic_music_note_black_48dp', 'ic_nature_black_48dp', 'ic_nature_people_black_48dp', 'ic_navigate_before_black_48dp', 'ic_navigate_next_black_48dp', 'ic_palette_black_48dp', 'ic_panorama_black_48dp', 'ic_panorama_fish_eye_black_48dp', 'ic_panorama_horizontal_black_48dp', 'ic_panorama_vertical_black_48dp', 'ic_panorama_wide_angle_black_48dp', 'ic_photo_album_black_48dp', 'ic_photo_black_48dp', 'ic_photo_camera_black_48dp', 'ic_photo_filter_black_48dp', 'ic_photo_library_black_48dp', 'ic_photo_size_select_actual_black_48dp', 'ic_photo_size_select_large_black_48dp', 'ic_photo_size_select_small_black_48dp', 'ic_picture_as_pdf_black_48dp', 'ic_portrait_black_48dp', 'ic_remove_red_eye_black_48dp', 'ic_rotate_90_degrees_ccw_black_48dp', 'ic_rotate_left_black_48dp', 'ic_rotate_right_black_48dp', 'ic_slideshow_black_48dp', 'ic_straighten_black_48dp', 'ic_style_black_48dp', 'ic_switch_camera_black_48dp', 'ic_switch_video_black_48dp', 'ic_tag_faces_black_48dp', 'ic_texture_black_48dp', 'ic_timelapse_black_48dp', 'ic_timer_10_black_48dp', 'ic_timer_3_black_48dp', 'ic_timer_black_48dp', 'ic_timer_off_black_48dp', 'ic_tonality_black_48dp', 'ic_transform_black_48dp', 'ic_tune_black_48dp', 'ic_view_comfy_black_48dp', 'ic_view_compact_black_48dp', 'ic_vignette_black_48dp', 'ic_wb_auto_black_48dp', 'ic_wb_cloudy_black_48dp', 'ic_wb_incandescent_black_48dp', 'ic_wb_iridescent_black_48dp', 'ic_wb_sunny_black_48dp', 'ic_add_location_black_48dp', 'ic_beenhere_black_48dp', 'ic_directions_bike_black_48dp', 'ic_directions_black_48dp', 'ic_directions_boat_black_48dp', 'ic_directions_bus_black_48dp', 'ic_directions_car_black_48dp', 'ic_directions_railway_black_48dp', 'ic_directions_run_black_48dp', 'ic_directions_subway_black_48dp', 'ic_directions_transit_black_48dp', 'ic_directions_walk_black_48dp', 'ic_edit_location_black_48dp', 'ic_ev_station_black_48dp', 'ic_flight_black_48dp', 'ic_hotel_black_48dp', 'ic_layers_black_48dp', 'ic_layers_clear_black_48dp', 'ic_local_activity_black_48dp', 'ic_local_airport_black_48dp', 'ic_local_atm_black_48dp', 'ic_local_bar_black_48dp', 'ic_local_cafe_black_48dp', 'ic_local_car_wash_black_48dp', 'ic_local_convenience_store_black_48dp', 'ic_local_dining_black_48dp', 'ic_local_drink_black_48dp', 'ic_local_florist_black_48dp', 'ic_local_gas_station_black_48dp', 'ic_local_grocery_store_black_48dp', 'ic_local_hospital_black_48dp', 'ic_local_hotel_black_48dp', 'ic_local_laundry_service_black_48dp', 'ic_local_library_black_48dp', 'ic_local_mall_black_48dp', 'ic_local_movies_black_48dp', 'ic_local_offer_black_48dp', 'ic_local_parking_black_48dp', 'ic_local_pharmacy_black_48dp', 'ic_local_phone_black_48dp', 'ic_local_pizza_black_48dp', 'ic_local_play_black_48dp', 'ic_local_post_office_black_48dp', 'ic_local_printshop_black_48dp', 'ic_local_see_black_48dp', 'ic_local_shipping_black_48dp', 'ic_local_taxi_black_48dp', 'ic_map_black_48dp', 'ic_my_location_black_48dp', 'ic_navigation_black_48dp', 'ic_near_me_black_48dp', 'ic_person_pin_black_48dp', 'ic_person_pin_circle_black_48dp', 'ic_pin_drop_black_48dp', 'ic_place_black_48dp', 'ic_rate_review_black_48dp', 'ic_restaurant_black_48dp', 'ic_restaurant_menu_black_48dp', 'ic_satellite_black_48dp', 'ic_store_mall_directory_black_48dp', 'ic_streetview_black_48dp', 'ic_subway_black_48dp', 'ic_terrain_black_48dp', 'ic_traffic_black_48dp', 'ic_train_black_48dp', 'ic_tram_black_48dp', 'ic_transfer_within_a_station_black_48dp', 'ic_zoom_out_map_black_48dp', 'ic_apps_black_48dp', 'ic_arrow_back_black_48dp', 'ic_arrow_downward_black_48dp', 'ic_arrow_drop_down_black_48dp', 'ic_arrow_drop_down_circle_black_48dp', 'ic_arrow_drop_up_black_48dp', 'ic_arrow_forward_black_48dp', 'ic_arrow_upward_black_48dp', 'ic_cancel_black_48dp', 'ic_check_black_48dp', 'ic_chevron_left_black_48dp', 'ic_chevron_right_black_48dp', 'ic_close_black_48dp', 'ic_expand_less_black_48dp', 'ic_expand_more_black_48dp', 'ic_first_page_black_48dp', 'ic_fullscreen_black_48dp', 'ic_fullscreen_exit_black_48dp', 'ic_last_page_black_48dp', 'ic_menu_black_48dp', 'ic_more_horiz_black_48dp', 'ic_more_vert_black_48dp', 'ic_refresh_black_48dp', 'ic_subdirectory_arrow_left_black_48dp', 'ic_subdirectory_arrow_right_black_48dp', 'ic_unfold_less_black_48dp', 'ic_unfold_more_black_48dp', 'ic_adb_black_48dp', 'ic_airline_seat_flat_angled_black_48dp', 'ic_airline_seat_flat_black_48dp', 'ic_airline_seat_individual_suite_black_48dp', 'ic_airline_seat_legroom_extra_black_48dp', 'ic_airline_seat_legroom_normal_black_48dp', 'ic_airline_seat_legroom_reduced_black_48dp', 'ic_airline_seat_recline_extra_black_48dp', 'ic_airline_seat_recline_normal_black_48dp', 'ic_bluetooth_audio_black_48dp', 'ic_confirmation_number_black_48dp', 'ic_disc_full_black_48dp', 'ic_do_not_disturb_alt_black_48dp', 'ic_do_not_disturb_black_48dp', 'ic_do_not_disturb_off_black_48dp', 'ic_do_not_disturb_on_black_48dp', 'ic_drive_eta_black_48dp', 'ic_enhanced_encryption_black_48dp', 'ic_event_available_black_48dp', 'ic_event_busy_black_48dp', 'ic_event_note_black_48dp', 'ic_folder_special_black_48dp', 'ic_live_tv_black_48dp', 'ic_mms_black_48dp', 'ic_more_black_48dp', 'ic_network_check_black_48dp', 'ic_network_locked_black_48dp', 'ic_no_encryption_black_48dp', 'ic_ondemand_video_black_48dp', 'ic_personal_video_black_48dp', 'ic_phone_bluetooth_speaker_black_48dp', 'ic_phone_forwarded_black_48dp', 'ic_phone_in_talk_black_48dp', 'ic_phone_locked_black_48dp', 'ic_phone_missed_black_48dp', 'ic_phone_paused_black_48dp', 'ic_power_black_48dp', 'ic_priority_high_black_48dp', 'ic_rv_hookup_black_48dp', 'ic_sd_card_black_48dp', 'ic_sim_card_alert_black_48dp', 'ic_sms_black_48dp', 'ic_sms_failed_black_48dp', 'ic_sync_black_48dp', 'ic_sync_disabled_black_48dp', 'ic_sync_problem_black_48dp', 'ic_system_update_black_48dp', 'ic_tap_and_play_black_48dp', 'ic_time_to_leave_black_48dp', 'ic_vibration_black_48dp', 'ic_voice_chat_black_48dp', 'ic_vpn_lock_black_48dp', 'ic_wc_black_48dp', 'ic_wifi_black_48dp', 'ic_ac_unit_black_48dp', 'ic_airport_shuttle_black_48dp', 'ic_all_inclusive_black_48dp', 'ic_beach_access_black_48dp', 'ic_business_center_black_48dp', 'ic_casino_black_48dp', 'ic_child_care_black_48dp', 'ic_child_friendly_black_48dp', 'ic_fitness_center_black_48dp', 'ic_free_breakfast_black_48dp', 'ic_golf_course_black_48dp', 'ic_hot_tub_black_48dp', 'ic_kitchen_black_48dp', 'ic_pool_black_48dp', 'ic_room_service_black_48dp', 'ic_smoke_free_black_48dp', 'ic_smoking_rooms_black_48dp', 'ic_spa_black_48dp', 'ic_cake_black_48dp', 'ic_domain_black_48dp', 'ic_group_add_black_48dp', 'ic_group_black_48dp', 'ic_location_city_black_48dp', 'ic_mood_bad_black_48dp', 'ic_mood_black_48dp', 'ic_notifications_active_black_48dp', 'ic_notifications_black_48dp', 'ic_notifications_none_black_48dp', 'ic_notifications_off_black_48dp', 'ic_notifications_paused_black_48dp', 'ic_pages_black_48dp', 'ic_party_mode_black_48dp', 'ic_people_black_48dp', 'ic_people_outline_black_48dp', 'ic_person_add_black_48dp', 'ic_person_black_48dp', 'ic_person_outline_black_48dp', 'ic_plus_one_black_48dp', 'ic_poll_black_48dp', 'ic_public_black_48dp', 'ic_school_black_48dp', 'ic_sentiment_dissatisfied_black_48dp', 'ic_sentiment_neutral_black_48dp', 'ic_sentiment_satisfied_black_48dp', 'ic_sentiment_very_dissatisfied_black_48dp', 'ic_sentiment_very_satisfied_black_48dp', 'ic_share_black_48dp', 'ic_whatshot_black_48dp', 'ic_star_black_48dp', 'ic_star_border_black_48dp', 'ic_star_half_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);
}

チェックボックスラジオボタンコントロール

"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("第一个框被取消勾选了");
    }
});

プログレスバーコントロール

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

カードレイアウト

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

リストコントロール

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

時刻と日付の選択コントロール

"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>
)

入力ボックスコントロール

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

ピクチャーコントロール

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

テキストコントロール

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

ドロップダウンメニュー

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

カスタム コントロール レイアウト テンプレート

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

カスタム コントロール - 色の付いたボタン

"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 ~");

}

カスタム制御モジュール構成チェックボックス

//这个自定义控件是一个勾选框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;
})();

module.exports = PrefCheckBox;

カスタム コントロール - 設定を使用するチェックボックス

"ui";

var PrefCheckBox = require('./自定义控件-模块-配置勾选框.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"));
});