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