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

1、先看效果图:

ic_banner3.png ic_banner1.png ic_banner2.png

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，参数设置false，使用系统默认的滑动效果即可。

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、 方法讲解

initBanner(List<String> list,boolean isGallery)//是否开启3D画廊效果
initBanner(List<String> list,boolean isGallery,float alpha)//alpha透明度
addPoint(int distance) //间距
addPoint(int distance,int piont_press,int piont) //间距、选中小圆点自定义、未选中小圆点自定义
addRoundCorners(int corners)//圆角10dp
addStartTimer()、stopTimer()
addDefaultImg()
//注意:当添加了3D画廊效果时,columnMargin尽量设小。应该本是已经进行了x、y的缩放
addPageMargin(int columnMargin,int rowMargin)//两个Page之间的距离，中间item的对边界的边距

6．结尾

如果还是有什么不懂，请前往github查看源码。
纯手工写，实属不易，各位看官如果本文对你有帮助，请点个赞吧。