Titanium MobileでTableViewの見た目を変えてみる。
TableViewの見た目をちょいとかっこいい感じにしてみたい、と思ったのでちょいと調べてみた。
ざっとリファレンスを調べてみたけどわからなかったので、Kitchen Sinkにそういったものがないか、調べてみたらあったのでそれを参考に、backgroundImageに画像を指定してみる。
(下の例だと、二項演算子を使って行ごとに表示を分けている)
var tblRows = []; var rowIdx = 0; while(dbRows.isValidRow()){ tblRows.push({title:'' + dbRows.fieldByName('title') + '' , hasChild:true, url:'' + dbRows.fieldByName('url') + '', backgroundImage:rowIdx++ % 2 == 0 ? 'off_1.png' : 'on_1.png' }); dbRows.next(); }
ここで使っている画像は、Kitchen Sinkで使われていたものを拝借した物。
これを実行すると、行ごとに使用する背景が切り替わって表示される。
背景画像は、行の幅、高さに合わせて表示される様子。
小さい画像を使うとこのように引き伸ばされた感じになってしまう。
selectedBackgroundImage や、 leftImage を使うことで、タップしたときに変更される背景色の色や、行の左に出てくるアイコンのような画像の指定をすることができる。
このあたりをうまいこと使うと、ちょっとカッコイイ感じのアプリが作れるかもしれない。まあ、センスのあるデザインができれば、の話。