Question

我正在使用Appcelerator Titanium，想要制作Android应用程序。我创建了一个包含4行的TableView。我想在每一行中放置3个标签，我希望我的标签均匀分布。（第一个标签必须在左侧，第二个标签位于中间，第三个标签位于行的右侧。）谢谢。

Answer 1

对于左侧，中间，右侧，您可以使用相对定位和文本对齐来非常简单地创建行。无论当前屏幕有多宽（即，这适用于平板电脑，手机，电视等），此方法都能很好地工作。

var win = Ti.UI.createWindow({
    backgroundColor: '#fff'
});

var rows = [];

for (var i = 0; i < 10; i++) {
    var row = Ti.UI.createTableViewRow();
    row.add(Ti.UI.createLabel({
        text: 'Left ' + i, textAlign: 'left',
        color: '#000',
        left: 10
    }));
    row.add(Ti.UI.createLabel({
        text: 'Center ' + i, textAlign: 'center',
        color: '#000'
    }));
    row.add(Ti.UI.createLabel({
        text: 'Right ' + i, textAlign: 'right',
        color: '#000',
        right: 10
    }));
    rows.push(row);
}

win.add(Ti.UI.createTableView({
    data: rows
}));

win.open();

另一种选择是使用百分比宽度，例如left: '0%', width: '33%'，然后是left: '33%', width: '33%'等。

或者你可以说第一个标签来自left: 0, width: 200。第二个是left: 200, width: 50，第三个来自left: 250, right: 0。这会给你一个有弹性的第三个标签，因此可以占用空间。

另一个选项（我不建议你采用）是使用Ti.Platform.displayCaps.platformWidth并根据它来定位行元素。但这对于方向改变来说会非常脆弱。

这完全取决于您的内容。有了这些，您应该能够处理您的特定用例。

Answer 2

以下是我最近解决此问题的方法。每行内有3个独立的视图和标签。这对我来说非常好用！所有这些都是基于百分比，所以它应该适用于所有决议。祝你好运！

for (var i = 0; i < 4; i++) {
var row = Ti.UI.createTableViewRow({
  height: 'auto',
});
  var view1 = Ti.UI.createView({
  left : 0,
  width : "33.33%",
  backgroundColor:'red',
  height:40
  });
var label1 = Ti.UI.createLabel({
  text: 'here',
  color:"#fff",
  textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT    

});

view1.add(label1);
  var view2 = Ti.UI.createView({
  left : "33.33%",
  width : "33.33%",
  backgroundColor : "white",
  height:40 
  });
var label2 = Ti.UI.createLabel({
  text: 'there',
  color:"#fff"    
});
view2.add(label2);

var view3 = Ti.UI.createView({
  left : "66.66%",
  width : "33.33%",
  backgroundColor: "blue",
  height:40          
  });
var label3 = Ti.UI.createLabel({
  text: 'Everywhere',
  color:"#fff"        
});
view3.add(label3);

row.add(view1);
row.add(view2);
row.add(view3);

}

Answer 3

试试这段代码。

var win = Ti.UI.createWindow({

});

var table = Ti.UI.createTableView({
    backgroundColor:'blue',
    top:50,
    height : 160
});

win.add(table);

var data = [];

for (var i = 0; i < 4; i++) {

    var row = Ti.UI.createTableViewRow({
        height : 40
    });

    var label1 = Ti.UI.createLabel({
        text : 'label1',
        top : 5,
        left : 10,
        width : 80,
        height : 30
    });

    row.add(label1);

    var label2 = Ti.UI.createLabel({
        text : 'label2',
        top : 5,
        left : 130,
        width : 80,
        height : 30
    });

    row.add(label2);

    var label3 = Ti.UI.createLabel({
        text : 'label3',
        top : 0,
        left : 240,
        width : 80,
        height : 30
    });

    row.add(label3);

    data.push(row);
}

table.data = data;

win.open();

祝你好运..

如何按行宽度均匀分布组件？

3 个答案: