Как равномерно распределить компоненты по ширине в строке?

Question

Я использую Appcelerator Titanium и хочу сделать приложение для Android. Я создал TableView с 4 строками. Я хочу поместить 3 ярлыка в каждую строку, и я хочу, чтобы мои ярлыки были равномерно распределены. (1-я метка должна быть слева, вторая в центре и третья справа от строки.) Спасибо.

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

Вот как я недавно решил эту проблему. С тремя отдельными видами и надписями внутри каждой строки. Это работало очень хорошо для меня! Все они основаны на процентах, поэтому они должны работать на всех разрешениях. Удачи!

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

}