Android3D画廊效果与自动轮播Banner

1、功能介绍

        最开始项目需要使用3D画廊效果作为首页轮播,网上找了半天也没有比较满意的，最终决定自己写一个。本控件才用的是viewpager完成的，支持无限滑动的3D视觉的画廊效果、 平面普通广告栏轮播。提供对外方法:指示器图片自定义、小图片位置、是否圆角、等。代码已托管到github，有需要的话可以去我的github下载。

先看效果图

2、效果分析 3D画廊效果

    代码调用:

mViewPager.initBanner(urlList, true)//isGallery参数是否开启3D画廊效果
   .addPageMargin(10, 50)//参数1page之间的间距,参数2中间item距离边界的间距
   .addPoint(6)//添加指示器
   .addPointBottom(7)
   .addStartTimer(5)//自动轮播5秒间隔
   .addRoundCorners(12)//圆角
   .finishConfig()//这句必须加
   .addBannerListener(new BannerViewPager.OnClickBannerListener() {
    @Override
    public void onBannerClick(int position) {
          //点击item
    }
});

   代码分析:     

3D画廊效果，是通过滑动的属性动画来设置。那我们就得就得了解ViewPager的PageTransformer类。重写PageTransformer，在滑动的时候进行X轴、Y轴的缩放拉伸来实现。

1、(-oo,-1) 相对于左边第一页，其左边的所有页面

if (position < -1) {
   view.setScaleX(MIN_SCALE);
   view.setScaleY(MIN_SCALE);
   view.setAlpha(MIN_ALPHA);//这里是设置透明度
}

2、[-1, 1 )当前页的左右第一页

else if (position < 1) {
     float scaleFactor = MIN_SCALE + (1 - Math.abs(position)) * (MAX_SCALE - MIN_SCALE);
     //[0, 1 ） 相对于当前选中页，其右边第一页 **
     if (position > 0) {
          view.setTranslationX(-scaleFactor);
     }
     // [-1, 0 ) 相对于当前选中页，其左边的第一页**
     else if (position < 0) {
          view.setTranslationX(scaleFactor);
     }
     view.setScaleY(scaleFactor);
     view.setScaleX(scaleFactor);
     // float alpha = 1f -  Math.abs(position) * (1 - );
     float alpha = MIN_ALPHA + (1 - MIN_ALPHA) * (1 - Math.abs(position));
     view.setAlpha(alpha);//透明度  
}

3、[1,+oo） 相对于右边第一页，其右边的所有页面

// (1,+Infinity]
else { 
    view.setScaleX(MIN_SCALE);
    view.setScaleY(MIN_SCALE);
    view.setAlpha(MIN_ALPHA);//透明度
}

4、为了让界面显示3item数据，设置左右间距，这里要注意以下 android:clipChildren="false" 这句代码的含义，就是不限制View的布局，已达到边界绘制效果。(间距根据自己需要可更改)

<android.support.v4.view.ViewPager
  android:id="@+id/viewPager"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:clipChildren="false"
  android:layout_marginLeft="60dp"
  android:layout_marginRight="60dp"/>

5、圆角设置

     由于网络图片加载我用的Glide库,对应的圆角设置重写BitmapTransformation即可。这里不多讲，网上工具类很多。

//自定义圆角
public class CornerTransform extends BitmapTransformation {

    private static float radius = 0f;

    public CornerTransform(Context context) {
        this(context, 4);
    }

    public CornerTransform(Context context, int dp) {
        super(context);
        this.radius = Resources.getSystem().getDisplayMetrics().density * dp;
    }

    @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        return roundCrop(pool, toTransform);
    }

    private static Bitmap roundCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;

        Bitmap result = pool.get(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
        if (result == null) {
            result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
        }

        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        RectF rectF = new RectF(0f, 0f, source.getWidth(), source.getHeight());
        canvas.drawRoundRect(rectF, radius, radius, paint);
        return result;
    }

    @Override public String getId() {
        return getClass().getName() + Math.round(radius);
    }

}

3、 普通效果2

        跟上面的实现差不多，唯一的区别就是不重写PageTransformer，使用系统默认的即可。

          代码调用:

​
mViewPager.initBanner(urlList, false)//关闭3D画廊效果
   .addPageMargin(10, 50)//参数1page之间的间距,参数2中间item距离边界的间距
   .addPoint(5)//添加指示器,5dp
   .addPointBottom(7)
   .addStartTimer(5)//自动轮播5秒间隔
   .addRoundCorners(12)//圆角
   .finishConfig()//这句必须加
   .addBannerListener(new BannerViewPager.OnClickBannerListener() {
    @Override
    public void onBannerClick(int position) {
          //点击item
    }
});

4、 普通效果1

在普通效果2上，少了圆角设置，已经左右间距设置0即可。

  代码调用:

​
mViewPager.initBanner(urlList, false)//关闭3D画廊效果
   .addPageMargin(0, 0)//无间距
   .addPoint(5)//添加指示器,5dp
   .addPointBottom(7)
   .addStartTimer(5)//自动轮播5秒间隔
   .finishConfig()//这句必须加
   .addBannerListener(new BannerViewPager.OnClickBannerListener() {
    @Override
    public void onBannerClick(int position) {
          //点击item
    }
});

5、 方法讲解

1、初始化

initBanner(List<String> list,boolean isGallery)//是否开启3D画廊效果
initBanner(List<String> list,boolean isGallery,float alpha)//alpha透明度

2、添加指示器

addPoint(int distance) //间距
addPoint(int distance,int piont_press,int piont) //间距、选中小圆点自定义、未选中小圆点自定义

3、圆角

addRoundCorners(int corners)//圆角10dp

4、定时器开与关

addStartTimer()、stopTimer()

5、网络加载失败显示默认图片

addDefaultImg()

6、item距离设置

/**
 * @param columnMargin 两个Page之间的距离
 * @param rowMargin  page的外边距
 * 注意:当添加了3D画廊效果时,columnMargin尽量设小。应该本是已经进行了x、y的缩放
 */
addPageMargin(int columnMargin,int rowMargin)

6．最后

引入:  implementation 'com.github.lzjin:ViewPagerGallery:1.05'      欢迎使用。

如果还是有什么不懂，请前往github查看源码

纯手工写，实属不易，各位看官如果本文对你有帮助，请点个赞吧。