前回の記事が公開された直後からTitaniumには大きなバージョンアップがあったので，
Titanium Moble 1.
前回までの記事は Titanium Mobile 1.
また，
ツイートを綺麗に表示しよう
さて前置きはこのぐらいで本題に入りましょう。前回は自分のツイートが一欄できるところまで実装しましたが，
では早速次のようにコードを変更してみましょう。前回作ったupdateTimeLine関数を変更していきます。まずは，
function updateTimeline (timeline) {
var currentData = [];
for (var i=0;i<timeline.length;i++) {
var tweet = timeline[i];
//ここから変更開始
var row = Ti.UI.createTableViewRow(
{
height: 150,
layout: 'absolute'
}
);
var imageView = Ti.UI.createImageView(
{
image: tweet.user.profile_image_url,
width: 48,
height: 48,
top: 5,
left: 5
}
);
row.add(imageView);
var nameLabel = Ti.UI.createLabel(
{
width: 120,
height: 12,
left: 58,
top: 5,
fontSize: 6,
fontWeight: 'bold',
color: '#2b4771'
}
);
nameLabel.text = tweet.user.screen_name;
row.add(nameLabel);
var commentLabel = Ti.UI.createLabel(
{
width: 257,
left: 58,
top: 18,
height: 100,
fontSize: 8
}
);
commentLabel.text = tweet.text;
row.add(commentLabel);
var dateLabel = Ti.UI.createLabel(
{
width: 200,
height: 12,
left: 58,
bottom: 8,
fontSize: 6
}
);
dateLabel.text = tweet.created_at;
row.add(dateLabel);
//変更終わり
currentData.push(row);
}
tableView.setData(currentData);
}
一度Titaniumの開発環境から起動してみると次のような表示になるはずです。
まだ不恰好ですが一応Twitterのタイムラインらしくなってきました。ではこのレイアウトの機能について一つ一つ解説していきましょう。
WindowとView
画面全体を覆っている一番下の部分のことをTitaniumでは
そのviewのレイアウトですが，
var nameLabel = Ti.UI.createLabel(
{
width: 120,
height: 12,
left: 58,
top: 5,
fontSize: 6,
fontWeight: 'bold',
color: '#2b4771'
}
);
widthやhightでそのviewの大きさを，
