自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Android Gallery實(shí)現(xiàn)3D相冊(cè)(附效果圖+Demo源碼)

移動(dòng)開發(fā) Android
本文主要是說(shuō)說(shuō)如何實(shí)現(xiàn)Gallery的3D顯示切換,Demo的代碼很多是基于網(wǎng)上一些現(xiàn)成效果,感謝這些分享成果的開發(fā)者。文中有Demo的下載,不清楚的可以把Demo下載下來(lái),運(yùn)行看看效果然后分析一下代碼。代碼不多,也不是很復(fù)雜。

今天因?yàn)橐鲆粋€(gè)設(shè)置開機(jī)畫面的功能,主要是讓用戶可以設(shè)置自己的開機(jī)畫面,應(yīng)用層需要做讓用戶選擇開機(jī)畫面圖片的功能。所以需要做一個(gè)簡(jiǎn)單的圖片瀏覽選擇程序。最后選用Gallery作為基本控件。加入了一些炫一點(diǎn)的元素,做成3D滑動(dòng)效果。下面是Demo例子截圖:

 

這個(gè)效果網(wǎng)上已經(jīng)很多人做出來(lái)了,只是這次需要用到,所以自己也實(shí)踐了一下(這里例子我也是根據(jù)網(wǎng)上一些資料編寫)。特意找了幾張美女圖片給大家養(yǎng)養(yǎng)眼,O(∩_∩)O哈!下面針對(duì)一些關(guān)鍵代碼進(jìn)行簡(jiǎn)要說(shuō)明,需要做這方面東西的朋友可以看看。這篇文章是實(shí)用性文章,理論分析不多。

(PS:新建的QQ群,有興趣可以加入一起討論:Android群:322599434)

1、重載Gallery類

因?yàn)樾枰尤氲褂昂?D切換的效果,因此我們需要重載Gallery類,其中有兩個(gè)方法我們需要重寫,一個(gè)是onSizeChanged(),另外一個(gè)是getChildStaticTransformation()。下面我們看看onSizeChanged()需要做的事情。

  1. @Override 
  2.     protected void onSizeChanged(int w, int h, int oldw, int oldh)  
  3.     {    //重寫計(jì)算旋轉(zhuǎn)的中心 
  4.         mCoveflowCenter = getCenterOfCoverflow(); 
  5.         super.onSizeChanged(w, h, oldw, oldh); 
  6.     }  

上面主要做的事情就是在改變大小的時(shí)候,重新計(jì)算滑動(dòng)切換時(shí)需要旋轉(zhuǎn)變化的中心。下面計(jì)算圖片位置時(shí),會(huì)重新計(jì)算。

  1. protected boolean getChildStaticTransformation(View child, Transformation trans)  
  2.     {     //圖像的中心點(diǎn)和寬度 
  3.         final int childCenter = getCenterOfView(child); 
  4.         final int childWidth = child.getWidth(); 
  5.         int rotationAngle = 0
  6.  
  7.         trans.clear(); 
  8.         trans.setTransformationType(Transformation.TYPE_BOTH);        // alpha 和 matrix 都變換 
  9.  
  10.         if (childCenter == mCoveflowCenter)  
  11.         {            // 正中間的childView 
  12.             transformImageBitmap((ImageView) child, trans, 0);     
  13.         }  
  14.         else  
  15.         {                // 兩側(cè)的childView 
  16.             rotationAngle = (int) ( ( (float) (mCoveflowCenter - childCenter) / childWidth ) * mMaxRotationAngle ); 
  17.             if (Math.abs(rotationAngle) > mMaxRotationAngle)  
  18.             { 
  19.                 rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle : mMaxRotationAngle; 
  20.             }       //根據(jù)偏移角度對(duì)圖片進(jìn)行處理,看上去有3D的效果。 
  21.             transformImageBitmap((ImageView) child, trans, rotationAngle); 
  22.         } 
  23.  
  24.         return true
  25.     } 

上面就是重載Gallery的時(shí)候,需要注意處理的事情,其實(shí)主要就是做圖形變化,效果圖里面的圖片斜著顯示就是這里處理的結(jié)果,目的就是讓人看上去有立體感。

2、編寫Adapter適配器

