カスタムタブバーの作り方
最近カスタムタブバーの記事を何件か見かけたので、自分でも試してみました。
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!