auto.js之界面ui

最新推荐文章于 2024-08-17 20:31:10 发布

xiucai_cs

最新推荐文章于 2024-08-17 20:31:10 发布

阅读量2w

点赞数 21

分类专栏： auto.js 文章标签： auto.js ui

本文链接：https://blog.csdn.net/qq_40258748/article/details/105057667

版权

auto.js 专栏收录该内容

11 篇文章 22 订阅

订阅专栏

前言： auto.js的ui可以在将代码打包的时候方便用户的操作，可以设计一个舒服的界面来执行手机脚本。

知识梳理篇：

ui的按钮shi

// 开头必须要加，否则脚本不会以ui模式运行

"ui";


// 这里是用xml来编写的界面

ui.layout(

    // vertical 表示的是垂直布局

    <vertical>

        <button text="第一个按钮"/>

        <button text="第二个按钮"/>

    </vertical>

);


// 开头必须要加，否则脚本不会以ui模式运行

"ui";


// 这里是用xml来编写的界面

ui.layout(

    // horizontal 表示的是布局

    <horizontal>

        <button text="第一个按钮"/>

        <button text="第二个按钮"/>

    </horizontal>

);

// 开头必须要加，否则脚本不会以ui模式运行

"ui";


// 这里是用xml来编写的界面

ui.layout(

    // bg可以表示界面的背景

    <vertical bg="#ff0000">

        // textSize可以表示字体的大小

        <button text="第一个按钮" textSize="20sp"/>

        <button text="第二个按钮"/>

    </vertical>

);

控件和布局都属于视图

w是width的缩写，*表示尽量填满父布局，auto表示根据View的内容自动调整

"ui";

ui.layout(

    <horizontal>

        <button w="auto" text="自适应宽度"/>

        <button w="*" text="填满父布局"/>

    </horizontal>

);

"ui";


ui.layout(

    <horizontal>

        <button w="200" text="宽度200dp"/>

        <button w="100" text="宽度100dp"/>

    </horizontal>

);

h为height的缩写，使用情形和w一样

获取简单的属性，并且调用

"ui";

ui.layout(

    <frame>

        <button id="ok" text="哇哈哈"/>

    </frame>

);

// 通过ui.ok获取到按钮的控件

toast(ui.ok.getText());

gravity表示额的是"重力"，用于决定View的内容相对View的位置（ravity="right|bottom"的View他的内容会在右下角）

可以设置为

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

"ui";


ui.layout(

    <frame>

        <button gravity="right" w="*" h="auto" text="你看我的文字是靠哪儿的"/>

    </frame>

);


"ui";

ui.layout(

    <frame w="*" h="*">

        <button layout_gravity="center" w="auto" h="auto" text="居中的按钮"/>

        <button layout_gravity="right|bottom" w="auto" h="auto" text="右下角的按钮"/>

    </frame>

);

margin方法：

margin为View和其他View的间距，他包括四个值：
marginLeft 左外边距
marginRight 右外边距
marginTop 上外边距
marginBottom 下外边距

margin="marginAll" 指定各个外边距都是该值。例如margin="10"表示左右上下边距都是10dp。

margin="marginLeft marginTop marginRight marginBottom" 分别指定各个外边距。例如margin="10 20 30 40"表示左边距为10dp, 上边距为20dp, 右边距为30dp, 下边距为40dp

margin="marginHorizontal marginVertical" 指定水平外边距和垂直外边距。例如margin="10 20"表示左右边距为10dp, 上下边距为20dp。


"ui";

ui.layout(

    <horizontal>

        <button margin="30" text="距离四周30"/>

        <button text="普通的按钮"/>

    </horizontal>

);

"ui";

ui.layout(

    <horizontal>

        <button marginLeft="50" text="我是特殊的按钮"/>

        <button text="普通的按钮"/>

    </horizontal>

);

bg表示背景：

bg="#00ff00"设置背景为绿色（RGB格式颜色），bg="file:///sdcard/1.png"设置背景为图片
alpha表示的View的透明度，foreground表示的是View的前景，minHeigh表示的是View的最小高度
visbility表示的是View的可见性，决定View是否可以显示出来。
rotation，View的旋转角度

文本控件的一些属性：

