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("输入框失去焦点");
})