Autojs教程-UI界面的编写

脚本定制

请移步 软件|源码定制

前言

粉丝从2020年就开始催的UI界面教程,今天,它来了!

所谓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> 
)

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

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

教程正文

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

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的样式。不同控件有不同的可选的内置样式。

控件及其基本应用

文本控件: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

<vertical>
</vertical>

水平布局: horizontal

<horizontal>
</horizontal>

卡片布局: card

<card>
</card>

滑动布局:viewpager

<viewpage> 
</viewpage>

注意项:中间多少个布局就有多少页

函数

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>

其他代码及注意点

注意点

整个UI编写过程中,有一个非常重要的原则:UI线程中除函数和公用变量外不要写任何流程性质的代码,如果要写流程,必须使用线程

threads.start(function () {
    任务()
});

 否则就会报以下的错误:

Wrapped com.stardust.automator.GestureOnMainThreadException: 不能在主线程(UI)执行手势操作,请使用gesturesAsync, clickAsync等函数或者在子线程中执行
    at file:///android_asset/modules/__automator__.js:17:0
    at /storage/emulated/0/Autojs/.remote/.isolate/27b18e0f11b8d3732a289dee44d1b7b3/测试.js:8:0
Error: 不能在ui线程执行阻塞操作,请使用setTimeout代替
    at file:///android_asset/modules/__globals__.js:14:0
    at /storage/emulated/0/Autojs/.remote/.isolate/27b18e0f11b8d3732a289dee44d1b7b3/测试.js:8:0

其他代码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"); 设置状态栏的颜色

完整视频讲解

观看高清视频:【Auto.js教程(第十四期)-界面UI教程(全网最全最详细)-哔哩哔哩

写在结尾的话

我相信,这篇Auto.js UI界面教程应该是全网最详细最全的一份教程了吧。关于这篇教程,我把官方文档关于UI界面的重新看了一遍,提取了大部分常用的api,并加入了一些官方文档里面没有的一些东西给大家,还有一些我自己对于UI的一些理解,怕给大家讲错,对于每个知识点都反复亲身调试了下,一些自己不熟悉的就去度娘搜,等到理解了再换成自己的语言写给大家,虽然这一篇是对于你们的教学,但是在这其中,我自己也受益匪浅!当然,因为我自己本身没有专攻一些安卓界面方面的知识,所以见识还是有点受限的,人无完人,如若文中有错误的地方,敬请指出,在此谢谢了!


作 者:道无涯
来 源:道无涯博客
链 接: https://www.daowuya.love/autojs教程-ui界面的编写/
版 权 声 明:本博客所有文章除特别声明外,均采用CC BY-NC-SA 4.0许可协议。文章版权归作者所有,未经允许请勿转载!


评论

  1. xwmd
    Windows Chrome 127.0.0.0
    2 月前
    2024-8-12 17:44:22

    垂直和横向布局可以设置边框吗,还有可以设置圆角吗

    • 博主
      xwmd
      Windows Edge 127.0.0.0
      2 月前
      2024-8-17 11:26:49

      这个用卡片布局就行了

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