Android3D畫廊效果與自動輪播Banner

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

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

1、先看效果圖:

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，引數設定false，使用系統預設的滑動效果即可。

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、 方法講解

initBanner(List<String> list,boolean isGallery)//是否開啟3D畫廊效果
initBanner(List<String> list,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 檢視原始碼。

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