Android3D畫廊效果與自動輪播Banner 1、先看效果圖: 2、效果分析 3D畫廊效果 代碼分析: 3、 普通效果2 4、 普通效果1 5、 方法講解 6．結尾

最開始項目需要使用3D畫廊效果作爲首頁輪播,網上找了半天也沒有比較滿意的，最終決定自己寫一個。本控件採用的是viewpager完成的，支持無限滑動的3D視覺的畫廊效果、 平面普通廣告欄輪播。提供對外方法:指示器圖片自定義、小圖片位置、是否圓角等。本代碼已託管到[github]https://github.com/lzjin/ViewPagerGallery

1、先看效果圖:

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，參數設置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<String> imagesUriList,boolean isGallery)//圖片，是否開啓3D畫廊效果
initBanner(List<String> 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查看源碼。
純手工寫，實屬不易，各位看官如果本文對你有幫助，請點個贊吧。