ViewPager 滑动切换效果

    ViewPager是一个允许页面左右滑动的布局管理器，不同的页面可以有不同数据。我们可以通过实现ViewPager.PageTransformer接口来自定义滑动切换效果。

       我们需重写transformPage方法，这个方法有2个参数。第一个参数是指需要设置滑动效果的页面，包括即将滑出页面，即将滑入页面，已经滑出的页面，我们可以通过第二个参数判断第一个参数是指哪个页面。第二个参数不是页面的下标，它是一个浮点数，在用户滑动的过程中，它是动态变化的，通过判断它的值可得出第一个参数的具体指向。

       如果ViewPager没有设置PageMargin属性，当前页面的position为0，前一个为-1，后一个为1。在滑动的过程中，position不断变化。以左滑为例，当ViewPager向左滑动时，当前页面的position从0逐渐变为-1，即将滑入的页面position从1逐渐变为0，滑入的后一个页面position变为1。当设置了PageMargin属性时，当前页面依旧为0，前后页面得加上或减去一个偏移量。（前减后加）。偏移量为  pageMargin / pageWidth 。我们可以在滑动的过程中通过setAlpha()等方法，改变page的属性达到动态效果。

       下面是一个小例子，如图。

       由图我们可以看到，当页面没有处于当前页面时，页面变得透明，高度变少，当页面滑至当前页面时，恢复正常。另外我们可以看到屏幕不仅显示当前页面，而且显示前后页面的部分视图。我们可以通过设置ViewPager父布局以及ViewPager本身属性clipChildren为false实现。这个属性表示是否裁切子View的显示范围，设置为false就可以实现上述效果。

public class MyPageTransformer implements ViewPager.PageTransformer {
    //透明度和高度最小值
    private static final float MIN_SCALE = 0.70f;
    private static final float MIN_ALPHA = 0;
    @Override
    public void transformPage(@NonNull View page, float position) {
        int width = page.getWidth();
        int offset = 20 / width;  // 20为PageMargin属性值

        if(position < -1 - offset){
            page.setAlpha(MIN_ALPHA);
            page.setScaleY(MIN_SCALE);
        }else if(position <= 1 + offset){//在[-1-offset,1+offset]范围
            if(position == 0){ //当前页面
                page.setAlpha(1.0f);
                page.setScaleY(1.0f);
            }else{
                if(position < 0){ //在[-1-offset,0]范围
                    //平滑变化
                    float f = MIN_ALPHA + (1 - MIN_ALPHA) * (1 + position + offset);
                    page.setAlpha(f);
                    float s = MIN_SCALE +(1 - MIN_SCALE) * (1+position + offset);
                    page.setScaleY(s);
                }else{ //在[0，1+offset]范围
                    //平滑变化
                    float f = MIN_ALPHA + (1 - MIN_ALPHA) * (1 - position + offset);
                    page.setAlpha(f);
                    float s = MIN_SCALE +(1 - MIN_SCALE) * (1 - position + offset);
                    page.setScaleY(s);
                }

            }
        }
    }
}

     我们根据不断变化的参数position来设置页面属性，达到平滑过渡的效果。

     布局文件：

<RelativeLayout
    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"
    android:clipChildren="false"
    android:background="@color/colorPrimary"
    tools:context=".Main3Activity">
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager_2"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp"
        android:clipChildren="false"
        />
</RelativeLayout>

      设置margin留出空间来显示其他页面。

     activity代码：

public class Main3Activity extends AppCompatActivity {
    private ViewPager viewPager;
    private  List<Integer> list;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
        init();
        MyPageTransformer n = new MyPageTransformer();
        cardViewAdapter adapter = new cardViewAdapter(this, list);
        viewPager.setAdapter(adapter);
        viewPager.setPageMargin(20);
        viewPager.setOffscreenPageLimit(3);//设置缓存页面数量
        viewPager.setPageTransformer(false,n);
    }
    private void init(){
        viewPager = findViewById(R.id.view_pager_2);
        list = new ArrayList<>();
        for(int i = 0; i < 7; i++){
            list.add(R.drawable.a);
        }
    }
}

  viewPager适配器：

 

public class cardViewAdapter extends PagerAdapter {
    private List<Integer> list;
    private LayoutInflater inflater;
    private Context mContext;
    private ImageView iv;
    cardViewAdapter(Context context, List<Integer> list){
        this.list = list;
        mContext = context;
        inflater = LayoutInflater.from(mContext);
    }
    @Override
    public int getCount() {
        return list.size();
    }
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == object;
    }
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        View view = inflater.inflate(R.layout.cardview, container, false);
        iv = view.findViewById(R.id.image_card);
        iv.setImageResource(list.get(position));
        container.addView(view);
        return view;
    }

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

  其他效果同理，修改MyPageTransformer代码即可。