Titanium のナビゲーションバーまめテクニック

iOS でナビゲーションバーを非表示にしている（navBarHidden: true）ウィンドウからナビゲーションバーを表示しているウィンドウへ遷移した際のバグとまめテクニックになります。

※ サンプルはクラシックスタイルですが、Alloy を使っている場合でも同様の現象が起こります

以下の様なナビゲーションウィンドウに内包された win1 から、win2 へ、さらに win2 から win3 へボタンか何かを配置して遷移できるとします。

var win1 = Ti.UI.createWindow({ navBarHidden: true }),
  win2 = Ti.UI.createWindow({ title: 'win2' }),
  win3 = Ti.UI.createWindow({ title: 'win3' }),
  nav = Ti.UI.iOS.createNavigationWindow({ window: win1 });
nav.open();

1. win1 はナビゲーションバーが非表示となっているため、表示されていません
2. win2 へ遷移すると、ナビゲーションバーが表示されます
3. 画面左端からエッジスワイプジェスチャーで win1 へ戻りかけて win2 に留まります

この時点（エッジスワイプジェスチャーで戻りかけている）で win2 のナビゲーションバーは突然消滅してしまいます。さらに、win2 から win3 へ遷移してみましょう。一瞬だけナビゲーションバーのタイトルは win3 と表示されますが、なぜか win2 が表示されてしまいます。表示されているウィンドウの内容はもちろん win3 です。しかも win2 のナビゲーションバーにボタンを配置している場合、これも表示されてしまいます。どうやら win2 のナビゲーションバーに上書きされているようですね。

これが、ナビゲーションバーを非表示にしていると起こるバグです。突然の消滅からナビゲーションバーの改変、困りますね。。。

それではこのバグを回避するテクニックをご紹介します。まずは透過している画像（サンプルでは [e-mail]）を用意してください。サイズは 2x2 で構いません。

var win1 = Ti.UI.createWindow({
    barColor: 'transparent',
    barimage: '/transparent.png',
    shadowImage: '/transparent.png'
  }),
  win2 = Ti.UI.createWindow({ title: 'win2' }),
  win3 = Ti.UI.createWindow({ title: 'win3' }),
  nav = Ti.UI.iOS.createNavigationWindow({ window: win1 });
nav.open();

win1 はナビゲーションバーの背景画像を透過した画像にしているため、表示されているように見られません。また、ナビゲーションバーの背景色を transparent にしているため、敷居のボーダーも消えています。

それでは先ほどの操作を行ってみてください。win2 から win1 へエッジスワイプジェスチャーで戻る際、win2 のナビゲーションバーが突然消滅することはありません。タイトルの文字は徐々に透過されているはずです（背景色のブレンドはダメっぽいですが。。。）。また、win3 へ遷移した際、ナビゲーションバーの改変も起こりません。

barColor と barImage、shadowImage と、どのプロパティも欠けていると残念な見た目になってしまいます。

• barColor を省略した場合は、上記の通り、敷居のボーダーだけ表示されてしまいます
• barImage を省略した場合は、グレイ掛かったナビゲーションバーの領域が表示されてしまいます
• shadowImage を省略した場合は、敷居のボーダーの影が残ってしまいます（※ あとから追記）

と、いうわけで、ナビゲーションバーのまめテクニックでした！

（背景色も徐々にブレンドされているテクニックをご存知の方、ぜひ教えて下さい）