[ Titanium Mobile ] ウインドウ切り替え ( 画面遷移 ) のサンプルコード

タップするたびに画面を遷移するサンプルコード。

画面遷移には、TabGroup を使ったやり方と、NavigationGroup を使ったやり方があんだそうな。普通は TabGroup を使っておけば良いんだそうな。

ナビゲーションバーには自動的に戻るボタンが表示されます。表示される文字列は、前の画面のタイトル。

iPhone の画面に表示される部品の名称は次のとおりです。

[ ナビゲーションバー ] = 上部のタイトルが書いてある部分
[ タブバー ] = 下部のアイコンが並んでいる部分

この記事の目次非表示

TabGroup を使ったサンプルコード
NavigationGroup を使ったサンプルコード
開発環境
参考にさせてもらったページ

TabGroup を使ったサンプルコード

app.js

var win1 = Ti.UI.createWindow({url: "win1.js"});
var tab1 = Ti.UI.createTab({window: win1});
var tabGroup = Ti.UI.createTabGroup();
win1.hideTabBar(); // タブバーを非表示にする
tabGroup.addTab(tab1);
tabGroup.open();

win1.js

Ti.UI.currentWindow.title = "Window 1";
Ti.UI.currentWindow.backgroundColor = "#fff"; 
Ti.UI.currentWindow.addEventListener("click", function(){
    Ti.UI.currentTab.open(Ti.UI.createWindow({url: "win2.js"}));
});

win2.js

Ti.UI.currentWindow.title = "Window 2"; 
Ti.UI.currentWindow.backgroundColor = "#ccc";
Ti.UI.currentWindow.addEventListener("click", function(){
    Ti.UI.currentTab.open(Ti.UI.createWindow({url: "win1.js"}));
});

NavigationGroup を使ったサンプルコード

app.js

var rootWindow;
rootWindow = Ti.UI.createWindow();
Ti.App.nav = Ti.UI.iPhone.createNavigationGroup({
    window: Ti.UI.createWindow({ // 初期ウィンドウ
        navBarHidden: true, // ナビゲーションバーを隠す
        url: "win1.js"
    })
});
rootWindow.add(Ti.App.nav);
rootWindow.open();

win1.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: "win2.js"}));
});

win2.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: "win3.js"}));
});

win3.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: "win1.js"}));
});