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>
 
);
------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片