How to evenly distribute the components by width in a Row? - components

Question

I'm using Appcelerator Titanium and want to make an Android application. I created a TableView with 4 rows. I want to put 3 labels into each row and I want my labels to be evenly distributed. (1st label must be at the left, 2nd at the center, and 3rd at the right of the row.)
Thank you.

Answer 1

For left, center, right, you can use relative positioning and text alignment to very simply make your rows. This approach works well regardless of how wide the current screen is (ie, this works on tablet, phone, TV, etc).
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();
Another option would be to use percent widths, like left: '0%', width: '33%', then left: '33%', width: '33%', etc.
Or you could say the first label is from left: 0, width: 200. The second is left: 200, width: 50, and the third is from left: 250, right: 0. That would give you a third label that is elastic so it can take up al the space.
Yet another option (that I don't recommend you take) would be to use Ti.Platform.displayCaps.platformWidth and position the row elements based on that. But that would be very fragile to orientation changes.
It all depends on your content. With these in hand, you should be able to handle your particular use case.

Answer 2

Here is how I recently solved this issue. With 3 separate views and labels inside each row. This worked very well for me! All of them are based on percents, so it should work on all resolutions. Good luck!
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

try this code.
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();
Best luck..