TitaniumでTabGroupを使ってる状態でナビボタンの背景色を変更する方法

小ネタですが地味にやり方がわからなかったので、まとめておきます

Flat UIっぽくしたいために、ナビゲーションバーの色を白ベースにしました。

ナビボタンの背景色を変更しないといけなくなった事情

メイン画面から詳細画面に遷移した場合に、こんな感じでメイン画面に戻るボタンの背景色が白ベースで文字も白なのでとっても見づらくなってしまいます。

かといって、ナビゲーションバーの色を白ではない別の色にしてしまうのもUIとして統一感がないのでそれはちょっといただけないなぁと思い、どうにかしてナビボタンの背景色を変更したいと思ったのが背景としてあります

Ti.UI.Buttonでボタンを作って、setLeftNavButtonすればいいのでは？

例えばこんな感じのコード。

win = Ti.UI.createWindow()
backBtn = Titanium.UI.createButton
  title: "Back"
  top: 10
  width: 100
  height: 50
win.setLeftNavButton backBtn

見た目だけ考えると、これが一番手っ取り早いかと思いますし、実際自分も最初そうやりました。

ただ、このエントリのタイトルにしてる通り、TitaniumでTabGroupを使ってる状態のため、

backBtn.addEventListener('click',(e)->

)

という感じのbackBtnのイベントリスナーで戻る時の処理を書かないといけないのでしょうけど、詳細画面のウィンドウ（仮にdetailWindow）に対する処理を実施→ detailWindow.close()するとウィンドウが閉じるだけでメインには戻らないし、他のやり方があまり思いつかず結局メイン画面に戻る処理の書き方が、簡単そうでわかりませんでした・・

2013年9月14日追記

detailWindow.closeではなく、Tab.close(subWindow,{animated:true})みたいにすればOKなんですね。

Ti.UI.Button使わずに、ButtonBarを利用することで解決しました

Appcelerator Left Right nav button background colour srcnix's obsessionsというエントリをそのままパクりました

win = Ti.UI.createWindow()
backBtn = Ti.UI.createButtonBar
  labels: ['Back']
  backgroundColor: "#ccc"
  color: "#333"
win.setLeftNavButton backBtn