auto.js之界面ui_auto.js ui

前言： 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>
 
);