【Titanium Advent Calendar 2011：四日目】画面遷移

この記事は、@astronaughtsさん企画の「Titanium Advent Calendar 2011」向けに書いています。

ただいまtitanium勉強中の身でして、大したことを書けないですが、最初につまった画面遷移について書きます。

画面遷移

Titaniumを勉強するにあたり、さまざまな機能が詰め込まれたサンプルKitchenSinkがとても役に立ちます。

コードを見てみると、tabにwindowを置いて表示していくような流れになっています。

var tabGroup = Titanium.UI.createTabGroup({id:'tabGroup1'});
var win1 = Titanium.UI.createWindow({className:'win1'});
var tab1 = Titanium.UI.createTab({
	id:'tab1',
	window:win1
});

tabGroup.addTab(tab1);
tabGroup.open({
	transition:Titanium.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT
});

ところが、タブの位置はiphoneは画面下側でandroidは画面上側に表示されますので、UIが大きく変わることになります。

そこで、タブを使わず遷移させる方法を探していくと、やはり別のサンプルにヒントがありました。

BaseUI -> Window (Standalone) -> Open(Plain) です。

// 現在のwindowの取得
var win = Titanium.UI.currentWindow;
// 次の遷移先に移動するボタン
var b1 = Titanium.UI.createButton({
	title:'Open (Plain)',
	width:200,
	height:40,
	top:10
});

// クリック時の動作設定
b1.addEventListener('click', function()
{

	// クリック時に開くwindow
	var w = Titanium.UI.createWindow({
		backgroundColor:'#336699'
	});

	// クリック時に開くwindowに置く閉じるボタン
	var b = Titanium.UI.createButton({
		title:'Close',
		height:30,
		width:150
	});
	// 閉じるボタン追加
	w.add(b);
	// 閉じるボタンを押したときの動作設定
	b.addEventListener('click', function()
	{
		w.close();
	});

	// 開く
	w.open();
});

クリックした先のwindowも、クリックイベントを設定する際に準備しているような動きのようですね。

これを参考にすれば、タブベースではなく単にwindowベースな遷移が実装できそうです。

まとめ

単なるサンプルの紹介のようになってしまいました（汗

経緯としては、既存のタブベースな動きを改良しようとしてうまくいかずハマっていたのですが、サンプルを見つけてあっという間に解決できた、というのが正直なところですw　一度じっくり全体を見てみて損はなさそうですね。

次は@masuidriveさんです。よろしくお願いします！