如何对齐按钮中的标题和图像？

Question

我希望我的按钮看起来像这样：

这是我当前的代码：

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

但我得到的是箭头在最左边，标题从中心稍微偏右。看起来图像占据了左边的 space。

如何正确对齐它们？

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 主题 touch-flow 动画。

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

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->assets->fonts文件夹下，如果没有fonts文件夹，就创建一个然后放文件。请参阅下图正确放置文件。

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

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

如何对齐按钮中的标题和图像？

How do I align the tittle and the image in a button?

xml

appcelerator

titanium-alloy