水平间距相等的3个标签

Question

我目前正在用Appcelerator Titanium编写应用程序。 我有三个标签，希望将它们均匀地水平放置。

这是一个例子

Label 1     |     Label 2

中间标签将始终是条形，而其他两个标签的大小将有所不同。 现在，在屏幕的右侧，我在视图中有条形图和第二个标签，在左侧有第一个标签，但是如果左侧标签很小，这看起来很糟糕。

我不能将它们全部保留在一个文本字段中，因为中间标签的样式不同。

如何正确放置这些元素，使它们在水平方向上均匀分布？

Answer 1

有两种选择，但一种快速的选择是使用StyledLabel ，就像Webview的一个非常轻巧的版本，它允许您使用HTML / CSS呈现Text，这可以让您将标签合并为一个标签，例如例：

var StyledLabel = require('ti.styledlabel');
var label = StyledLabel.createLabel({
    height: Ti.UI.SIZE || 'auto', 
    html: '<span>Label 1</span>     |     <span>Label 2</span>'
});

您可以使用自定义CSS编辑span标签以适合您的需求。

或者 ，尝试使用百分比布局并谨慎使用textAlignment属性。

var container = Ti.UI.createView({width : "100%", layout: "horizontal" });
var label1 = Ti.UI.createLabel({
    text: "Label 1",
    width : "33%",
    textAlign : Ti.UI.TEXT_ALIGNMENT_LEFT
});
var label2 = Ti.UI.createLabel({
    text: "|",
    width : "33%",
    textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER
});
var label3 = Ti.UI.createLabel({
    text: "Label 2",
    width : "33%"
    textAlign : Ti.UI.TEXT_ALIGNMENT_RIGHT
});
container.add(label1);
container.add(label2);
container.add(label3);

Answer 2

您可以使用Titanium.UI.ListItem API文档链接

将标签添加为项目，放置最小高度/宽度，并同时使用Ti.UI.SIZE作为固定大小，IT会自动设置与内容相关的元素的大小。

不要忘记为视图设置水平布局

PS：我没有测试这种方法，这只是一个快速的答案，希望它会对您有所帮助;）

干杯

Answer 3

请提及将所有三个标签都保持为“水平”的视图的layout属性。 首先，将第一个标签添加到视图中，然后添加第二个标签，其左属性的数量为'X'，然后添加第三个标签，其左属性的值为'X'。

希望它能满足您的要求。