Question

我目前正在Appcelerator Titanium中编写应用程序。我有三个标签，我想平均水平放置。

这是一个例子

Label 1     |     Label 2

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

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

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

Answer 1

有几个选项，但一个快速的选项可能是使用StyledLabel，这就像一个非常简单的webview版本，允许你使用HTML / CSS渲染文本，这将让你巩固将您的标签分成一个标签，例如：

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 Doc link

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

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

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

干杯

Answer 3

请提及视图的布局属性，将您的所有三个标签保存为“水平＆＃39;”。首先将第一个标签添加到视图中，然后使用＆＃39; X＆＃39;添加第二个标签。左边属性的数量，然后添加第三个标签与相同的＆＃39; X＆＃39;左财产的价值。

希望它符合您的要求。

同样水平间隔3个标签

3 个答案: