Appcelerator帶有圖像的鈦UI文本框

Question

我是鈦開發的初學者。我需要幫助來設計一個帶有文本框的應用程序，其中包含圖像圖標，如下圖所示。我沒有使用應用程序設計器。請幫我enter image description here

由於提前

Answer 1

創建一個共同的輸入控制器

通用/ 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();