ViewPager进阶，轻松实现简拼的splash界面

这是我们需要实现的效果图。刚开始我没想到用viewPager来实现，但是看了这篇博文，我觉得viewpager可以实现这个效果http://blog.csdn.net/lmj623565791/article/details/40411921/

开始有两个问题没搞懂：

1.viewpager可以在实现在显示一张图片的情况下，左右两边还可以各显示一半的图片吗？

2.viewpager滑动可以自定义动画效果吗？

因为上面两个问题，所以没想到viewpager这么强大

在大神的博客里可以看到这么一个东西 pageTransformer

然后通过Viewpager.setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) 设置ViewPager切换时的动画效果，太方便了。。。。。

下面代码对这个pageTransformer里的

transformPage(View page, float position)

做了解释， 另外我们可以通过translationX的方法将左右两边的view移动到屏幕里面来，移动的偏移量我随便写了个400。

class PageTransformerListener implements ViewPager.PageTransformer{

        private static final float MIN_SCALE = 0.4f;
        private static final float MIN_ALPHA = 0.5f;

        /**
         * position会根据view的移动而变化  比如当前有三个view 1,2,3
         * 2在中间的时候，那么view2的position 为 0；
         * 1在左边的时候，那么view1 的position为 -1；
         * 3在右边的时候 ， 那么view3的position为1；
         *
         * 所以在view2移动的view3 值得变化范围就是 0---1
         * VIEW2移动的view1 值得变化范围是 0 ---  -1
         * 反之 1---0 ， -1 --- 0
         *
         * @param page  移动的View对象
         * @param position   移动位置变化的值
         */
        @Override
        public void transformPage(View page, float position) {
            //设置偏移量  目的为了让左边的view（position = -1） 和 右边的view（position = 1）显示在屏幕上面，
            page.setTranslationX(-400 * position);

            //透明度变化
            float alpha = MIN_ALPHA * position;
            if(alpha < 0)
                alpha = 1.0f + alpha;
            else
                alpha = 1.0f - alpha;
            page.setAlpha(alpha);

            //Y轴缩放比
            float scaleY = MIN_SCALE * position;
            if(scaleY < 0)
                scaleY = 1.0f + scaleY;
            else
                scaleY = 1.0f - scaleY;
            page.setScaleY(scaleY);

        }
    }

最后贴上完整代码

activity部分代码:

public class SplashActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private int color[] = {Color.BLUE, Color.GRAY, Color.GREEN, Color.RED, Color.YELLOW};
    private int drawable[] = {R.mipmap.mainpage_1, R.mipmap.mainpage_2, R.mipmap.mainpage_3, R.mipmap.mainpage_4, R.mipmap.mainpage_5};
    private List<View>views;

    private ImageView imageView[];

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);

        initView();
    }

    private void initView() {

        viewPager = (ViewPager)super.findViewById(R.id.activity_splash_viewpager);
        views = new ArrayList<View>();
        for(int i =0; i< 5; i++){
            View view = LayoutInflater.from(this).inflate(R.layout.splash_viewpager_item, null);
            view.findViewById(R.id.splash_viewpager_item_iv_bg).setBackgroundResource(drawable[i]);
            TextView textView = (TextView)view.findViewById(R.id.splash_viewpager_item_tv_content);
            textView.setText( "Content " + i);
            views.add(view);
        }
        SplashViewPagerAdapter splashViewPagerAdapter = new SplashViewPagerAdapter(views);
        viewPager.setOffscreenPageLimit(2);       //缓存页数（左右都为两张）
        viewPager.setAdapter(splashViewPagerAdapter);
        viewPager.setPageTransformer(true, new PageTransformerListener()); //监听view滑动的位置变化

        imageView = new ImageView[5];
        imageView[0] = (ImageView)findViewById(R.id.activity_splash_dot0);
        imageView[1] = (ImageView)findViewById(R.id.activity_splash_dot1);
        imageView[2] = (ImageView)findViewById(R.id.activity_splash_dot2);
        imageView[3] = (ImageView)findViewById(R.id.activity_splash_dot3);
        imageView[4] = (ImageView)findViewById(R.id.activity_splash_dot4);

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                imageView[position].setBackgroundResource(R.mipmap.intro_page_dot2);
                if(position>=1)
                    imageView[position - 1].setBackgroundResource(R.mipmap.intro_page_dot1);
                if(position < 4){
                    imageView[position + 1].setBackgroundResource(R.mipmap.intro_page_dot1);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    class PageTransformerListener implements ViewPager.PageTransformer{

        private static final float MIN_SCALE = 0.4f;
        private static final float MIN_ALPHA = 0.5f;

        /**
         * position会根据view的移动而变化  比如当前有三个view 1,2,3
         * 2在中间的时候，那么view2的position 为 0；
         * 1在左边的时候，那么view1 的position为 -1；
         * 3在右边的时候 ， 那么view3的position为1；
         *
         * 所以在view2移动的view3 值得变化范围就是 0---1
         * VIEW2移动的view1 值得变化范围是 0 ---  -1
         * 反之 1---0 ， -1 --- 0
         *
         * @param page  移动的View对象
         * @param position   移动位置变化的值
         */
        @Override
        public void transformPage(View page, float position) {
            //设置偏移量  目的为了让左边的view（position = -1） 和 右边的view（position = 1）显示在屏幕上面，
            page.setTranslationX(-400 * position);

            //透明度变化
            float alpha = MIN_ALPHA * position;
            if(alpha < 0)
                alpha = 1.0f + alpha;
            else
                alpha = 1.0f - alpha;
            page.setAlpha(alpha);

            //Y轴缩放比
            float scaleY = MIN_SCALE * position;
            if(scaleY < 0)
                scaleY = 1.0f + scaleY;
            else
                scaleY = 1.0f - scaleY;
            page.setScaleY(scaleY);

        }
    }
}

viewpagerAdapter：

public class SplashViewPagerAdapter extends PagerAdapter {

    private List<View> views;

    public SplashViewPagerAdapter(List<View> views){
        this.views = views;
    }

    @Override
    public int getCount() {
        return views.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(views.get(position));
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(views.get(position));
        return views.get(position);
    }

}

xml部分代码：（activity_splash.xml）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center"
    android:background="@mipmap/aboutbg"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/activity_splash_viewpager"
        android:layout_width="fill_parent"
        android:layout_height="500dp" />

    <LinearLayout
        android:gravity="center"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/activity_splash_dot0"
            android:background="@mipmap/intro_page_dot2"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/activity_splash_dot1"
            android:background="@mipmap/intro_page_dot1"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/activity_splash_dot2"
            android:background="@mipmap/intro_page_dot1"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/activity_splash_dot3"
            android:background="@mipmap/intro_page_dot1"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/activity_splash_dot4"
            android:background="@mipmap/intro_page_dot1"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

</LinearLayout>

splash_viewpager_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/splash_viewpager_item_iv_bg"
        android:layout_centerInParent="true"
        android:layout_width="200dp"
        android:layout_height="400dp" />

    <TextView
        android:id="@+id/splash_viewpager_item_tv_content"
        android:layout_centerInParent="true"
        android:text="content"
        android:textSize="30sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

最终效果：（偏移量设置太大了。。。可以设置小点）