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

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

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

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

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

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

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”}));
});

開発環境
———————————————————————-

– Titanium Mobile SDK 1.7.5
– iOS SDK 5.0

参考にさせてもらったページ
———————————————————————-

– [続・画面遷移に挑戦してみる。( 画面の切り替え )](http://d.hatena.ne.jp/ki_08/20110405/1301970363)
– [Titanium でナビゲーションバーを使った遷移をする方法二つ | ひげろぐ](http://higelog.brassworks.jp/?p=1413)

ありがとうございます。