如何在按钮中对齐tittle和图像？

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 theme触摸流动画。

请参阅以下有关如何执行此操作的示例：

<强> 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-＆gt; assets-＆gt; fonts文件夹中，如果不存在fonts文件夹，则创建它然后放置文件。请参阅下面正确放置文件的图像。

您的按钮应如下所示（主题文件中的绿色背景除外）：

您可以在箭头图标的unicode和SIGN IN文本之间添加更多空格。