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

我正在使用Appcelerator Titanium并想制作Android应用程序。我创建了一个4行的TableView。我想将3个标签放入每一行，我希望我的标签均匀分布。（第一个标签必须在左侧，第二个在中心，第三个在该行的右侧）谢谢。如何在一行中按宽度均匀分布组件？

来源

2012-06-25 Alex

如果可能的话，请接受这是最有利于你答案。 –

试试这段代码。

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

最好的运气..

来源

2012-06-25 13:18:42

是否有某种自动放置组件的父对象，可能是布局或类似的东西？因为如果我为smartphon设计我的应用程序，对象的位置可能是正确的，但如果我尝试在Galaxy Tab或其他具有更高分辨率的其他位置上使用此应用程序，会发生什么情况。在这种情况下，放置将是不正确的。 – Alex

是亚历克斯为你可以使用％或dp –

嗨亚历克斯..是任何回答有用你从这些3回答??如果是，那么你可以把ans标记为正确，以便其他人可以从你的que中得到参考......谢谢！ –

左，中，右，你可以使用相对定位和文本对齐方式非常简单地让你的行。无论当前屏幕有多宽（即，这适用于平板电脑，手机，电视等），此方法都可以正常工作。

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并根据它来定位行元素。但这对于方向变化将非常脆弱。

这一切都取决于你的内容。有了这些，你应该能够处理你的特定用例。

来源

2012-06-25 19:18:41

这是我最近如何解决这个问题。每行内有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);

}

来源

2012-06-26 15:33:58

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

回答

相关问题