所谓UI，就是一个脚本或软件的主界面，一个界面便由一些控件和布局组成，控件有文本控件、按钮控件、输入框控件等等，而布局就是这些控件间的相对位置，控件和布局又有可选的各种属性，像大小、颜色、透明度等等，今天我们便从属性讲起，再到控件，最后再到布局，一层一层往后，让大家逐渐学会做一个界面。界面，其实并不难！

写UI界面注意点

必须把 "ui"; 放在代码第一行，在它前面不能有其他代码，

就算有，它前面的代码也必须是注释的

"ui";

Auto.js的UI界面是用xml来编写界面的，并通过ui.layout()函数指定界面的布局xml

通俗的来讲就是写UI界面时必须把所有的控件和布局全部放在下面的...内。

"ui"; 
ui.layout( 
... 
)

控件的表示方法通常以<...开始，以 />结束控件

一般只需要一行，格式为：<控件名 属性1 属性2 />

{/* 例如文本控件text */} 
<text id="t1" textColor="black" text="文本控件" />

中间是用来放属性的，不同的属性之间用空格隔开，当然，也可以不指定任何属性。

布局的表示方法通常以<...>开始，以</…>结束

布局一般需要多行，格式为：

<布局名 属性1  属性2>

...

</布局名>

// 例如垂直布局 
<vertical gravity="center">
    <button id="b1" checked="true" />
    <text id="t1" textColor="black" text="文本控" />
</vertical>

中间的省略号是用来放各种控件的，每个控件占一行。布局的属性是放在第一个布局名的后面，不同的属性之间用空格隔开。当然，也可以不指定任何属性。

子控件/父布局的相关概念

"ui"; 
ui.layout( 
    <horizontal> 
            <text id="t1" text="" /> 
            <button id="b1" /> 
    </horizontal> 
)

如上所示，表示文本控件和按钮控件是水平布局，就这个来说，文本控件和按钮控件都是水平布局的子控件，而水平布局则是文本控件和按钮控件的父布局。

控件和布局的所有属性格式皆为：属性="可设置的值"

控件和布局共有属性及可设置值

控件及其基本应用

文本控件：text

<text />

属性

text

设置文本的内容。

textColor

