带有图像的 Appcelerator Titanium UI 文本字段答案

【问题标题】：Appcelerator Titanium UI textfield with image带有图像的 Appcelerator Titanium UI 文本字段
【发布时间】：2017-10-13 20:53:33
【问题描述】：

我是钛开发的初学者。我需要帮助来设计一个带有文本字段的应用程序，其中包含如下图所示的图像图标。我没有使用应用程序设计器。请帮帮我enter image description here

提前致谢

【问题讨论】：

标签： android titanium appcelerator-titanium titanium-alloy titanium-android

【解决方案1】：

创建一个通用的输入控制器

common/input.xml

<View id="container">
    <ImageView id="icon"/>
    <TextField id="input">
</View>

common/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
}

common/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;
};

现在你可以在你想要的地方直接使用这个输入样式，例如在你的登录屏幕上

<Window>
  ..
    <Require id="email" src="common/input" type="view" />
    <Require id="password" src="common/input" type="view" />
  ..
</Window>

"#email":{
    icon: '/images/email.png',
    inputStyle: {
        hintText: 'Email Adress'
    }
}
"#password":{
    icon: '/images/password.png',
    inputStyle: {
        hintText: 'Password',
        passwordMask: true
    }
}

最后你可以得到这样的值

var emailValue = $.email.getValue();
var passwordValue = $.password.getValue();

【讨论】：