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

1、先看效果图:

gif1.gif

gif2.gif

ic_banner3.png

ic_banner1.png

ic_banner2.png

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

代码调用:

mViewPager.initBanner(imagesUriList, 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: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(imagesUriList, 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(imagesUriList, 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 imagesUriList,boolean isGallery)//图片，是否开启3D画廊效果

initBanner(List imagesUriList,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查看源码。

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