text文本控件，例如：text="一段文字"
textColor，例如：<text text="红色字体" textColor="red"/>
textSize，设置字体的大小，<text text="超大字体" textSize="40sp"/>
textStyle，可以设置字体的样式，bold 加粗字体，italic 斜体，normal 正常字体（可以使用|将他们结合）

设置文本控件的行数：

"ui";

ui.layout(

    <vertical>

        <text id="myText" line="3"/>

    </vertical>

);


// 通过\n进行换行

ui.myText.setText("第一行\n第二行\n第三行\n第四行");

按钮控件button:

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

"ui";

ui.layout(

    <vertical>

        <button style="Widget.AppCompat.Button.Colored" text="我是漂亮的按钮"/>

    </vertical>

);

输入控件：input（有下面这个例子就差不多足够了）

"ui";

ui.layout(

    <vertical padding="16">

        <text textSize="16sp" textColor="red" text="请输入使用者姓名"/>

        <input id="name"/>

        <button id="ok" text="确定"/>

    </vertical>

);


// 点击确定按钮以后要执行的动作

ui.ok.click(function(){

    // 通过getText()获取输入的内容

    var name = ui.name.getText();

    toast(name + "您好，欢迎使用本软件");

})

// hint为提示效果

"ui";

ui.layout(

    <vertical>

        <input hint="请输入您的姓名"/>

    </vertical>

);

ps：textColorHint指定输入提示的字体颜色。textSizeHint指定输入提示的字体大小。

指定输入框可以输入的文本类型。可选的值为以下值及其用"|"的组合：

date 用于输入日期。
datetime 用于输入日期和时间。
none 没有内容类型。此输入框不可编辑。
number 仅可输入数字。
numberDecimal 可以与number和它的其他选项组合，以允许输入十进制数(包括小数)。
numberPassword 仅可输入数字密码。
numberSigned 可以与number和它的其他选项组合，以允许输入有符号的数。
phone 用于输入一个电话号码。
text 只是普通文本。
textAutoComplete 可以与text和它的其他选项结合, 以指定此字段将做自己的自动完成, 并适当地与输入法交互。
textAutoCorrect 可以与text和它的其他选项结合, 以请求自动文本输入纠错。
textCapCharacters 可以与text和它的其他选项结合, 以请求大写所有字符。
textCapSentences 可以与text和它的其他选项结合, 以请求大写每个句子里面的第一个字符。
textCapWords 可以与text和它的其他选项结合, 以请求大写每个单词里面的第一个字符。
textEmailAddress 用于输入一个电子邮件地址。
textEmailSubject 用于输入电子邮件的主题。
textImeMultiLine 可以与text和它的其他选项结合，以指示虽然常规文本视图不应为多行, 但如果可以, 则IME应提供多行支持。
textLongMessage 用于输入长消息的内容。
textMultiLine 可以与text和它的其他选项结合, 以便在该字段中允许多行文本。如果未设置此标志, 则文本字段将被限制为单行。
textNoSuggestions 可以与text及它的其他选项结合, 以指示输入法不应显示任何基于字典的单词建议。
textPassword 用于输入密码。
textPersonName 用于输入人名。
textPhonetic 用于输入拼音发音的文本, 如联系人条目中的拼音名称字段。
textPostalAddress 用于输入邮寄地址。
textShortMessage 用于输入短的消息内容。
textUri 用于输入一个URI。
textVisiblePassword 用于输入可见的密码。
textWebEditText 用于输入在web表单中的文本。
textWebEmailAddress 用于在web表单里输入一个电子邮件地址。
textWebPassword 用于在web表单里输入一个密码。
time 用于输入时间。

例如：

<input inputType="number|numberDeciml"/>

输入密码的提示框例如：

<input password="true"/>

图片控件：img

可以是本地的，也可以是网络的（网络的可能会存在一些bug，这里我测试的几个网络图片，有一些使不可以用的）。

"ui";

ui.layout(

    <frame>

        <img src="file:///sdcard/黑软/美图保存/1.png"/>

    </frame>

);

控件高度（可以控制控件的高度，详情可以看auto.js的文档）

"ui";

ui.layout(

    <vertical h="100dp" weightSum="5">

        <text layout_weight="1" text="控件1" bg="#ff0000"/>

        <text layout_weight="2" text="控件2" bg="#00ff00"/>

        <text layout_weight="1" text="控件3" bg="#0000ff"/>

    </vertical>

);