html输入框自动布局,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"

//设置输入框样式为清除文本;

//设置输入框样式为密码;

在代码中调用

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(

{/** 设置输入框样式为密码输入框 */}

);

//关闭右侧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(

);

//获取内置资源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("输入框失去焦点");

})