最開始項目需要使用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.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查看源碼。
純手工寫，實屬不易，各位看官如果本文對你有幫助，請點個贊吧。
