ViewPagerTransformer实现3d轮播图

概述

CoverFlow效果是IOS上自带的控件，类似3d轮播图效果。
在Android中也有很多的相关实现，大体都是使用Gallery和Camera来实现的。

相关开源库：ImageCoverFlow

效果图：

但是Gallery已经被标记过时，而且ViewPager更方便使用。而且ViewPager中有个接口ViewPagerTransformer，专门用于给ViewPager设置翻页动画的。

ViewPagerTransformer使用

自定义类实现ViewPagerTransformer接口，viewpager调用setPageTransformer即可。

//参数含义：page绘制顺序；transformer实例对象
ViewPager.setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer);

每次界面切换，transformPage()都会为viewpager容器下的缓存页面调用该方法。如，第三页可见且用户向第四页拖动，在操作的各个阶段为第二，三，四页分别调用(ViewPager默认缓存3页)。

//其中view即viewpager的当前item，
transformPage(View view, float position)

如果是3页的 情况下，当前也position的取值范围是[-1,1]
前面的position：[-Infinity,-1)
后面的position：(1,+Infinity]

clipChildren

clipChildren是指子控件是否超过padding区域，这个属性默认是true,利用此属性即可设置viewpager一屏展示多个item，如果将page 沿着y轴旋转即可实现类似coverflow效果了。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:id="@+id/vp_container" android:layout_height="match_parent" android:clipChildren="false">

    <com.bobomee.android.scrollloopviewpager.autoscrollviewpager.AutoScrollViewPager  android:id="@+id/picslooper3" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="100dp" android:layout_marginRight="100dp" android:clipChildren="false" />

    <com.bobomee.android.drawableindicator.widget.DrawableIndicator  android:id="@+id/pageIndexor3" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" app:indicator_height="15dp" app:indicator_margin="15dp" app:indicator_select_src="@drawable/select_drawable" app:indicator_unselect_src="@drawable/unselect_drawable" app:indicator_width="15dp" />
</RelativeLayout>

java code：

  PagerAdapter adapter;
        final AutoScrollViewPager viewPager = (AutoScrollViewPager) findViewById(R.id.picslooper3);
        viewPager.setAdapter(adapter = new FragmentStateAdapter(getSupportFragmentManager()));
        viewPager.setDirection(AutoScrollViewPager.LEFT);
        viewPager.setPageTransformer(true, new RotateTransformer());

        BaseIndicator pageIndex = (BaseIndicator) findViewById(R.id.pageIndexor3);
        pageIndex.setViewPager(viewPager);

        viewPager.startAutoScroll();

        //设置幕后item的缓存数目
        viewPager.setOffscreenPageLimit(adapter.getCount());

        //设置页与页之间的间距
        int margin = ((ViewGroup.MarginLayoutParams) viewPager.getLayoutParams()).leftMargin;
        viewPager.setPageMargin(-(px2dip(this, margin)) / 2);

        //将父类的touch事件分发至viewPgaer，否则只能滑动中间的一个view对象
        RelativeLayout vpContainer = (RelativeLayout) findViewById(R.id.vp_container);
        vpContainer.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return viewPager.dispatchTouchEvent(event);
            }
        });

transformer：

public class RotateTransformer implements ViewPager.PageTransformer {

    public static final float MAX_SCALE = 1.2f;
    public static final float MIN_SCALE = 0.6f;

    @Override
    public void transformPage(View page, float position) {
        page.setRotationY(position * -45);

        if (position < -1) {
            position = -1;
        } else if (position > 1) {
            position = 1;
        }

        float tempScale = position < 0 ? 1 + position : 1 - position;

        float slope = (MAX_SCALE - MIN_SCALE) / 1;
        //一个公式
        float scaleValue = MIN_SCALE + tempScale * slope;
        page.setScaleX(scaleValue);
        page.setScaleY(scaleValue);

        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
            page.getParent().requestLayout();
        }

    }
}

效果图：

实例代码：autoscrollloopviewpager