TOPページ > Tips > Titanium Mobile >

Titanium MobileでTableViewを使う

Titanium Mobileで静的な配列をListViewで表示させます。Titanium.UI.createTableViewRowメソッドで生成したオブジェクトに対して、左に画像(球団ロゴ)があり右にラベル(球団名)が配置されているRowを表示させております。

// 表示させるデータソース
var rowData = [
	{teamName:"阪神タイガース", image:"tigers.png"},
	{teamName:"読売ジャイアンツ", image:"giants.png"}
];
 
// TableViewへ渡すデータソースの生成
var dataSource =[];
for (var i=0; i<rowData.length;i++) {
 
	var imageLogo = Titanium.UI.createImageView({
		url:rowData[i].image,
		left:5,
		width:50,
		hegiht:50
		});
	var labelName = Titanium.UI.createLabel({
		color:'#000',
		text:rowData[i].teamName,
		font:{fontSize:20,fontFamily:'Helvetica Neue'},
		textAlign:'left',
		top:7,
		left:60,
		width:'auto'
		});
	var row = Ti.UI.createTableViewRow({
		className:"NomalCell",
		height:60
		});
 
	row.add(imageLogo);
	row.add(labelName);
	dataSource.push(row);
}
 
// TableViewの生成
var table =Ti.UI.createTableView({
	data:dataSource
});

iPhoneシミュレータ、Androidエミュレータにて動作を行いました。

Titanium Mobileでの動作をiPhone、Androidにて比較