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

移動中の画面左端を原点とし、それぞれのページの左端の移動量が通知される。

f:id:incesticide:20140506120805p:plain

page positionposition (%)
Page1-0.35-35%
Page20.6565%
Page31.65165%

ViewPager.PageTransformerの説明

http://developer.android.com/reference/android/support/v4/view/ViewPager.PageTransformer.html

transformPage(View page, float position)

ページスクロール状態が通知される。

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

  • 左のページには、デフォルトのスライドのアニメーションを使う
  • 右のページには、縮小とフェード(透過)効果を加える

関連記事

ViewPager のページ移動についてまとめた記事。

ViewPagerのキャッシュする画面数を変更する方法についての記事。