未分類

FlipBoard風のUIを実現するViewPager

FlipBoardのUI、話題になってた時に、なぜかどこかで静止画で見て「どこが良いん」と思ってました。最近になって実際に使ってみると「気持ちいーなー」に感想が変わったので、自分のアプリにも取り入れたくなったのですが、探してもやり方が見つかりませんでした。

いろいろ考えた挙げ句、サポートライブラリのViewPagerをコピペしたら簡単に出来るんじゃないかと思いついて、試行錯誤してなんとか出来たので公開します。

全コードとサンプルコードはこちら。
https://github.com/mkt-tokoi/FlipViewPager

基本的にViewPagerの丸パクリで、3000行あるうちの300行弱(コメントアウトしたデバッグコードとか込みです…)しか書き足していません。

ViewPagerが子View(ページ?)の管理をやってくれてるので、描画のところ(#draw(Canvas))だけいじくって、ページ捲りエフェクトを上書きしています(#drawFlippingPage(Canvas))。

ページ捲りエフェクトは、現在ページ左半分と次ページ右半分を画面左側・右側に半分ずつdrawBitmapで描画した後、現在ページ右半分もしくは次ページ左半分を、drawBitmapMeshで変形して描画してます。この変形用メッシュ座標のロジックがややこしかった…。画面右側と左側とで一般化しようとすると気絶しそうだったので、ベタな書き方になってます…というか今から読み返してもすでに訳が分からない(笑

この調子で頑張れば、Google Play Bookのページ捲りエフェクト(ページが”たわむ”やつ)も同様に実現できそうですが、個人的にあんまり気持ちよくないのでやってません。こっちのほうがリアルなのに不思議…。リアル=気持ち良い とは限らない実例ですね。

コメントを残す

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