[ 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

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

続・画面遷移に挑戦してみる。( 画面の切り替え )Titanium でナビゲーションバーを使った遷移をする方法二つ | ひげろぐ

ありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です