kaz_konno's blog: walkthisway

Titanium Mobileの事など。

iPhoneのようにNavigationBarを残してページ遷移する技

f:id:kaz_konno:20110525032937p:image:w360
Titaniumでは、iPhoneのNavigationBarを残してページ遷移を行うには、tabGroupを使うのが一般であるが、Androidでは、iPhoneのコードのままでは同じようには動かないし、タブを隠すことができない。

そこで、以下のような技を使うと実現できる。
(※この技がいつまで使えるかは分かりません。iPhoneでは異なる動きをします。)

app.js

var mainwindow = Ti.UI.createWindow({
backgroundColor:'#fff',
navBarHidden:'false',
url:'another.js'
});
mainwindow.open();

tabGroupは使わず、さらのWindowを作ります。


another.js

var win = Ti.UI.currentWindow;

//タイトルバーを残してページ遷移するためのアニメーション

var b2 = Titanium.UI.createButton({
title:'Open',
width:200,
height:50,
top:150
});
win.add(b2);

b2.addEventListener('click', function()
{
var options = {
height:0,
width:0,
backgroundColor:'#fff',
bottom:0,
right:0
};
if (Ti.Platform.name == 'android') {
options.navBarHidden = false;
}
var w = Titanium.UI.createWindow(options);


var a = Titanium.UI.createAnimation();

a.height = Titanium.Platform.displayCaps.platformHeight;
a.width = Titanium.Platform.displayCaps.platformWidth;
a.duration = 300;

var b = Titanium.UI.createButton({
title:'Close',
height:50,
width:150
});
w.add(b);
b.addEventListener('click', function()
{
a.height = 0;
a.width = 0;
w.close(a);
});

w.open(a);
});

つまり、こんな感じで自前でアニメーションを作ってしまえば良いということ。
お試しあれ〜。