2012/02/16

[Titanium Mobile] 顯示向上對齊的文字

Titanium.UI.Label 沒有向上對齊(類似 vertical-align)的屬性,如果將 height 設定成 auto 可以達到自動向上對齊的效果,但會失去截字的效果,並且高度變成無法控制。


因此如果需要固定高度、向上對齊的文字,最簡便的方式是使用 Titanium.UI.TextArea (記得要將 editable 設定成 false 避免使用者點擊時叫出鍵盤輸入)。

用 Label, TextFiled, TextArea 顯示固定高度、向上對齊的文字
程式碼如下:
Titanium.UI.setBackgroundColor('#000');
var win = Titanium.UI.createWindow({backgroundColor: 'white'});

var label = Titanium.UI.createLabel({
 text: 'this is label', backgroundColor: '#09f',
 width: 280, height: 80, left: 20, top: 40, font: {fontSize:20}
});
win.add(label);
var textfield = Titanium.UI.createTextField({
 value: 'this is textfield', backgroundColor: '#09f',
 width: 280, height: 80, left: 20, top: 130,
 font: {fontSize:20}, editable: false
});
win.add(textfield);
var textarea = Titanium.UI.createTextArea({
 value: 'this is textarea', backgroundColor: '#09f',
 width: 280, height: 80, left: 20, top: 220,
 font: {fontSize:20}, editable: false
});
win.add(textarea);

win.open();