快捷導(dǎo)航

Android 使用Gallery實現(xiàn)3D相冊(附效果圖+Demo源碼)

更新時間：2013年07月30日 09:28:08 作者：

今天主要是說說如何實現(xiàn)Gallery的3D顯示切換，Demo的代碼很多是基于網(wǎng)上一些現(xiàn)成效果，感謝這些分享成果的開發(fā)者

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

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

1、重載Gallery類
因為需要加入倒影和3D切換的效果，因此我們需要重載Gallery類，其中有兩個方法我們需要重寫，一個是onSizeChanged(),另外一個是getChildStaticTransformation()。下面我們看看onSizeChanged()需要做的事情。

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

return true;
}

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

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

復(fù)制代碼代碼如下:

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;
    }

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

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

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

Gallery3D例子代碼：點擊下載

您可能感興趣的文章: