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

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();

祝你好运..