ViewPagerのイベントをハンドルする(アニメーション)
検証
ViewPager.PageTransformer を継承したコードを書いて、動作を検証する。
mViewPager.setPageTransformer(false, new ViewPagerTransformer());
private class ViewPagerTransformer implements ViewPager.PageTransformer { private static final String TAG = "PageTransformer"; @Override public void transformPage(View page, float position) { Log.d(TAG, "transformPage" + " current: " + mViewPager.getCurrentItem() + ", page: " + page.toString() + ", position: " + position); } }
実行結果(logcat)
D/PageTransformer(19710): transformPage current: 0, page: android.widget.FrameLayout{4148fc18 V.E..... ......ID 0,0-720,997}, position: -0.05
D/PageTransformer(19710): transformPage current: 0, page: android.widget.FrameLayout{414a7508 V.E..... ......ID 720,0-1440,997}, position: 0.95
D/PageTransformer(19710): transformPage current: 0, page: android.widget.FrameLayout{4163cd40 V.E..... ......ID 1440,0-2160,997}, position: 1.95
D/PageTransformer(19710): transformPage current: 0, page: android.widget.FrameLayout{4148fc18 V.E..... ........ 0,0-720,997}, position: -0.094444446
D/PageTransformer(19710): transformPage current: 0, page: android.widget.FrameLayout{414a7508 V.E..... ........ 720,0-1440,997}, position: 0.90555555
D/PageTransformer(19710): transformPage current: 0, page: android.widget.FrameLayout{4163cd40 V.E..... ......ID 1440,0-2160,997}, position: 1.9055556...
D/PageTransformer(19710): transformPage current: 1, page: android.widget.FrameLayout{4148fc18 V.E..... ........ 0,0-720,997}, position: -0.9986111
D/PageTransformer(19710): transformPage current: 1, page: android.widget.FrameLayout{414a7508 V.E..... ........ 720,0-1440,997}, position: 0.0013888889
D/PageTransformer(19710): transformPage current: 1, page: android.widget.FrameLayout{4163cd40 V.E..... ......ID 1440,0-2160,997}, position: 1.0013889
D/PageTransformer(19710): transformPage current: 1, page: android.widget.FrameLayout{4148fc18 V.E..... ........ 0,0-720,997}, position: -1.0
D/PageTransformer(19710): transformPage current: 1, page: android.widget.FrameLayout{414a7508 V.E..... ........ 720,0-1440,997}, position: 0.0
D/PageTransformer(19710): transformPage current: 1, page: android.widget.FrameLayout{4163cd40 V.E..... ......ID 1440,0-2160,997}, position: 1.0
移動中の画面左端を原点とし、それぞれのページの左端の移動量が通知される。
page | position | position (%) |
---|---|---|
Page1 | -0.35 | -35% |
Page2 | 0.65 | 65% |
Page3 | 1.65 | 165% |
ViewPager.PageTransformerの説明
http://developer.android.com/reference/android/support/v4/view/ViewPager.PageTransformer.html
transformPage(View page, float position)
ページスクロール状態が通知される。
- page : Viewのインスタンス
- position : 通知されたViewの位置
position -1 ~ 1 が目に見えるビュー
position | 説明 |
---|---|
1 以上 | 中央より右の位置 |
0 | 中央 |
-1 以下 | 中央より左の位置 |
サンプル
公式にドキュメントに2つの例が書いてある。
http://developer.android.com/training/animation/screen-slide.html
Zoom-out page transformer
http://developer.android.com/training/animation/screen-slide.html#zoom-out
- ページ移動中、縮小とフェード(透過)効果を加える
- 移動先のページとの中央に近づくと、縮小していたサイズとフェード(透過)が元に戻る
Depth page transformer
http://developer.android.com/training/animation/screen-slide.html#depth-page
- 左のページには、デフォルトのスライドのアニメーションを使う
- 右のページには、縮小とフェード(透過)効果を加える
参考
- リファレンス
http://developer.android.com/reference/android/support/v4/view/ViewPager.PageTransformer.html
- スライド時のアニメーションに関する公式記事(英語)
http://developer.android.com/training/animation/screen-slide.html
関連記事
ViewPager のページ移動についてまとめた記事。
ViewPagerのキャッシュする画面数を変更する方法についての記事。