Titaniumでナビゲーションバーを使った遷移をする方法二つ

TabGroupを使ったやり方と、NavigationGroupを使ったやり方がある。

TabGroupを使う

オーソドックスなやり方。

TabGroupを作成し、Tabを追加。
Tabからウィンドウを開くやり方。

Tabにナビゲーションバーで遷移する機能がついている。遷移の状態はTabごとに保持される。

app.js

var win, tab, tg;
win = Ti.UI.createWindow({url: "first.js"});
win.hideTabBar();

tab = Ti.UI.createTab({window: win});

tg = Ti.UI.createTabGroup();
tg.addTab(tab);
tg.open();

タブバーは必要がなければ隠す。

first.js

Ti.UI.currentWindow.title = "Window 1";
Ti.UI.currentWindow.backgroundColor = "#f00";

Ti.UI.currentWindow.addEventListener("click", function(){
    Ti.UI.currentTab.open(Ti.UI.createWindow({url: "second.js"}));
});

urlを指定して開いたウィンドウからはTi.UI.currentTabで現在のタブにアクセスできる。
現在のタブで新しいウィンドウを開けばそのウィンドウに遷移する。

second.js

Ti.UI.currentWindow.title = "Window 2";
Ti.UI.currentWindow.backgroundColor = "#0f0";

Ti.UI.currentWindow.addEventListener("click", function(){
    Ti.UI.currentTab.open(Ti.UI.createWindow({url: "third.js"}));
});

遷移したウィンドウのナビゲーションバーには前のウィンドウに戻るボタンが表示されている。

third.js

Ti.UI.currentWindow.title = "Window 3";
Ti.UI.currentWindow.backgroundColor = "#00f";

Ti.UI.currentWindow.addEventListener("click", function(){
    Ti.UI.currentTab.open(Ti.UI.createWindow({url: "first.js"}));
});

無限ループって怖い。

NavigationGroupを使う

ベースになるルートウインドウを作成し、そこにNavigationGroupを追加。
そのNavigationGroupからウィンドウを開くというやり方。

app.js

var rootWindow;

rootWindow = Ti.UI.createWindow();

Ti.App.nav = Ti.UI.iPhone.createNavigationGroup({
    window: Ti.UI.createWindow({url: "first.js"}) // 初期ウィンドウ
});
rootWindow.add(Ti.App.nav);

rootWindow.open();

NavigationGroupをTi.Appにくっつけてグローバルにするのが肝。

そうしないとコンテキストの違う別のウィンドウからアクセスする手段がない。
createWindowのオプションにくっつけて持ち回る手もあるが、それはあまりにめんどくさすぎる。

first.js

Ti.UI.currentWindow.title = "Window 1";
Ti.UI.currentWindow.backgroundColor = "#f00";

Ti.UI.currentWindow.addEventListener("click", function(){
    Ti.App.nav.open(Ti.UI.createWindow({url: "second.js"}));
});

Ti.App.navで新しいウィンドウを開けばそのウィンドウに遷移する。

second.js

Ti.UI.currentWindow.title = "Window 2";
Ti.UI.currentWindow.backgroundColor = "#0f0";

Ti.UI.currentWindow.addEventListener("click", function(){
    Ti.App.nav.open(Ti.UI.createWindow({url: "third.js"}));
});

遷移したウィンドウのナビゲーションバーには前のウィンドウに戻るボタンが表示されている。

third.js

Ti.UI.currentWindow.title = "Window 3";
Ti.UI.currentWindow.backgroundColor = "#00f";

Ti.UI.currentWindow.addEventListener("click", function(){
    Ti.App.nav.open(Ti.UI.createWindow({url: "first.js"}));
});

無限ルーｐ（ｒｙ

使い分け

普段はTabGroupを使ったやり方の方が楽。
ただ素直に考えるとNavigatoinGroupを使ったやり方の方がリソースには優しい気がする。（気がするだけで確認してはいない）

モーダルなウィンドウでナビゲーションバーを使いたい場合などケースによってはNavigationGroupを使うとうまくいく。