Android Gallery實現3D相冊(附效果圖+Demo源碼)

時間 2019-11-16

標籤 android gallery 實現 3d 相冊效果圖 demo 源碼欄目 Android 简体版

原文原文鏈接

　　今天由於要作一個設置開機畫面的功能，主要是讓用戶能夠設置本身的開機畫面，應用層須要作讓用戶選擇開機畫面圖片的功能。因此須要作一個簡單的圖片瀏覽選擇程序。最後選用Gallery做爲基本控件。加入了一些炫一點的元素，作成3D滑動效果。下面是Demo例子截圖：html

　　這個效果網上已經不少人作出來了，只是此次須要用到，因此本身也實踐了一下（這裏例子我也是根據網上一些資料編寫）。特地找了幾張美女圖片給你們養養眼，O(∩_∩)O哈！下面針對一些關鍵代碼進行簡要說明，須要作這方面東西的朋友能夠看看。這篇文章是實用性文章，理論分析很少。算法

（PS：新建的QQ羣，有興趣能夠加入一塊兒討論：Android羣：322599434）canvas

一、重載Gallery類ide

　　由於須要加入倒影和3D切換的效果，所以咱們須要重載Gallery類，其中有兩個方法咱們須要重寫，一個是onSizeChanged(),另一個是getChildStaticTransformation()。下面咱們看看onSizeChanged()須要作的事情。post

//Edited by mythou
//http://www.cnblogs.com/mythou/

 @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) {
　　　　//重寫計算旋轉的中心 mCoveflowCenter = getCenterOfCoverflow(); super.onSizeChanged(w, h, oldw, oldh); }

上面主要作的事情就是在改變大小的時候，從新計算滑動切換時須要旋轉變化的中心。下面計算圖片位置時，會從新計算。spa

//Edited by mythou
//http://www.cnblogs.com/mythou/

　　protected boolean getChildStaticTransformation(View child, Transformation trans) 
    {
　　　　 //圖像的中心點和寬度
        final int childCenter = getCenterOfView(child);
        final int childWidth = child.getWidth();
        int rotationAngle = 0;

        trans.clear();
        trans.setTransformationType(Transformation.TYPE_BOTH);        // alpha 和 matrix 都變換

        if (childCenter == mCoveflowCenter) 
        {    
　　　　　　  // 正中間的childView
            transformImageBitmap((ImageView) child, trans, 0);    
        } 
        else 
        {        
　　　　　　 // 兩側的childView
            rotationAngle = (int) ( ( (float) (mCoveflowCenter - childCenter) / childWidth ) * mMaxRotationAngle );
            if (Math.abs(rotationAngle) > mMaxRotationAngle) 
            {
                rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle : mMaxRotationAngle;
            }
　　　　　　　//根據偏移角度對圖片進行處理，看上去有3D的效果。
            transformImageBitmap((ImageView) child, trans, rotationAngle);
        }

        return true;
    }

上面就是重載Gallery的時候，須要注意處理的事情，其實主要就是作圖形變化，效果圖裏面的圖片斜着顯示就是這裏處理的結果，目的就是讓人看上去有立體感。code

二、編寫Adapter適配器orm

　　咱們使用不少控件都涉及適配器，就是用來綁定數據源和目標控件的一箇中間件。這裏咱們須要重載BaseAdapter做爲咱們Gallery的適配器。主要是處理源圖像，加入倒影，生成新的數據源圖片。htm

//Edited by mythou
//http://www.cnblogs.com/mythou/

   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);
            
            //是否原圖片數據，節省內存
            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);
            // 建立倒影圖片（高度爲原圖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);
　　　　　　  // 設置倒影圖片
            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;
    }