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檢視原始碼

純手工寫，實屬不易，各位看官如果本文對你有幫助，請點個贊吧。