概述

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();
        }

    }
}

效果图:
3dbanner

实例代码:autoscrollloopviewpager

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