Titanium Mobile で行の表示情報を増やしてみる。
昨日、タイトル部分の文字情報の変更をやってみたので、今回は行の中身のほうをいじってみる。
前回の感触から、行(Titanium.UI.TableViewRow) に対して、部品を追加してやればよいのだと推測。 Kitchen Sinkを探していたら、それっぽいのが見つかったので参考にしながら試してみた。
while(dbRows.isValidRow()){ // 行データを作る var row = Ti.UI.createTableViewRow({ hasChild:true, editable:true, url:'' + dbRows.fieldByName('url') + '', rowTitle:'' + dbRows.fieldByName('title') + '' , }); // 左の文字列のラベルを作って追加 row.add(Ti.UI.createLabel({ text:'' + dbRows.fieldByName('title') + '' , left:10, font:{fontSize:20,fontWeight:'bold'} })) ; // 右の文字列(薄い灰色で少し小文字。表示位置を右の方に寄せる)を作って追加 row.add(Ti.UI.createLabel({ text:'' + dbRows.fieldByName('url') + '' , color:'gray', left:100, font:{fontSize:12} })) ; // 行データの追加 tblRows.push(row); dbRows.next(); }
上記のように、TableViewRow をcreateしておいて、それに対してLabelをaddを行っている。
上記の例の場合、左にタイトル、右に補足情報としてURLを表示している。
(余談だが、iOS Simulatorでの動作の場合、フォントサイズを20、ボールドをかけると通常のタイトルと同じくらいのサイズの文字になるようだ(下図の最終行はラベルを使っていない)
ラベルの位置を注意しないと、重なって表示される。
その場合は、ラベルの幅や折り返しの指定をして表示位置が重ならないように工夫しなくてはならないようだ。