kaz_konno's blog: walkthisway

Titanium Mobileの事など。

カスタムタブバーの作り方

f:id:kaz_konno:20111014021912p:image

最近カスタムタブバーの記事を何件か見かけたので、自分でも試してみました。
http://wiki.appcelerator.orgの中にもサンプルコードは見つかります。
例えば、以下のページを見てください。
http://wiki.appcelerator.org/display/td/315+-+Advanced+User+Interface+Development


簡単に言ってしまうと、標準タブバーにビューを重ねて実現しています。
サンプルコードでは、画面からはみ出すくらいの背景画像を用意して、タブバーの上に置いたViewにイベントを置いてアニメーションしていました。やっている事はたいしたことは無いことが分かります。


仕組みが分かったので、Instagramのようなセンタータブを大きくしてみました。
wikiのサンプルとは異なり、センターのタブだけにボタン画像を配置し、ImageViewではなく、Buttonにしました。理由はButtonの方が押した感が分かるからだけです。
各タブ内のWindowには何も処理を入れていませんので、お好きにいじってください。


Ti.includeで書いています。
時間があったらCommonJSにしてみようかな。

https://github.com/KAZUAKI/CenterCustomTab


[補足]
Ti.include()に慣れていない人は、設置する場所には注意が必要です。インクルードするファイルで使っているネームスペースなどが宣言される前に置いたりするとエラーになります。


Enjoy!