Auto.js学习笔记5：autojs的UI界面基础篇1_autojs ui

申明本人使用的autojs是4.1.1版本

目录

UI定义

控件通用基础属性

w：

h：

id:

gravity:

layout_gravity:

margin:

padding:

bg:

visibility:

rotation:

marginTop:

文本控件：text

text:

textColor：

textStyle:

lines:

textSize：

maxLines：

ellipsize：

autoLink：

ems：

界面UI例子

结语

UI定义

带有ui的脚本的的最前面必须使用"ui";指定ui模式，否则脚本将不会以ui模式运行。

"ui";
ui.layout(
    <horizontal>
        <button text="第一个按钮"/>
        <button text="第二个按钮"/>
    </horizontal>
);

控件通用基础属性

w：

        View的宽度，是属性width的缩写形式。可以设置的值为*, auto和具体数值。其中*表示宽度尽量填满父布局，而auto表示宽度将根据View的内容自动调整(自适应宽度)。

h：

View的高度，是属性height的缩写形式。可以设置的值为*, auto和具体数值。其中*表示宽度尽量填满父布局，而auto表示宽度将根据View的内容自动调整(自适应宽度)。

如果不设置该属性，则不同的控件和布局有不同的默认高度，大多数为auto。

id:

View的id，用来区分一个界面下的不同控件和布局，一个界面的id在同一个界面下通常是唯一的，也就是一般不存在两个View有相同的id。id属性也是连接xml布局和JavaScript代码的桥梁，在代码中可以通过一个View的id来获取到这个View，并对他进行操作(设置点击动作、设置属性、获取属性等)。

gravity:

View的"重力"。用于决定View的内容相对于View的位置，可以设置的值为:

• left 靠左
• right 靠右
• top 靠顶部
• bottom 靠底部
• center 居中
• center_vertical 垂直居中
• center_horizontal 水平居中

layout_gravity:

View在布局中的"重力"，用于决定View本身在他的父布局的位置，可以设置的值和gravity属性相同。注意把这个属性和gravity属性区分开来。

margin:

margin为View和其他View的间距，即外边距。margin属性包括四个值:

• marginLeft 左外边距
• marginRight 右外边距
• marginTop 上外边距
• marginBottom 下外边距

padding:

View和他的自身内容的间距，也就是内边距。注意和margin属性区分开来，margin属性是View之间的间距，而padding是View和他自身内容的间距。举个例子，一个文本控件的padding也即文本控件的边缘和他的文本内容的间距，paddingLeft即文本控件的左边和他的文本内容的间距。

bg:

View的背景。其值可以是一个链接或路径指向的图片，或者RGB格式的颜色，或者其他背景。

visibility:

View的可见性，该属性可以决定View是否显示出来。其值可以为：

• gone 不可见。
• visible 可见。默认情况下View都是可见的。
• invisible 不可见，但仍然占用位置。

rotation:

View的旋转角度。通过该属性可以让这个View顺时针旋转一定的角度。例如rotation="90"可以让他顺时针旋转90度。

marginTop:

View的上外边距。如果该属性和margin属性指定的值冲突，则在后面的属性生效，前面的属性无效。

文本控件：text

文本控件用于显示文本，可以控制文本的字体大小，字体颜色，字体等。

text:

文本控件用于显示文本，可以控制文本的字体大小，字体颜色，字体等。

设置文本的内容。例如text="测试内容"。

textColor：

设置字体的颜色，可以是RGB格式的颜色(例如#ff00ff)，或者颜色名称(例如red, green等)。

示例, 红色字体：<text text="红色字体" textColor="red"/>

textStyle:

设置字体的样式，比如斜体、粗体等。可选的值为：

• bold 加粗字体
• italic 斜体
• normal 正常字体

可以用或("|")把他们组合起来，比如粗斜体为"bold|italic"。

lines:

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

textSize：

设置字体的大小，单位一般是sp。按照Material Design的规范，正文字体大小为14sp，标题字体大小为18sp，次标题为16sp。

maxLines：

设置文本控件的最大行数。

ellipsize：

设置文本的省略号位置。文本的省略号会在文本内容超出文本控件时显示。可选的值为：

• end 在文本末尾显示省略号
• marquee 跑马灯效果，文本将滚动显示
• middle 在文本中间显示省略号
• none 不显示省略号
• start 在文本开头显示省略号

autoLink：

控制是否自动找到url和电子邮件地址等链接，并转换为可点击的链接。默认值为“none”。

设置该值可以让文本中的链接、电话等变成可点击状态。

可选的值为以下的值以其通过或("|")的组合：

• all 匹配所有连接、邮件、地址、电话
• email 匹配电子邮件地址
• map 匹配地图地址
• none 不匹配 (默认)
• phone 匹配电话号码
• web 匹配URL地址

ems：

当设置该属性后,TextView显示的字符长度（单位是em）,超出的部分将不显示，或者根据ellipsize属性的设置显示省略号。

界面UI例子

"ui";
ui.layout(
    <relative w = "*" h = "*">
     <vertical w = "*" h = "auto" gravity = "center" layout_centerInParent="true">
                <text id = "textTitleHintTxt" textStyle = "bold" padding="15 10 15 10" 
                marginBottom = '5' bg = "#34b1e7" textColor = "black" textSize="26sp">欢迎使用</text>
              <text id = "textHintTxt" textStyle = "italic" marginTop = '10dp' padding="3 1 3 1" bg = "#34b1e7" textColor = "black" textSize="16sp">描述</text>
      <vertical >
 
           <input id = "countIt" digit="1234567890" singleLine = "true" hint="输入过期天次数" ></input> 
 
            <text id = "bottmHintTxt" w = "*" text = "重要提示语句：无" gravity = "center" marginBottom = "15" layout_alignParentBottom="true" textStyle = "bold" padding="0 10 15 0"  textColor = "black"/>
 
    </relative>
);

结语

学过Android原生开发的会很快适应autojs的ui界面开发，没太大难度，根据文档编写即可，后面一些控件文档并未详细描述，可以查看Auto.js学习笔记14：autojs的UI界面基础篇2

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