ui
1.在写UI界面时，必须把"ui";放在代码第一行，在它前面不能有其他代码，就算有，它前面的代码也必须是注释的
"ui";
2.Auto.js的UI界面是用xml来编写界面的，并通过ui.layout()函数指定界面的布局xml。通俗的来讲就是写UI界面时必须把所有的控件和布局全部放在下面的...内。
```
"ui";
ui.layout(
...
)
```
3.控件的表示方法通常以<...开始，以 />结束
控件一般只需要一行，格式为：
<控件名 属性1 属性2 />
{/* 例如文本控件text */}
<text id="t1" textColor="black" text="文本控件" />
中间是用来放属性的，不同的属性之间用空格隔开，当然，也可以不指定任何属性。
4.布局的表示方法通常以<...>开始，以</…>结束
布局一般需要多行，格式为：
<布局名 属性1 属性2>
</布局名>
```
// 例如垂直布局
<vertical gravity="center">
<button id="b1" checked="true" />
<text id="t1" textColor="black" text="文本控" />
</vertical>
```
中间的省略号是用来放各种控件的，每个控件占一行。
布局的属性是放在第一个布局名的后面，不同的属性之间用空格隔开。当然，也可以不指定任何属性。
5.子控件/父布局的相关概念
```
"ui";
ui.layout(
<horizontal>
<text id="t1" text="" />
<button id="b1" />
</horizontal>
)
```
如上所示，表示文本控件和按钮控件是水平布局，就这个来说，文本控件和按钮控件都是水平布局的子控件，而水平布局则是文本控件和按钮控件的父布局。
6.控件和布局的所有属性格式皆为：属性="可设置的值"
#### ###### 01
### 控件和布局共有属性及可设置值
w 即宽度 ，可以设置的值为*, auto和具体数值 默认一般为auto
*表示宽度尽量填满父布局
auto表示自适应宽度，根据View的内容自动调整
h 即高度，可以设置的值为*, auto和具体数值 默认一般为auto，同上
id 一个界面的id在同一个界面下通常是唯一的
gravity 决定View的内容相对于View的位置
可以设置的值为:
left 靠左
right 靠右
top 靠顶部
bottom 靠底部
center 居中
center_vertical 垂直居中
center_horizontal 水平居中
layout_gravity 决定View本身在他的父布局的位置 可设置的值同上
margin 决定View和其他View的间距，即外边距
可以设置的值为
marginLeft 左外边距
marginRight 右外边距
marginTop 上外边距
marginBottom 下外边距
格式有：
margin=“marginAll” 指定各个外边距都是该值
margin=“marginLeft marginTop marginRight marginBottom” 分别指定各个外边距
margin=“marginHorizontal marginVertical” 指定水平外边距和垂直外边距
padding 决定View和他的自身内容的间距，即内边距
可以设置的值为
paddingLeft 左外边距
paddingRight 右外边距
paddingTop 上外边距
paddingBottom 下外边距
格式有:
padding=“paddingAll” 指定各个内边距都是该值
padding=“paddingLeft paddingTop paddingRight paddingBottom” 分别指定各个内边距
padding=“paddingHorizontal paddingVertical” 指定水平内边距和垂直内边距。
bg View的背景。其值可以是一个链接或路径指向的图片，或者RGB格式的颜色
bg="#00ff00"
bg="file:///sdcard/1.png"
bg="?attr/selectableItemBackground" clickable="true" 设置背景为点击时出现波纹效果
alpha View的透明度，其值是一个0~1之间的小数，0表示完全透明，1表示完全不透明
visbility View的可见性，该属性可以决定View是否显示出来。
其值可以为：
gone 不可见。
visible 可见。默认情况下View都是可见的。
invisible 不可见，但仍然占用位置。
rotation View的旋转角度。通过该属性可以让这个View顺时针旋转一定的角度 默认的旋转中心为View的中心。
transformPivotX View的变换中心坐标x。用于View的旋转、放缩等变换的中心坐标。该坐标的坐标系以View的左上角为原点
transformPivotY View的变换中心坐标y。用于View的旋转、放缩等变换的中心坐标。该坐标的坐标系以View的左上角为原点
style 设置View的样式。不同控件有不同的可选的内置样式。
#### ###### 02
### 控件及其基本应用
文本控件：text
<text />
属性：
1.text 设置文本的内容。
2.textColor 设置字体的颜色，可以是
RGB格式的颜色(例如#ff00ff)
颜色名称(例如red, green等）
3.textSize 设置字体的大小
4.textStyle 设置字体的样式,可选的值为：
bold 加粗字体
italic 斜体
normal 正常字体。
可以用或("|")把他们组合起来
比如粗斜体为"bold|italic"
5.lines 设置文本控件的行数。即使文本内容没有达到设置的行数，控件也会留出相应的宽度来显示空白行；如果文本内容超出了设置的行数，则超出的部分不会显示。在xml中是不能设置多行文本的，要在代码中设置
"ui";
ui.layout(
<vertical>
<text>id="myText" lines="3"</text>
</vertical>
)；
//通过\n换行 ;
ui.myText.setText("第一行\n第二行\n第三行\n第四行")
6.typeface 设置字体。可选的值为：
normal 正常字体
sans 衬线字体
serif 非衬线字体
monospace 等宽字体
7.autoLink 控制是否自动找到url和电子邮件地址等链接，并转换为可点击的链接。默认值为“none”。可选的值为以下的值以其通过或("|")的组合：
all 匹配所有连接、邮件、地址、电话
email 匹配电子邮件地址
map 匹配地图地址
none 不匹配 (默认)
phone 匹配电话号码
web 匹配URL地址
函数：
ui.id.setText() 设置对应id的文本属性
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.id1.on("click",()=> {...}) 按钮点击响应事件(法2)
输入框控件: input
```
<input />
```
属性：
1.所有文本控件的函数和属性都适用于按钮控件
2.输入框控件另外一些主要属性如下
3.hint 输入提示。这个提示会在输入框为空的时候显示出来。
4.textColorHint 指定输入提示的字体颜色。
5.textSizeHint 指定输入提示的字体大小。
6.inputType 指定输入框可以输入的文本类型。主要的可选的值如下：
date 用于输入日期。
datetime 用于输入日期和时间。
textPassword 用于输入密码。
phone 用于输入一个电话号码。
time 用于输入时间。
8.password 指定输入框输入框是否为密码输入框。默认为false。
9.numeric 指定输入框输入框是否为数字输入框。默认为false。
函数：
ui.id.setText() 设置对应id的文本属性
ui.id.getText() 获取对应id的文本属性
图片控件: img
```
<img />
```
1.图片控件用于显示来自网络、本地或者内嵌数据的图片，并可以指定图片以圆角矩形、圆形等显示，其属性如下：
2.src 使用一个Uri指定图片的来源。可以是
图片的地址(http://…)
本地路径(file://…)
base64数据(“data:image/png;base64,…”)。
例如：src="file:///sdcard/1.png"
src="https://riyugo.com/i/2021/01/20/mfdt44.png"
3.borderColor 图片控件的边框颜色。
4.radius 图片控件的半径。
5.radiusTopLeft 图片控件的左上角圆角的半径。
6.radiusTopRight 图片控件的右上角圆角的半径。
7.radiusBottomLeft 图片控件的左下角圆角的半径。
8.radiusBottomRight 图片控件的右下角圆角的半径。
9.borderWidth 图片控件的边框宽度。
10.borderColor 图片控件的边框颜色。
11.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>)里
###### 03
#### 控件布局
垂直布局: vertical
<vertical></vertical>
水平布局: horizontal
<horizontal></horizontal>
卡片布局: card
<card></card>
滑动布局：viewpager
<viewpager />
注意项：中间多少个布局就有多少页
函数：ui.id.setTitles(["标题1", "标题2", "标题3"]) 设置滑动页面的标题
使联动：
ui.tabs.setupWithViewPager(ui.viewpager) 让滑动控件和标签栏控件联动
抽屉布局: drawer
<drawer></drawer>
注意项：中间两个布局,且一个布局的属性layout_gravity="left",如下所示
<drawer>
<vertical layout_gravity="left" bg="#00ff00" >
</vertical>
<vertical>
</vertical>
</drawer>
使联动：
ui.toolbar.setupWithDrawer(ui.drawer) 让工具栏控件和抽屉联动
帧布局：frame
<frame></frame>
帧布局为每个加入其中的控件创建一个空白的区域，每个子控件都在那一块区域。也就是说，帧布局会把控件一个个叠加在一起。先定义的控件在最底层，最后定义的控件在最上面。
顶端栏布局：appbar
<appbar></appbar>
###### 04
### 其他代码及注意点
注意点
整个UI编写过程中,有一个非常重要的原则:UI线程中除函数和公用变量外不要写任何流程性质的代码,如果要写流程,必须使用线程
threads.start(function() {
任务()
});
否则就会报以下的错误：
其他代码1
//创建选项菜单(右上角)
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("关于", "道无涯i");
break;
}
e.consumed = true;
});
activity.setSupportActionBar(ui.toolbar);
其他代码2
ui.statusBarColor("#AA0000"); 设置状态栏的颜色