LoginSignup
1
1

More than 5 years have passed since last update.

TitaniumでTableView表示

Posted at

 

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

                            ・完成したものはこちら
                      スクリーンショット 2014-08-28 18.03.25.png

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

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 = []; に2に書いた実装段階の1、2、3をpushさせることです。for文でtableViewRowを増やし、[]に格納することでtableViewに加えることができます。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1