android实现Materia Design风格APP（四）：ViewPager同时显示3个item及设置切换动画

1.实现viewpager同时显示三个item，这个效果实现起来还挺简单的。

只需要设置viewPager.setOffscreenPageLimit(3); 让viewpager可以显示3个item，并设置viewPager.setPageMargin(50);让每个item间有点间隔的效果 。在xml布局中设置viewpager和他的父控件的clipChildren属性为false就好了。

xml布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Main3Activity"
    android:clipChildren="false">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="50dp"
        android:clipChildren="false"/>

</android.support.design.widget.CoordinatorLayout>

java代码：（adapter自己写吧，默认大家都会）

public class Main3Activity extends AppCompatActivity {

    @BindView(R.id.viewpager)
    ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
        ButterKnife.bind(this);

        //设置viewpager可以显示3个item，每个item间有点间隔的效果
        viewPager.setOffscreenPageLimit(3);
        viewPager.setPageMargin(50);
        //设置viewpager的adapter
        ArrayList<Integer> data = new ArrayList<>();
        data.add(R.drawable.apple);
        data.add(R.drawable.banana);
        data.add(R.drawable.watermelon);
        data.add(R.drawable.pineapple);
        data.add(R.drawable.strawberry);
        ViewPagerAdapter adapter = new ViewPagerAdapter(data);
        viewPager.setAdapter(adapter);
    }
}

2.实现切换动画。

设置viewpager的setPageTransformer(true, pagetransformer)，pageTransFormer是个接口，需要我们自己实现它的transformPage方法。

@Override
public void transformPage(@NonNull View view, float v)

这个方法中的view就是我们的item，v的值随左右滑动而变，概括来讲就是当前显示的item的v为0，其左边item的v都是负值，右边为正值，向左滑v减小，右滑v增大。我实现了一个缩放的效果，你也可以自己定义自己需要的效果。

布局和上面一样，java代码：

public class Main3Activity extends AppCompatActivity {

    @BindView(R.id.viewpager)
    ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
        ButterKnife.bind(this);

        //设置viewpager可以显示3个item，每个item间有点间隔的效果
        viewPager.setOffscreenPageLimit(3);
        viewPager.setPageMargin(50);
        //设置viewpager的切换动画
        viewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
            @Override
            public void transformPage(@NonNull View view, float v) {

                //view就是我们adapter里返回的view，设置view的缩放中心为右上角
                view.setPivotX(view.getWidth());
                view.setPivotY(0);

                //v的值随左右滑动而变，概况来讲就是当前显示的item的v为0，其左边item的v都是负值，右边为正值
                if (v < -1) {//当前显示的item左边第二个及更左的item
                    //看不到的item不缩放
                    view.setScaleX(1);
                    view.setScaleY(1);
                } else if (v < 0){//当前显示的item左边第一个item

                    //逐渐放大
                    view.setScaleX(1 + v);
                    view.setScaleY(1 + v);
                } else if (v == 0) {//当前显示的item的

                } else if (v <= 1) {//当前显示的item右边第一个item

                    //逐渐放大
                    view.setScaleX(1 - v);
                    view.setScaleY(1 - v);
                } else {//当前显示的item右边第二个及更右的item
                    view.setScaleX(1);
                    view.setScaleY(1);
                }
            }
        });
        //设置viewpager的adapter
        ArrayList<Integer> data = new ArrayList<>();
        data.add(R.drawable.apple);
        data.add(R.drawable.banana);
        data.add(R.drawable.watermelon);
        data.add(R.drawable.pineapple);
        data.add(R.drawable.strawberry);
        ViewPagerAdapter adapter = new ViewPagerAdapter(data);
        viewPager.setAdapter(adapter);
    }
}