Auto.Js自定义控件input-layout文档

demo实例

一些布局中参数

padding 在输入框控件中下方横杠会导致文本内容不会垂直居中,这时就需要用padding设置文本内容与控件间距,例 padding="10 5"文本内容与控件左右间距10dp,上下间距5dp

drawablePadding 设置drawable图标与文本内容间距例drawablePadding="5"

imeOptions="actionSend" singleLine="true" 设置输入框为单行,键盘回车键显示完成按钮,可以响应输入法完成按钮点击事件

style 输入框样式

模块中提供有两种输入框样式,clear和password,可直接调用;

clear 在用户输入有效内容时输入框右侧显示清除图标,用户点击图标,清除输入框内容;

view.widget.cleayStyle = 清除图标资源ID改变图标预设值
view.widget.cleayStyleTint=清除图标颜色改变颜色预设值

password 在输入框右边显示一个小眼睛图标,用户点击该图标后,切换输入框文本样式为明文或密文;

明文

密文

view.widget.passwordStyleTint=[明文颜色,密文颜色]改变颜色预设值;
view.widget.passwordStyle=[明文图标资源ID,密文图标资源ID]改变图标预设值

调用方式

在布局中调用

style="clear" 或 style="password"

 //设置输入框样式为清除文本;
 <input-layout h="auto" padding="10 5" style="clear" /> 
 //设置输入框样式为密码;
 <input-layout h="auto" padding="10 5" style="password" />

在代码中调用

view.attr("style",name)

name {可选参数 clear password null}
在代码中设置动态设置输入框样式null为取消输入框样式

//设置输入框样式为 清除文本
ui.input.attr("style","clear");
//设置输入框样式为 密码
ui.input.attr("style","password");
//取消输入框样式
ui.input.attr("style",null);

view.setStyle(name)

name {可选参数 clear password null}

//设置输入框样式为 清除文本
ui.input.setStyle("clear");
//设置输入框样式为 密码
ui.input.setStyle("password");
//取消输入框样式
ui.input.setStyle(null);

动态创建shape

view.setShape(roundRadius, shape, fillColor, [stroke])

roundRadius {圆角半径}
shape {形状} 可选参数 0{矩形} 1 {圆形}2 {一条线}3 {环形}
fillColor {背景颜色} null为透明
stroke {描边} 数组[ width strokeColor strokeWidth strokeSpa]
- width {描边宽度}
- strokeColor {笔画颜色}
- strokeWidth {笔画长度}
- strokeSpa {笔画间距}
  动态创建Shape形状,fillColor为null则绘制透明背景
  描边参数最少需要width和strokeColor两个参数

//白色背景
ui.input.setShape(0,0,"#ffffff");
//白色背景20dp圆角半径
ui.input.setShape(20,0,"#ffffff");
//白色背景圆角
ui.input.setShape(99,0,"#ffffff");

//透明背景黑色边框
ui.input.setShape(0,0,null,[3,"#000000"]);
//白色背景黑色边框
ui.input.setShape(0,0,"#ffffff",[3,"#000000"]);
//白色背景20dp圆角半径黑色边框
ui.input.setShape(20,0,"#ffffff",[3,"#000000"]);
//白色背景圆角黑色边框
ui.input.setShape(99,0,"#ffffff",[3,"#000000"]);

//透明背景黑色虚线边框
ui.input.setShape(0,0,null,[3,"#000000",30,30]);

设置右侧Drawable是否自动清理

view.setDrawableRightAutomaticClearing(Boolean)

Boolean {Boolean} 是否自动清除右侧Drawable图片，默认true
设置输入框是否自动清除右边Drawable图片, 如果为true,则输入框在失去焦点时自动清除右侧Drawable图片;如果为false,则不清除

"ui";

require('./input_layout.js');//导入模块

ui.layout(
  <frame>
    {/** 设置输入框样式为密码输入框 */}
    <input-layout id="input" h="auto" padding="10 5" style="password"/>
  </frame>
);

//关闭右侧Drawable自动清除
ui.input.setDrawableRightAutomaticClearing(false);

//创建圆角为20 白底黑色边框的矩形shape
ui.input.setShape(20,0,"#ffffff",[3,"#000000"]);

图标设置

设置左侧图标

view.setDrawableLeft(drawable,tint,size);

drawable {drawable资源ID} null为清除正在使用的图片
tint {drawable图片着色} null为不着色
size {drawable图片大小}
为输入框设置左侧Drawable图片,如果要使用内置Drawable资源,可以已使用代码view.getResourceID(name)获取资源ID;

"ui";

require('./input_layout.js');//导入模块

ui.layout(
  <frame padding="10" >
    <input-layout id="input" h="auto" padding="10 5" />
  </frame>
);

//获取内置资源ID Auto.Js Logo
var drawable = ui.input.getResourceID("icon_autojs_logo");
//设置左侧图标
ui.input.setDrawableLeft(drawable,null,22);
//创建圆角为20 白底黑色边框的矩形shape
ui.input.setShape(20,0,"#ffffff",[3,"#000000"]);

Auto.Js Logo输入框.jpg

设置右侧图标

view.setDrawableRight(drawable,tint,size)

drawable {drawable资源ID} null为清除正在使用的图片
tint {drawable图片着色} null为不着色
size {drawable图片大小}

设置左侧图标资源ID

view.attr("drawableLeft",drawable);

drawable {drawable资源ID} null为清除正在使用的图片

//获取内置资源ID Auto.Js Logo
var drawable = ui.input.getResourceID("icon_autojs_logo");
//设置左侧图标资源ID
ui.input.attr("drawableLeft",drawable);

设置右侧图标资源ID

view.attr("drawableRight",drawable);

drawable {drawable资源ID} null为清除正在使用的图片

设置左侧图标颜色

view.attr("drawableLeftTint",colorstr);

colorstr {字符串颜色} null不为图标着色

//设置设置左侧图标颜色
ui.input.attr("drawableLeftTint",null);

设置右侧图标颜色

view.attr("drawableRightTint",colorstr);

colorstr {字符串颜色} null不为图标着色

设置左侧图标大小

view.attr("drawableLeftSize",dp);

dp {图标大小}

//设置设置左侧图标大小
ui.input.attr("drawableLeftSize",22);

设置右侧图标大小

view.attr("drawableRightSize",dp);

dp {图标大小}

输入框监听事件

监听左侧图标点击事件

view.onDrawableLeftClick((view) => { })

view

//监听input输入框左侧图标点击事件
ui.input.onDrawableLeftClick((view)=>{
 toastLog("左侧图标被点击了")
})

监听右侧图标点击事件

view.onDrawableRightClick((view) => { })

监听输入框文本改变事件

view.onTextChanged((str, start, before, count) => { })

str {输入内容}
start {}
before {}
count {}

请勿在代码中使用setOnTextChangeListener,否则清除文本样式cleay无法正常工作;

//监听input输入框文本改变事件
ui.input.onTextChange((str, start, before, count) => {
  log("输入内容 = " + str);
});

监听输入框焦点改变事件

ui.input.onFocusChange((view,hasFocus)=>{})

请勿在代码中使用setOnFocusChangeListener,否则无法正常工作;

//监听input输入框焦点事件
ui.input.onFocusChange((view,hasFocus)=>{
 hasFocus?toastLog("输入框获得焦点"):toastLog("输入框失去焦点");
})