TableViewの印象を変えるbackgroundGradientの使い方

QuickTiGame2d使った簡易シューティングゲームと並行して会社で運営してるブログViewerを非公式に作ってます。当初はマーケットで購入したレザー風のテーマを適用してこんな感じにしようと思っていました

当初は悪くないと思ったのですが、実機で見るとしっくりこないのと、それぞれのパーツ１つ１つにデザイン適用するのがちょっと面倒なのでやめることにしました。

背景色は黒に近いグレーベースで、フォントは白ベースが好みで、Tweetbotのタイトルバーっぽい配色ができないかと思って試行錯誤してひとまずこんな感じのUIデザインにすることにしました。

TableViewの背景画像使わなくても、backgroundGradientプロパティをうまく使うことでこういう仕上がりに出来るので簡単に紹介したいと思います

backgroundGradientって？

背景に対してグラデーション適用できるプロパティのようです。TableViewだけではなく、View、Buttonなどでも利用できるみたいです（あまり細かく調べてないので詳細はAPI Documentで、backgroundGradient をキーワードにすると確認出来ます

backgroundGradientの使い方

まず簡単なソースを以下に示します

var tableView = Ti.UI.createTableView({
  backgroundGradient:{
    type: 'linear',
    startPoint: { x: '50%', y: '0%' },
    endPoint: { x: '50%', y: '100%' },
    colors: [
      { color: '#000', offset: 0.0},
      { color: '#333', offset: 0.3},
      { color: '#666', offset: 1.0 }
    ]
  },
  separatorColor: '#333' 
});

typeについて

ここで指定できる値は、'linear'か'radial'のどちらかになります。今回のように直線でグラデーションという場合にはlinearを指定しますが、radial使うと複雑なグラデーションを指定出来るようです。こっちは使い道が思いつかないので詳細まで調べてません・・

startPointとかendPoint

塗りつぶの始点と終点が設定出来ます。今回自分が作ったようなUIだとこれの設定をする意味が正直わかりませんでした。

ただ

という感じで、TableViewRowの半分までグラデーションを適用したい場合にはendPointのYの値を50%にすることでこのようなことが実現出来ます。

colors

colorはすぐわかると思うので割愛します。もう１つのoffsetですが、これは0.0から1.0の値を指定します。

今回のサンプルソースだと、TableViewRowの一番上が真っ黒で、0.3と設定した所(たぶん上から30%)まで#333の色でグラデーションになり、さらにそこから一番下にかけて#666にグラデーションするということになります。

その他

TableViewのseparatorColorというプロパティがあります。これTableViewの区切り線の設定です。これ設定しないと自分が今回作ってるような黒っぽいUI実現出来ないのでこれも忘れずに設定します（今回初めてこのプロパティの存在知りました。Titaniumって奥深いですねｗ）

backgroundGradient使う上で参考になる情報

本家にbackgroundGradient-propertyの解説＆サンプルソースもあるのでそちらが参考になると思います

あと、グラデーションの配色について試行錯誤するには、-webkit-gradient to Titanium Mobile Gradientを使うときっと楽出来ると思います。