如何在一行中按寬度均勻分佈組件？

Question

我正在使用Appcelerator Titanium並想製作Android應用程序。我創建了一個4行的TableView。我想將3個標籤放入每一行，我希望我的標籤均勻分佈。 （第一個標籤必須在左側，第二個在中心，第三個在該行的右側） 謝謝。

Answer 1

試試這段代碼。

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

最好的運氣..

Answer 2

左，中，右，你可以使用相對定位和文本對齊方式非常簡單地讓你的行。無論當前屏幕有多寬（即，這適用於平板電腦，手機，電視等），此方法都可以正常工作。

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 3

這是我最近如何解決這個問題。每行內有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); 

}