TitaniumでTableView表示

2826 ワード
Titanium Titanium テキストリンク

　

1.必要な記述について
      1.tableViewRowを記述
      2.画像の配置
      3.ラベルの配置
      4.画像、ラベルをtableViewに格納

　　　　　　　　　　　　　　　　　　　　　　　　　　　　・完成したものはこちら
　　　　　　　　　　　　　　　　　　　　　　

　　 これを表示させることにします。

2.実装

　・実装した内容はこち

var win = Ti.UI.createWindow({
backgroundColor:'#fff'

});

var tableView;
var rowData = [];

var headerRow = Ti.UI.createTableViewRow();
headerRow.backgroundColor = '#576996';
headerRow.selectedBackgroundColor = '#385292';
headerRow.height =40;

var clickLabel = Titanium.UI.createLabel({
text:'Hello Facebook',
color:'#fff',
textAlign:'center',
font:{fontSize:24},
width:'auto',
height:'auto'
});

headerRow.className = 'header';
headerRow.add(clickLabel);
rowData.push(headerRow);

for (var c = 1; c < 50; c++){
    var row = Ti.UI.createTableViewRow();
    row.selectedBackgroundColor = '#fff';
    row.height = 100;
    row.className = 'datarow';

    var photo = Ti.UI.createView({
backgroundImage: 'images/user.png',
top: 20,
left: 10,
width: 50,
height: 50
});
photo.rowNum = c;
photo.addEventListener('click', function() {
        alert('Hello World');   
        });
row.add(photo);

var user = Ti.UI.createLabel({
color:'#576996',
font:{fontSize:16, fontWeight:'bold', fontFamily:'Arial'},
left:70,
top:2,
height:30,
width:200,
text:'Kanno Yuma' + c
});
user.rowNum = c;
user.addEventListener('click', function(){
        alert('OK!');
        });
row.add(user);

var comment = Ti.UI.createLabel({
color:'#222',
font:{fontSize:16,fontWeight:'normal', fontFamily:'Arial'},
left:70,
top:21,
height:50,
width:200,
text:'ckckckckckcckkckckckckckckckckckckck'
});
row.add(comment);

var calendar = Ti.UI.createView({
backgroundImage:'images/image.png',
bottom:2,
left:70,
width:32,
height:32
});
calendar.rowNum = c;
calendar.addEventListener('click', function(){
        alert('image');
        });
row.add(calendar);

var button = Ti.UI.createView({
backgroundImage:'images/droplet.png',
top:35,
right:5,
width:36,
height:34
});
button.rowNum = c;
button.addEventListener('click', function(){
        alert('NO!');
        });
row.add(button);
rowData.push(row);
}

tableView = Ti.UI.createTableView({
data: rowData
});
win.add(tableView);

　・ポイントは、for文を使用し、var rowData = [];　に２に書いた実装段階の１、２、３をpushさせることです。for文でtableViewRowを増やし、[]に格納することでtableViewに加えることができます。