设置字体的颜色，可以是RGB格式的颜色(例如#ff00ff)

颜色名称(例如red, green等）

textSize

设置字体的大小

textStyle

设置字体的样式,可选的值为：

bold 加粗字体

italic 斜体

normal 正常字体。

可以用或("|")把他们组合起来

比如粗斜体为"bold|italic"

lines

设置文本控件的行数。即使文本内容没有达到设置的行数，控件也会留出相应的宽度来显示空白行；如果文本内容超出了设置的行数，则超出的部分不会显示。在xml中是不能设置多行文本的，要在代码中设置

"ui";
ui.layout(
    <vertical>
        <text>id="myText" lines="3"</text>
    </vertical>
)
//通过\n换行 ;  ui.myText.setText("第一行\n第二行\n第三行\n第四行")

 typeface

设置字体。可选的值为：

normal 正常字体

sans 衬线字体

serif 非衬线字体

monospace 等宽字体

autoLink

控制是否自动找到url和电子邮件地址等链接，并转换为可点击的链接。默认值为“none”。可选的值为以下的值以其通过或("|")的组合：

all 匹配所有连接、邮件、地址、电话

email 匹配电子邮件地址

map 匹配地图地址

none 不匹配 (默认)

phone 匹配电话号码

web 匹配URL地址

函数

setText()

ui.id.setText() 设置对应id的文本属性

getText()

ui.id.getText() 获取对应id的文本属性

按钮控件：button

<button />

属性

1.所有文本控件的函数和属性都适用于按钮控件

2.按钮控件有一些内置的样式，通过style属性设置，可选的值如下

Widget.AppCompat.Button.Colored 带颜色的按钮

Widget.AppCompat.Button.Borderless 无边框按钮

Widget.AppCompat.Button.Borderless.Colored 带颜色的无边框按钮

函数

ui.id.setText() 设置对应id的文本属性

ui.id.getText() 获取对应id的文本属性

ui.id.click(function(){...}) 按钮点击响应事件(法1)

ui.id.on("click",()=> {...}) 按钮点击响应事件(法2)

输入框控件：input

<input />

属性

1.所有文本控件的函数和属性都适用于按钮控件

2.输入框控件另外一些主要属性如下

hint

输入提示。这个提示会在输入框为空的时候显示出来。

textColorHint

指定输入提示的字体颜色。

textSizeHint

指定输入提示的字体大小。

inputType

指定输入框可以输入的文本类型。主要的可选的值如下：

date 用于输入日期。

datetime 用于输入日期和时间。

textPassword 用于输入密码。

phone 用于输入一个电话号码。

time 用于输入时间。

password

指定输入框输入框是否为密码输入框。默认为false。

numeric

指定输入框输入框是否为数字输入框。默认为false。

函数

ui.id.setText() 设置对应id的文本属性

ui.id.getText() 获取对应id的文本属性

图片控件: img

<img />

图片控件用于显示来自网络、本地或者内嵌数据的图片，并可以指定图片以圆角矩形、圆形等显示，其属性如下：

src

使用一个Uri指定图片的来源。可以是

图片的地址(http://…)

本地路径(file://…)

base64数据(“data:image/png;base64,…”)。

例如：

src="file:///sdcard/1.png"

src="https://riyugo.com/i/2021/01/20/mfdt44.png"

borderColor

图片控件的边框颜色。

radius

图片控件的半径。

radiusTopLeft

图片控件的左上角圆角的半径。

radiusTopRight

图片控件的右上角圆角的半径。

radiusBottomLeft

图片控件的左下角圆角的半径。

radiusBottomRight

图片控件的右下角圆角的半径。

borderWidth

图片控件的边框宽度。

borderColor

图片控件的边框颜色。

circle

指定该图片控件的图片是否剪切为圆形显示。可选的值为布尔值

选择框控件: checkbox

<checkbox />

属性

1.所有文本控件的函数和属性都适用于选择框控件

2.checked 返回值为布尔值

函数

ui.id.on("check", (checked)=>{...});

ui.id.isChecked() 返回控件是否选中。返回值为值为true或false

ui.id.setChecked(value) 设置控件选中。value的值为true或false

单选框控件: radio

<radio />

单选框布局: radiogroup

属性

1.所有文本控件的函数和属性都适用于选择框控件

2.checked 返回值为布尔值

函数

ui.id.on("check", (checked)=>{...});

ui.id.isChecked() 返回控件是否选中。返回值为值为true或false

ui.id.setChecked(value) 设置控件选中。value的值为true或false

开关控件：Switch

<Switch />

属性

checked返回值为布尔值

<Switch id="autoService" text="无障碍服务" checked="{{auto.service != null}}" />
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();
    }
})
// 当用户回到本界面时，resume事件会被触发 
ui.emitter.on("resume", function () {
    // 此时根据无障碍服务的开启情况，同步开关的状态     
    ui.autoService.checked = auto.service != null;
});

下拉菜单控件:spinner

<spinner />

属性

entries 选择项名字及项数 例entries="选项1|选项2|选项3"

spinnerMode 下拉菜单模式 dialog为对话框式

函数

ui.id.setSelection(index)) 设置选中项(0为第一项)

ui.id.getSelectedItemPosition() 获取选中项(0为第一项)

时间选择控件: timepicker

<timepicker />

属性

timePickerMode 选择模式

可选的为默认的时钟样式和spinner

日期选择控件: datepicker

<datepicker />

属性

datePickerMode 选择模式

可选的为默认的日期样式和spinner

标题栏控件: toolbar

<toolbar />

属性

title 标题栏名字

注意点：一般放在顶端栏布局(<appbar>...</appbar>)里

标签栏控件：tabs

<tabs />

注意点：一般放在顶端栏布局(<appbar>...</appbar>)里

控件布局

垂直布局: vertical