如何對齊按鈕中的圖片和圖片？

Question

我希望我的按鈕看起來像這樣：

這是我當前的代碼：

<Button id="btn_login" title="SIGN IN" image="/images/signin-icon.png"></Button> 

但是我得到的是，箭頭是在最左邊，和標題略微偏離中心。看起來圖像佔據了左側的空間。

如何正確對齊它們？

Answer 1

你應該做的不是使用按鈕，而是使用常規視圖。像這樣：

<View id="btn_login"> 
    <View id="buttonWrapper"> 
     <Label id="signIn" /> 
     <ImageView id="signInImage" /> 
    </View> 
</View> 

然後在TSS：

"#btn_login": { 
    width: 200, 
    height: 50, 
    backgroundColor: "yellow", 
} 

"#buttonWrapper" :{ 
    width: Ti.UI.SIZE, 
    height: Ti.UI.SIZE, 
    layout: 'horizontal' 
} 

"#signIn": { 
    width: Ti.UI.SIZE, 
    color: "#ffffff" 
} 

"#signInImage: { 
    width: Ti.UI.SIZE, 
    height: Ti.UI.SIZE 
} 

我提出的buttonWrapper到同時兩個元件的位置，並且還允許它被居中。因爲我沒有指定left和right屬性，它會自動居中。

layout屬性將確保元素彼此相鄰，而不是彼此重疊。

寬度爲Ti.UI.SIZE將根據內容自動調整它的大小。

現在...它看起來不像你的圖像，但它會接近。從那裏玩一些字體和圖像的位置，例如它應該很好！

Answer 2

如果你不想寫很多代碼，那麼你可以使用Font Awesome long arrow right icon與按鈕標題。使用字體的原因是您可以在Android按鈕上獲取Material主題觸摸流動畫。

參見下面的例子就如何做到這一點：

INDEX.XML

<Button class="fa" title=" SIGN IN \uf178 " /> 

index.tss

".fa" : { 
    font : { fontFamily : 'fontawesome',fontSize : 19 } // you can change the font size here 
} 

下載fontawesome.ttf file here

將這個.TTF文件中的APP->資產 - >字體文件夾，如果字體文件夾不存在，則創建它，然後把該文件。請參閱下面的正確放置文件的圖像。

您的按鈕應該是這樣的（除了來源於主題文件綠色背景）：

可以在箭頭圖標的Unicode並登錄文本之間增加更多的空間。