Android3D画廊效果与自动轮播Banner

迷南。 2023-10-18 11:59 13阅读 0赞

## **1、功能介绍** ##

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

**先看效果图**

**![20190801223306407.gif][]![20190801223321988.gif][]**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjg1Nw_size_16_color_FFFFFF_t_70][]**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjg1Nw_size_16_color_FFFFFF_t_70 1][]**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjg1Nw_size_16_color_FFFFFF_t_70 2][]

## **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.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(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、** 方法讲解 ##

1、初始化

initBanner(List<String> imagesUriList,boolean isGallery)//图片地址，是否开启3D画廊效果
    initBanner(List<String> imagesUriList,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．最后 ##

AS引入,欢迎使用。

**\[下载体验APK-Demo\]**([https://raw.githubusercontent.com/lzjin/ViewPagerGallery/master/imgfile/app.apk][https_raw.githubusercontent.com_lzjin_ViewPagerGallery_master_imgfile_app.apk])

**网络图片请加上权限，不然不显示哦**

implementation 'com.github.lzjin:ViewPagerGallery:1.2'

扩展功能，下载library自行修改源码

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

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

[github]: https://github.com/lzjin/ViewPagerGallery
[20190801223306407.gif]: https://img-blog.csdnimg.cn/20190801223306407.gif
[20190801223321988.gif]: https://img-blog.csdnimg.cn/20190801223321988.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjg1Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181130105114329.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjg1Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjg1Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2018113010514936.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjg1Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjg1Nw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181130105237268.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjg1Nw==,size_16,color_FFFFFF,t_70
[https_raw.githubusercontent.com_lzjin_ViewPagerGallery_master_imgfile_app.apk]: https://raw.githubusercontent.com/lzjin/ViewPagerGallery/master/imgfile/app.apk