ViewPager實現滑動翻頁效果，viewpager滑動翻頁

ViewPager實現滑動翻頁效果，viewpager滑動翻頁

 

實現ViewPager的滑動翻頁效果可以使用ViewPager的setPageTransformer方法，如下：

import android.content.Context;import android.support.v4.view.ViewPager;import android.util.AttributeSet;import android.view.View;public class ReadViewPager extends ViewPager{    public ReadViewPager(Context context)    {        super(context);    }    public ReadViewPager(Context context, AttributeSet attrs)    {        super(context, attrs);        setAnima();    }    public void setAnima()    {        setPageTransformer(true, new PageTransformer()        {            private static final float MIN_SCALE = 0.75f;            @Override            public void transformPage(View view, float position)            {                int pageWidth = view.getWidth();                int pageHeight =view.getHeight();                if (position < -1)                {                    // [-Infinity,-1)                    // This page is way off-screen to the left.                    view.setAlpha(0);                }                else if (position <= 0)                {                    // [-1,0]                    // Use the default slide transition when moving to the left page                    view.setAlpha(1);                    view.setTranslationX(0);                    view.setScaleX(1);                    view.setScaleY(1);                }                else if (position <= 1)                {                    // (0,1]                    // Fade the page out.                    view.setAlpha(1 - position);////                    // Counteract the default slide transition//                    view.setAlpha(1);                    view.setTranslationX(pageWidth * -position);////                    // Scale the page down (between MIN_SCALE and 1)                    float scaleFactor = MIN_SCALE                            + (1 - MIN_SCALE) * (1 - Math.abs(position));                    view.setScaleX(scaleFactor);                    view.setScaleY(scaleFactor);                }                else                {                    // (1,+Infinity]                    // This page is way off-screen to the right.                    view.setAlpha(0);                }            }        });    }}

核心代碼是android官方demo，以上實現的是翻頁效果是：上面一頁被滑出介面時，下面一頁慢慢顯現，透明度慢慢加大，並且大小由小慢慢變大。

不過有一個奇怪的現象，當我做一個答題介面時，剛剛開始我採用ViewPager與View結合實現無限迴圈切換，並且採用上面的動畫效果，可是每當我滑動到最後一張，也就是要開始新的一輪迴圈的時候，被滑出去的一頁也會出現慢慢變透明的情況，而我用ViewPager結合Fragment實現無限迴圈切換的是就不會出現這種效果

如果想要實現仿造駕考寶典的翻頁效果，只要把核心方法改為以下代碼便可以了

setPageTransformer(true, new PageTransformer() {            private static final float MIN_SCALE = 0.75f;            @Override            public void transformPage(View view, float position) {                int pageWidth = view.getWidth();                 int pageHeight =view.getHeight();                if (position < -1) { // [-Infinity,-1)                    // This page is way off-screen to the left.                    view.setAlpha(0);                } else if (position <= 0) { // [-1,0]                    // Use the default slide transition when moving to the left page                    view.setAlpha(1);                    view.setTranslationX(0);                    view.setScaleX(1);                    view.setScaleY(1);                } else if (position <= 1) { // (0,1]                    // Fade the page out.//                    view.setAlpha(1 - position);////                    // Counteract the default slide transition                    view.setAlpha(1);                    view.setTranslationX(pageWidth * -position);////                    // Scale the page down (between MIN_SCALE and 1)//                    float scaleFactor = MIN_SCALE//                            + (1 - MIN_SCALE) * (1 - Math.abs(position));//                    view.setScaleX(scaleFactor);//                    view.setScaleY(scaleFactor);                } else { // (1,+Infinity]                    // This page is way off-screen to the right.                    view.setAlpha(0);                }            }        });

下面我們來講講position參數：

position的可能性的值有：

[-Infinity,-1)  已經看不到了

(1,+Infinity] 已經看不到了

 [-1,1] 

重點看[-1,1]這個區間 ， 其他兩個的View都已經看不到了~~

 

假設現在ViewPager在A頁現在滑出B頁，則:

A頁的position變化就是( 0, -1]

B頁的position變化就是[ 1 , 0 ]

參考部落格：http://blog.csdn.net/lmj623565791/article/details/40411921

                http://www.jianshu.com/p/251592d3ec62