我是钛合金开发的初学者。我需要帮助设计一个带有文本字段的应用程序,其中包含图像图标,如下图所示。我没有使用应用程序设计师。请帮助我enter image description here
先谢谢
答案 0 :(得分:3)
创建一个通用输入控制器
公共/ input.xml中
<View id="container">
<ImageView id="icon"/>
<TextField id="input">
</View>
公共/ input.tss
"#container":{
height: 50,
top: 10,
left: 15,
right: 15,
borderColor: 'blue'
}
"#icon":{
height: 30,
width: 30,
left: 10
}
"#input":{
left: 50,
right: 10
//Add your default TextField input here
}
公共/ input.js
//set controller Style
if ($.args.icon) {
$.icon.image = $.args.icon;
} else {
$.icon.visible = false;
$.input.left = 10;
}
//custom textField style send in inputStyle
if ($.args.inputStyle) {
_.extend($.input, $.args.inputStyle);
}
$.getValue = function() {
return $.input.value;
};
$.setValue = function(value) {
$.input.value = value;
};
现在,您可以根据需要直接使用此输入样式,例如登录屏幕
login.xml
<Window>
..
<Require id="email" src="common/input" type="view" />
<Require id="password" src="common/input" type="view" />
..
</Window>
login.tss
"#email":{
icon: '/images/email.png',
inputStyle: {
hintText: 'Email Adress'
}
}
"#password":{
icon: '/images/password.png',
inputStyle: {
hintText: 'Password',
passwordMask: true
}
}
最后你可以得到像这样的价值
login.js
var emailValue = $.email.getValue();
var passwordValue = $.password.getValue();