我們使用很多控件都涉及適配器,就是用來(lái)綁定數(shù)據(jù)源和目標(biāo)控件的一個(gè)中間件。這里我們需要重載BaseAdapter作為我們Gallery的適配器。主要是處理源圖像,加入倒影,生成新的數(shù)據(jù)源圖片。

  1. public boolean createReflectedForAdapter()  
  2.     { 
  3.         final int reflectionGap = 4
  4.         final int Height = 200
  5.         int index = 0
  6.         for (Map<String, Object> map : list)  
  7.         { 
  8.             Integer id = (Integer) map.get("image"); 
  9.             // 獲取原始圖片 
  10.             Bitmap originalImage = BitmapFactory.decodeResource(mContext.getResources(), id);     
  11.             int width = originalImage.getWidth(); 
  12.             int height = originalImage.getHeight(); 
  13.             float scale = Height / (float)height; 
  14.              
  15.             Matrix sMatrix = new Matrix(); 
  16.             sMatrix.postScale(scale, scale); 
  17.             Bitmap miniBitmap = Bitmap.createBitmap(originalImage, 00
  18.                     originalImage.getWidth(), originalImage.getHeight(), sMatrix, true); 
  19.              
  20.             //是否原圖片數(shù)據(jù),節(jié)省內(nèi)存 
  21.             originalImage.recycle(); 
  22.  
  23.             int mwidth = miniBitmap.getWidth(); 
  24.             int mheight = miniBitmap.getHeight(); 
  25.             Matrix matrix = new Matrix(); 
  26.             // 圖片矩陣變換(從低部向頂部的倒影) 
  27.             matrix.preScale(1, -1);             
  28.             // 截取原圖下半部分 
  29.             Bitmap reflectionImage = Bitmap.createBitmap(miniBitmap, 0, mheight/2, mwidth, mheight/2, matrix, false); 
  30.             // 創(chuàng)建倒影圖片(高度為原圖3/2) 
  31.             Bitmap bitmapWithReflection = Bitmap.createBitmap(mwidth, (mheight + mheight / 2), Config.ARGB_8888);     
  32.             // 繪制倒影圖(原圖 + 間距 + 倒影) 
  33.             Canvas canvas = new Canvas(bitmapWithReflection);     
  34.             // 繪制原圖 
  35.             canvas.drawBitmap(miniBitmap, 00null);         
  36.             Paint paint = new Paint(); 
  37.             // 繪制原圖與倒影的間距 
  38.             canvas.drawRect(0, mheight, mwidth, mheight + reflectionGap, paint); 
  39.             // 繪制倒影圖 
  40.             canvas.drawBitmap(reflectionImage, 0, mheight + reflectionGap, null);     
  41.  
  42.             paint = new Paint(); 
  43.             // 線性漸變效果 
  44.             LinearGradient shader = new LinearGradient(0, miniBitmap.getHeight(), 0, bitmapWithReflection.getHeight() 
  45.                     + reflectionGap, 0x70ffffff0x00ffffff, TileMode.CLAMP); 
  46.             paint.setShader(shader);     
  47.             // 倒影遮罩效果 
  48.             paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));         
  49.             // 繪制倒影的陰影效果 
  50.             canvas.drawRect(0, mheight, mwidth, bitmapWithReflection.getHeight() + reflectionGap, paint);         
  51.             ImageView imageView = new ImageView(mContext);        // 設(shè)置倒影圖片 
  52.             imageView.setImageBitmap(bitmapWithReflection);         
  53.             imageView.setLayoutParams(new GalleryView.LayoutParams((int)(width * scale), 
  54.                     (int)(mheight * 3 / 2.0 + reflectionGap))); 
  55.             imageView.setScaleType(ScaleType.MATRIX); 
  56.             mImages[index++] = imageView; 
  57.         } 
  58.         return true
  59.     } 

 

上面其實(shí)就是一個(gè)圖片處理過(guò)程,主要做的事情就是生成倒影,效果圖里面底下是有倒影的。就是利用上面算法生成。我們?cè)谶m配器添加圖片的時(shí)候,會(huì)把適配器原生圖片進(jìn)行處理,加入倒影的效果。這個(gè)我們?cè)趫D片初始化的時(shí)候就可以調(diào)用處理,具體代碼可以查看Demo里面的代碼關(guān)系。

具體圖片滑動(dòng)的過(guò)程,Gallery會(huì)幫我們處理好,我們要做的事情其實(shí)就是提供添加了特效的圖片數(shù)據(jù)源,以及處理3D顯示的變化效果,最后都會(huì)提供View作為顯示圖像給Gallery用來(lái)顯示。

今天主要是說(shuō)說(shuō)如何實(shí)現(xiàn)Gallery的3D顯示切換,Demo的代碼很多是基于網(wǎng)上一些現(xiàn)成效果,感謝這些分享成果的開發(fā)者。下面是Demo的下載,不清楚的可以把Demo下載下來(lái),運(yùn)行看看效果然后分析一下代碼。代碼不多,也不是很復(fù)雜。

Gallery3D例子代碼:Grallery3DTest2013-7-19.rar

責(zé)任編輯:閆佳明 來(lái)源: cnblogs
相關(guān)推薦

2010-06-09 10:13:40

OpenSUSE 3D

2021-09-16 07:52:18

SwiftUScroll效果

2022-09-19 19:16:42

輪播圖has

2023-05-26 07:08:05

CSS模糊實(shí)現(xiàn)文字

2021-08-30 06:20:39

CSS 技巧3D 效果

2010-06-09 16:21:10

OpenSUSE界面

2013-06-25 11:21:35

Android開發(fā)幻燈片效果Gallery

2009-05-13 08:13:37

SUSELinux 10.3Nvidia

2012-07-18 20:59:40

jQuery

2011-09-07 10:00:53

Ubuntu3D

2010-01-04 15:17:52

Ubuntu啟動(dòng)

2021-11-08 06:02:17

CSS 技巧代碼重構(gòu)

2009-04-03 08:33:59

Symbian諾基亞Photo Brows

2011-09-22 10:07:52

奧圖碼投影儀

2011-12-21 12:46:43

2014-07-09 13:44:40

Android StuList Fragme

2013-01-30 16:15:40

adobeHTML5css3

2012-06-16 16:57:52

WebGL

2012-02-27 10:00:50

HTML 5
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)