大家好，又见面了，我是你们的朋友全栈君。
最开始项目需要使用3D画廊效果作为首页轮播,网上找了半天也没有比较满意的，最终决定自己写一个。本控件采用的是viewpager完成的，支持无限滑动的3D视觉的画廊效果、 平面普通广告栏轮播。提供对外方法:指示器图片自定义、小图片位置、是否圆角等。本代码已托管到[github]https://github.com/lzjin/ViewPagerGallery
1、效果分析 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);
}
}
2、 普通效果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
}
});
3、 普通效果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
}
});
4、 方法讲解
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的对边界的边距
5．结尾
因为是网络图片，请加网络权限。
如果还是有什么不懂，请前往github查看源码。
纯手工写，实属不易，各位看官如果本文对你有帮助，请点个赞吧。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/137939.html原文链接：https://javaforall.cn
