2

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

这是一个例子

Label 1     |     Label 2

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

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

我怎样才能正确地布置这些元素，使它们在水平方向上均匀分布？

4

3 回答 3

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>'
});

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

或者，尝试使用百分比布局并小心使用 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);
于 2013-09-02T22:02:29.143 回答
0

请提及将所有三个标签都保存为“水平”的视图的布局属性。首先将第一个标签添加到视图，然后添加具有“X”数量的左侧属性的第二个标签，然后添加具有相同“X”值的左侧属性的第三个标签。

希望它能满足你的要求。

于 2013-09-05T06:50:08.210 回答
0

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

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

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

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

干杯

于 2013-09-02T21:54:15.603 回答