タップするたびに画面を遷移するサンプルコード。
画面遷移には、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
参考にさせてもらったページ ———————————————————————-
– 続・画面遷移に挑戦してみる。( 画面の切り替え ) – Titanium でナビゲーションバーを使った遷移をする方法二つ | ひげろぐ
ありがとうございます。