今回は，
どんな画面？
動画のリストから動画の詳細ページに遷移しますが，
図1 動画選択後のページのイメージ
画面レイアウトの構築
基本的にビューを定義し，
レイアウトは大きく3つの要素
リスト1 スクロールビューの作成
my scrv = Ti.UI.createScrollView({
contentWidth:'auto',
contentHeight:'auto',
top:0,
showVerticalScrollIndicator:true,
showHorizontalScrollIndicator:false,
});
スクロールビューは縦横のビューサイズが画面を超えたときにスクロールが可能な状態にしてくれますが，
さて，
リスト2 ヘッダビューの作成
my v1 = Ti.UI.createView({
backgroundcolor:"#e0ffff",
top: 5,
width:316,
height:60,
borderradius:5,
bordercolor: "#d3d3d3",
})
ヘッダに表示する要素は，
リスト3 アイコン
var iconImage = Titanium.UI.createImageView({
image:myData.iconurl,
width:96,
height:50,
left:0,
top:5
});
var saiseiImage = Ti.UI.createImageView({
image: "avsdvdicon.png",
width: 26,
height: 26,
top: 20,
left: 35,
});
var titleLabel = Titanium.UI.createLabel({
text:myData.title,
font: {
fontSize: (myData.title.length > 48)? 10: 12,
fontWeight:'bold'
},
color: "#000080",
width:'auto',
textAlign:'left',
top:1,
left:98,
height:34
});
var ymd = myData.note.startdate.split(" ")[0];
var dateLabel = Titanium.UI.createLabel({
text: ymd,
font:
{
fontSize:10,
},
width:'auto',
textAlign:'right',
bottom:5,
right:8,
height:16
});
v1.add(iconImage);
v1.add(saiseiImage);
v1.add(titleLabel);
v1.add(dateLabel);
以上のようにそれぞれの部品を構築し，
- ※：ここでは固定値をプログラム内に書き込んでいますが，
たとえばアイコンの画像サイズを変更したらすべての部品サイズが動的に変更されるように書いておくべきでしょう。
同様にボディ部分のビューの構築です。
リスト4 ボディビューの作成
var v2 = Ti.UI.createView({
top: 70,
width:300,
height:"auto",
borderRadius:5,
});
if ( myData.note.desc != null && myData.note.desc.length > 0 )
{
var desc = Ti.UI.createLabel({
text:myData.note.desc,
top:3,
height:"auto",
color:"#576c89",
font:{fontSize:12},
shadowColor:"#999",
shadowOffset:{x:0,y:1}
});
v2.add(desc);
}
ここでのdesc
それでは最後にグラフビューの構築ですが，
