Android 使用Gallery實(shí)現(xiàn)3D相冊(cè)(附效果圖+Demo源碼)
這個(gè)效果網(wǎng)上已經(jīng)很多人做出來了,只是這次需要用到,所以自己也實(shí)踐了一下(這里例子我也是根據(jù)網(wǎng)上一些資料編寫)。特意找了幾張美女圖片給大家養(yǎng)養(yǎng)眼,O(∩_∩)O哈!下面針對(duì)一些關(guān)鍵代碼進(jìn)行簡(jiǎn)要說明,需要做這方面東西的朋友可以看看。這篇文章是實(shí)用性文章,理論分析不多。 trans.clear(); if (childCenter == mCoveflowCenter) return true;
1、重載Gallery類
因?yàn)樾枰尤氲褂昂?D切換的效果,因此我們需要重載Gallery類,其中有兩個(gè)方法我們需要重寫,一個(gè)是onSizeChanged(),另外一個(gè)是getChildStaticTransformation()。下面我們看看onSizeChanged()需要做的事情。
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
//重寫計(jì)算旋轉(zhuǎn)的中心
mCoveflowCenter = getCenterOfCoverflow();
super.onSizeChanged(w, h, oldw, oldh);
}
上面主要做的事情就是在改變大小的時(shí)候,重新計(jì)算滑動(dòng)切換時(shí)需要旋轉(zhuǎn)變化的中心。下面計(jì)算圖片位置時(shí),會(huì)重新計(jì)算。
protected boolean getChildStaticTransformation(View child, Transformation trans)
{
//圖像的中心點(diǎn)和寬度
final int childCenter = getCenterOfView(child);
final int childWidth = child.getWidth();
int rotationAngle = 0;
trans.setTransformationType(Transformation.TYPE_BOTH); // alpha 和 matrix 都變換
{
// 正中間的childView
transformImageBitmap((ImageView) child, trans, 0);
}
else
{
// 兩側(cè)的childView
rotationAngle = (int) ( ( (float) (mCoveflowCenter - childCenter) / childWidth ) * mMaxRotationAngle );
if (Math.abs(rotationAngle) > mMaxRotationAngle)
{
rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle : mMaxRotationAngle;
}
//根據(jù)偏移角度對(duì)圖片進(jìn)行處理,看上去有3D的效果。
transformImageBitmap((ImageView) child, trans, rotationAngle);
}
}
上面就是重載Gallery的時(shí)候,需要注意處理的事情,其實(shí)主要就是做圖形變化,效果圖里面的圖片斜著顯示就是這里處理的結(jié)果,目的就是讓人看上去有立體感。
2、編寫Adapter適配器
我們使用很多控件都涉及適配器,就是用來綁定數(shù)據(jù)源和目標(biāo)控件的一個(gè)中間件。這里我們需要重載BaseAdapter作為我們Gallery的適配器。主要是處理源圖像,加入倒影,生成新的數(shù)據(jù)源圖片。
public boolean createReflectedForAdapter()
{
final int reflectionGap = 4;
final int Height = 200;
int index = 0;
for (Map<String, Object> map : list)
{
Integer id = (Integer) map.get("image");
// 獲取原始圖片
Bitmap originalImage = BitmapFactory.decodeResource(mContext.getResources(), id);
int width = originalImage.getWidth();
int height = originalImage.getHeight();
float scale = Height / (float)height;
Matrix sMatrix = new Matrix();
sMatrix.postScale(scale, scale);
Bitmap miniBitmap = Bitmap.createBitmap(originalImage, 0, 0,
originalImage.getWidth(), originalImage.getHeight(), sMatrix, true);
//是否原圖片數(shù)據(jù),節(jié)省內(nèi)存
originalImage.recycle();
int mwidth = miniBitmap.getWidth();
int mheight = miniBitmap.getHeight();
Matrix matrix = new Matrix();
// 圖片矩陣變換(從低部向頂部的倒影)
matrix.preScale(1, -1);
// 截取原圖下半部分
Bitmap reflectionImage = Bitmap.createBitmap(miniBitmap, 0, mheight/2, mwidth, mheight/2, matrix, false);
// 創(chuàng)建倒影圖片(高度為原圖3/2)
Bitmap bitmapWithReflection = Bitmap.createBitmap(mwidth, (mheight + mheight / 2), Config.ARGB_8888);
// 繪制倒影圖(原圖 + 間距 + 倒影)
Canvas canvas = new Canvas(bitmapWithReflection);
// 繪制原圖
canvas.drawBitmap(miniBitmap, 0, 0, null);
Paint paint = new Paint();
// 繪制原圖與倒影的間距
canvas.drawRect(0, mheight, mwidth, mheight + reflectionGap, paint);
// 繪制倒影圖
canvas.drawBitmap(reflectionImage, 0, mheight + reflectionGap, null);
paint = new Paint();
// 線性漸變效果
LinearGradient shader = new LinearGradient(0, miniBitmap.getHeight(), 0, bitmapWithReflection.getHeight()
+ reflectionGap, 0x70ffffff, 0x00ffffff, TileMode.CLAMP);
paint.setShader(shader);
// 倒影遮罩效果
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
// 繪制倒影的陰影效果
canvas.drawRect(0, mheight, mwidth, bitmapWithReflection.getHeight() + reflectionGap, paint);
ImageView imageView = new ImageView(mContext);
// 設(shè)置倒影圖片
imageView.setImageBitmap(bitmapWithReflection);
imageView.setLayoutParams(new GalleryView.LayoutParams((int)(width * scale),
(int)(mheight * 3 / 2.0 + reflectionGap)));
imageView.setScaleType(ScaleType.MATRIX);
mImages[index++] = imageView;
}
return true;
}
上面其實(shí)就是一個(gè)圖片處理過程,主要做的事情就是生成倒影,效果圖里面底下是有倒影的。就是利用上面算法生成。我們?cè)谶m配器添加圖片的時(shí)候,會(huì)把適配器原生圖片進(jìn)行處理,加入倒影的效果。這個(gè)我們?cè)趫D片初始化的時(shí)候就可以調(diào)用處理,具體代碼可以查看Demo里面的代碼關(guān)系。
具體圖片滑動(dòng)的過程,Gallery會(huì)幫我們處理好,我們要做的事情其實(shí)就是提供添加了特效的圖片數(shù)據(jù)源,以及處理3D顯示的變化效果,最后都會(huì)提供View作為顯示圖像給Gallery用來顯示。
今天主要是說說如何實(shí)現(xiàn)Gallery的3D顯示切換,Demo的代碼很多是基于網(wǎng)上一些現(xiàn)成效果,感謝這些分享成果的開發(fā)者。下面是Demo的下載,不清楚的可以把Demo下載下來,運(yùn)行看看效果然后分析一下代碼。代碼不多,也不是很復(fù)雜。
Gallery3D例子代碼:點(diǎn)擊下載
- Android實(shí)現(xiàn)3D翻轉(zhuǎn)動(dòng)畫效果
- Android實(shí)現(xiàn)3D推拉門式滑動(dòng)菜單源碼解析
- Android高級(jí)圖片滾動(dòng)控件實(shí)現(xiàn)3D版圖片輪播器
- Android酷炫動(dòng)畫效果之3D星體旋轉(zhuǎn)效果
- Android使用Rotate3dAnimation實(shí)現(xiàn)3D旋轉(zhuǎn)動(dòng)畫效果的實(shí)例代碼
- Android編程實(shí)現(xiàn)3D立體旋轉(zhuǎn)效果的實(shí)例代碼
- Android動(dòng)畫之3D翻轉(zhuǎn)效果實(shí)現(xiàn)函數(shù)分析
- Android 3D旋轉(zhuǎn)動(dòng)畫效果實(shí)現(xiàn)分解
- Android編程實(shí)現(xiàn)3D滑動(dòng)旋轉(zhuǎn)效果的方法
- Android TV開發(fā):實(shí)現(xiàn)3D仿Gallery效果的實(shí)例代碼
相關(guān)文章
Android view更改背景資源與padding消失的問題解決辦法
這篇文章主要介紹了Android view更改背景資源與padding消失的問題解決辦法的相關(guān)資料,需要的朋友可以參考下2017-04-04淺談Android ASM自動(dòng)埋點(diǎn)方案實(shí)踐
本篇文章主要介紹了淺談Android ASM自動(dòng)埋點(diǎn)方案實(shí)踐,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01Android項(xiàng)目實(shí)戰(zhàn)之仿網(wǎng)易頂部導(dǎo)航欄效果
這篇文章主要為大家詳細(xì)介紹了Android項(xiàng)目實(shí)戰(zhàn)之仿網(wǎng)易頂部導(dǎo)航欄效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05Android無需讀寫權(quán)限通過臨時(shí)授權(quán)讀寫用戶文件詳解
這篇文章主要為大家介紹了Android無需讀寫權(quán)限通過臨時(shí)授權(quán)讀寫用戶文件詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03Android中利用matrix 控制圖片的旋轉(zhuǎn)、縮放、移動(dòng)
本篇文章是對(duì)Android中利用matrix 控制圖片的旋轉(zhuǎn)、縮放、移動(dòng)進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06Android開發(fā)使用ProgressBar實(shí)現(xiàn)進(jìn)度條功能示例
這篇文章主要介紹了Android開發(fā)使用ProgressBar實(shí)現(xiàn)進(jìn)度條功能,結(jié)合實(shí)例形式分析了Android進(jìn)度條ProgressBar的具體樣式、布局與功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-03-03Android編程單選項(xiàng)框RadioGroup綜合應(yīng)用示例
這篇文章主要介紹了Android編程單選項(xiàng)框RadioGroup用法,結(jié)合實(shí)例形式分析了Android單選按鈕組RadioGroup的定義與具體使用技巧,需要的朋友可以參考下2016-10-10Android自定義scrollview實(shí)現(xiàn)回彈效果
這篇文章主要為大家詳細(xì)介紹了Android自定義scrollview實(shí)現(xiàn)回彈效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04