Auto.js学习笔记15：autojs的UI界面基础篇2

常用的基础控件，主要在autojs上展示相关的操作界面。

目录

线性布局: linear

垂直布局: vertical

垂直布局: horizontal

帧布局: frame

相对布局: relative

滑动: scroll

文本控件: text

按钮控件: button

输入框控件: input

图片控件: img

勾选框控件: checkbox

选择框控件: radio  选择框布局: radiogroup

完整部分UI代码

---

申明：这里主要是介绍基础控件和其属性介绍。

没ui编写基础的可以看：Auto.js学习笔记5：autojs的UI界面基础篇1

线性布局: linear

实际上，垂直布局和水平布局都属于线性布局。线性布局有一个 orientation 的属性，用于指定布局的方向，可选的值为vertical和horizontal。

例如<linear orientation="vertical"></linear>相当于<vertical></vertical>。

线性布局的默认方向是横向的，因此，一个没有指定 orientation 属性的线性布局就是横向布局。

<linear orientation="vertical" w = "*" h = "auto" gravity = "center" >  
</linear>

垂直布局: vertical

<vertical id = "configView" w = "*" h = "auto" gravity = "center" >  
</vertical>

垂直布局: horizontal

<horizontal id = "configView" w = "*" h = "auto" gravity = "center" >  
</horizontal>

帧布局: frame

"ui";
ui.layout(
    <frame>
        <button id="ok" text="确定"/>
    </frame>
);

相对布局: relative

"ui";
ui.layout(
    <relative w = "auto" h = "auto">
    </relative>
);

滑动: scroll

<scroll>
    <relative w = "*" h = "*">
    </relative>
</scroll>

文本控件: text

<text id = "configJsonTxt" textStyle = "italic" padding="1 1 1 1" bg = "#34b1e7" textColor = "black" textSize="10sp">详细的配置信息                         
</text>

按钮控件: button

ui;

ui.layout(
    <button id = "testServerAPI" align="center">测试接口获取数据</button>
);

/*点击事件*/
ui.testServerAPI.click(()=>{
     //处理相关点击事件
});

输入框控件: input

<input id = "qunNameIt" singleLine = 'true' text="群1" hint="输入群名或用户名"></input>

图片控件: img

"ui";
ui.layout(
    <frame>
        <img src="https://www.baidu.com/img/bd_logo1.png"/>
    </frame>
);

勾选框控件: checkbox

ui;
ui.layout(
     <checkbox id="ck" text="旋转" gravity="center"></checkbox>
);

if (ui.ck.checked) {
    ...
}

选择框控件: radio  选择框布局: radiogroup

ui;
ui.layout(
    <radiogroup id = "objectRGp" orientation = "horizontal" w = "*" h = "auto">
       <radio id = "aRo"  checked = "true" text = "A" marginRight ="10"/>
       <radio id = "bRo" text = "B"/>
       <radio id = "cRo" text = "C" marginRight ="10"/>
    </radiogroup>
);

//选择状态
ui.aRo.isChecked()

完整部分UI代码

ui;

/* 定时重启设备相关动态变量 */
const restartDays = 5*(24*60*60*1000); //重启天数
var exeRestartState = false;    //允许执行重启
var exeRestartTime = "17:35";   //允许时间
var idTimeout;                  //定时器id
var send_content = "";          //过期数据和结尾语拼接的微信发送内容
var curGroNameIndex = 0;        //当前群下标

var SharedPrefersUtilsClass = {
    keyWxAutoConfig:function(){"send_info"},
    storageWxAutoConfig:function(){
        let storage = storages.create("wx_auto_send_file");
        return storage;
    },
    省略其它逻辑变量...
}

/** 微信发送配置信息 */
var wxAutoConfigObj = {
    ip              : "http://192.168.168.28:8080", //接口ip
    areaCode        : "",       //区域参数
    groupNameString : "",       //群信息集合字符串(实际配置内容)
    endHint         : "请以上县（市）部门到政务服务平台阅办", //结束语
    days            : 1,        //过期天数
    timingTime      : "9:00",   //定时发送消息时间
    curGroupName    : "",       //当前群
    restartState    : false,    //设备重启定时状态
    openState       : false,    //true才允许定时执行信息发送
};
省略其它逻辑变量...

ui.layout(
    <vertical id = "setConfigView" w = "*" h = "auto" layout_centerInParent="true" >
      <Switch id = "openSwh"  w = "auto" h = "auto" textStyle = "bold" textColor = "red" 
           text = "无障碍权限   "  textSize="16sp" marginBottom = "15"  marginRight ="10"/>
      <Switch id = "timingRestartS"  w = "auto" h = "auto"  textStyle = "bold" 
            text = "每周定时重启设备（17:30）" textSize="16sp" marginBottom = "15"  marginRight ="10"/>  
      <vertical>
          <text id = "timePickerModeText" text = "滑动时间选择:" textColor = "black" textSize="16sp" marginTop="5" />
          <timepicker id = "timePickerMode"  timePickerMode="spinner" />
      </vertical>
      <input id = "IpIt" singleLine = 'true' text="" hint="接口IP"></input>
      <text textStyle = "italic" padding="1 1 1 1" bg = "#34b1e7" 
              textColor = "black" textSize="10sp">
                  接口IP：http://192.168.168.28:8080
      </text>
      <input id = "qunNameIt" singleLine = 'true' text="政务中心" hint="输入群名或用户名"></input>
      <text textStyle = "italic" padding="1 1 1 1" bg = "#34b1e7" 
              textColor = "black" textSize="10sp">
                  例如：群名1
      </text>
      <input id = "areaCodeIt" singleLine = "true" hint="例如：自贡市" 
              text='自贡市,攀枝花市,巴中'></input>
      <text textStyle = "italic" padding="1 1 1 1" bg = "#34b1e7" 
            textColor = "black" textSize="10sp">
                多个区域例如：区域名称,区域名称
      </text>
      <input id = "countIt" digit="1234567890" singleLine = "true" text = "3"
              hint="输入过期天数" ></input>
      <text textStyle = "italic" padding="1 1 1 1" bg = "#34b1e7" 
              textColor = "black" textSize="10sp">
                 设置过期天数，必须大于0
      </text>
      <input id = "endTxt" text = ""></input>
      <text textStyle = "italic" padding="1 1 1 1" bg = "#34b1e7" 
              textColor = "black" textSize="10sp">
                 可以自定义结尾语内容
      </text>
      <radiogroup id = "objectRGp" orientation = "horizontal" w = "*" h = "auto">
              <radio id = "qunRo"  checked = "true" text = "群聊" marginRight ="10"/>
              <radio id = "userRo" text = "指定用户"/>
              <radio id = "otherRo" text = "其它" marginRight ="10"/>
      </radiogroup>
   </vertical>
);

onListen();

/** ui按钮监听设置 */
function onListen(){
    ui.timePickerMode.setIs24HourView(true);//设置当前时间控件为24小时制
    ui.timePickerMode.setHour(9);   //设置当前小时
    ui.timePickerMode.setMinute(0); //设置当前分（0-59）
    ui.timePickerMode.setOnTimeChangedListener({
    onTimeChanged: function (v, h, m) {
        //h 获取的值 为24小时格式
        wxAutoConfigObj.timingTime = h + ":" + m ;
        ui.timePickerModeText.setText("滑动时间选择: " + wxAutoConfigObj.timingTime);
        }
    });

    //定时重启按钮监听
    ui.timingRestartS.on("check", function(checked) {
        if(auto.root==null){
            alert("配置信息错误", "系统为root无法使用该功能");
            ui.timingRestartS.setChecked(false);
            return;
        }

        if(!checked||!myUtils.isEmpty(wxAutoConfigObj.areaCode)||
            !myUtils.isEmpty(wxAutoConfigObj.groupNameList)){
               // 用户勾选无障碍服务的选项时，跳转到页面让用户去开启
                wxAutoConfigObj.restartState = checked;
                if(checked){
                    idTimeout = setTimeout(function(){
                        exeRestartState = true;
                    }, restartDays);
                    alert("定时重启设备", "开启定时重启设备功能");
                }else{
                    alert("定时重启设备", "取消定时重启设备功能")
                    clearTimeout(idTimeout)
                }
                SharedPrefersUtilsClass.setWxAutoSendConfig(wxAutoConfigObj);
            }else{
                alert("配置信息错误", "请填写正确的微信自动发布配置信息！");
                ui.timingRestartS.setChecked(false);
        }
    });
    //代码较多省略...
    
}

光看不敲是没用的
看后一定要去实践
一定要去敲代码
一定要去运行试错
这样才是有意义的学习