1. 程式人生 > >Android開發之實現最簡單最酷炫的3D圖片瀏覽效果(二)

Android開發之實現最簡單最酷炫的3D圖片瀏覽效果(二)

          (一)截圖

             

       (二)實現關鍵:

          1、改寫Gallery,實現圖片的層疊和透明度漸變。 主要是改寫getChildStaticTransformation方法

          2、對圖片進行加工處理,實現透明倒影。

          3、對於超大圖片,先進行縮小。防止圖片過大,超出螢幕範圍報錯。

       (三)、程式碼:

     1、Activity類程式碼:GallaryBrowser.java

    <span style="color:#333333;">package com.myandroid.test;  
    import <a href="http://lib.csdn.net/base/15" class='replace_word' title="Android知識庫" target='_blank' style='color:#df3434; font-weight:bold;'>Android</a>.app.Activity;  
    import android.os.Bundle;  
    import android.view.View;  
    import android.widget.ImageSwitcher;  
    import android.widget.ImageView;  
    import android.widget.Gallery.LayoutParams;  
    import android.widget.ViewSwitcher.ViewFactory;  
      
    public class GallaryBrowser extends Activity {  
        private Integer[] imageIds = new Integer[] {  
                R.drawable.a, R.drawable.desert,   
                R.drawable.hydrangeas, R.drawable.lighthouse,  
                R.drawable.jellyfish, R.drawable.koala,  
                R.drawable.lighthouse, R.drawable.penguins,  
                R.drawable.tulips  
        };  
          
        /** Called when the activity is first created. */  
        @Override  
        public void onCreate(Bundle savedInstanceState) {  
            super.onCreate(savedInstanceState);  
              
            final CoverFlow cf = new CoverFlow(this);  
            cf.setAdapter(new ImageAdapter(this, imageIds));  
            cf.setAnimationDuration(1500);  
            setContentView(cf);  
      
        }  
      
    }  </span>

       2、圖片處理程式碼,主要是實現旋轉和倒影: MyImgView.java

    package com.myandroid.test;
    import android.graphics.Bitmap;  
    import android.graphics.Canvas;  
    import android.graphics.LinearGradient;  
    import android.graphics.Matrix;  
    import android.graphics.Paint;  
    import android.graphics.PixelFormat;  
    import android.graphics.PorterDuffXfermode;  
    import android.graphics.Bitmap.Config;  
    import android.graphics.PorterDuff.Mode;  
    import android.graphics.Shader.TileMode;  
    import android.graphics.drawable.Drawable;
    public class MyImgView {  
      
        /** 
         * 新增倒影,原理,先翻轉圖片,由上到下放大透明度 
         *  
         * @param originalImage 
         * @return 
         */  
        public static Bitmap createReflectedImage(Bitmap originalImage) {  
            // The gap we want between the reflection and the original image  
            final int reflectionGap = 4;  
      
            int width = originalImage.getWidth();  
            int height = originalImage.getHeight();  
      
            // This will not scale but will flip on the Y axis  
            Matrix matrix = new Matrix();  
            matrix.preScale(1, -1);  
      
            // Create a Bitmap with the flip matrix applied to it.  
            // We only want the bottom half of the image  
            Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,  
                    height / 2, width, height / 2, matrix, false);  
      
            // Create a new bitmap with same width but taller to fit reflection  
            Bitmap bitmapWithReflection = Bitmap.createBitmap(width,  
                    (height + height / 2), Config.ARGB_8888);  
      
            // Create a new Canvas with the bitmap that's big enough for  
            // the image plus gap plus reflection  
            Canvas canvas = new Canvas(bitmapWithReflection);  
            // Draw in the original image  
            canvas.drawBitmap(originalImage, 0, 0, null);  
            // Draw in the gap  
            Paint defaultPaint = new Paint();  
            canvas.drawRect(0, height, width, height + reflectionGap, defaultPaint);  
            // Draw in the reflection  
            canvas.drawBitmap(reflectionImage, 0, height + reflectionGap, null);  
      
            // Create a shader that is a linear gradient that covers the reflection  
            Paint paint = new Paint();  
            LinearGradient shader = new LinearGradient(0,  
                    originalImage.getHeight(), 0, bitmapWithReflection.getHeight()  
                            + reflectionGap, 0x70ffffff, 0x00ffffff, TileMode.CLAMP);  
            // Set the paint to use this shader (linear gradient)  
            paint.setShader(shader);  
            // Set the Transfer mode to be porter duff and destination in  
            paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));  
            // Draw a rectangle using the paint with our linear gradient  
            canvas.drawRect(0, height, width, bitmapWithReflection.getHeight()  
                    + reflectionGap, paint);  
      
            return bitmapWithReflection;  
        }  
        //drawable 型別轉化為bitmap  
        public static Bitmap drawableToBitmap(Drawable drawable) {  
      
            Bitmap bitmap = Bitmap  
                    .createBitmap(  
                            drawable.getIntrinsicWidth(),  
                            drawable.getIntrinsicHeight(),  
                            drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888  
                                    : Bitmap.Config.RGB_565);  
            Canvas canvas = new Canvas(bitmap);  
            // canvas.setBitmap(bitmap);  
            drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable  
                    .getIntrinsicHeight());  
            drawable.draw(canvas);  
            return bitmap;  
        }  
      
    }  <span style="font-family:comic sans ms,sans-serif;"></span>

          3、自定義的Gallery,繼承Gallery類,重寫getChildStaticTransformation方法,實現圖片的重疊和透明度漸變:CoverFlow.java

  
    package com.myandroid.test;  
      
    import android.content.Context;  
    import android.graphics.Camera;  
    import android.graphics.Matrix;  
    import android.util.AttributeSet;  
    import android.util.Log;  
    import android.view.View;  
    import android.view.animation.Transformation;  
    import android.widget.Gallery;  
    import android.widget.ImageView;
    //自己定義的Gallery  
    public class CoverFlow extends Gallery {  
      
        private Camera mCamera = new Camera();  
        private int mMaxRotationAngle = 50;  
        private int mMaxZoom = -500;  
        private int mCoveflowCenter;  
        private boolean mAlphaMode = true;  
        private boolean mCircleMode = false;  
      
        public CoverFlow(Context context) {  
            super(context);  
            this.setStaticTransformationsEnabled(true);  
            Log.e("sequence", "CoverFlow2");  
        }  
      
        public CoverFlow(Context context, AttributeSet attrs) {  
            super(context, attrs);  
            this.setStaticTransformationsEnabled(true);  
        }  
      
        public CoverFlow(Context context, AttributeSet attrs, int defStyle) {  
            super(context, attrs, defStyle);  
            this.setStaticTransformationsEnabled(true);  
        }  
      
        public int getMaxRotationAngle() {  
            return mMaxRotationAngle;  
        }  
      
        public void setMaxRotationAngle(int maxRotationAngle) {  
            mMaxRotationAngle = maxRotationAngle;  
        }  
      
        public boolean getCircleMode() {  
            return mCircleMode;  
        }  
      
        public void setCircleMode(boolean isCircle) {  
            mCircleMode = isCircle;  
        }  
      
        public boolean getAlphaMode() {  
            return mAlphaMode;  
        }  
      
        public void setAlphaMode(boolean isAlpha) {  
            mAlphaMode = isAlpha;  
        }  
      
        public int getMaxZoom() {  
            return mMaxZoom;  
        }  
      
        public void setMaxZoom(int maxZoom) {  
            mMaxZoom = maxZoom;  
        }  
      
        private int getCenterOfCoverflow() {  
            return (getWidth() - getPaddingLeft() - getPaddingRight()) / 2  
                    + getPaddingLeft();  
        }  
      
        private static int getCenterOfView(View view) {  
            return view.getLeft() + view.getWidth() / 2;  
        }  
        //重寫Garray方法 ,產生層疊和放大效果  
        @Override  
        protected boolean getChildStaticTransformation(View child, Transformation t) {  
              
            final int childCenter = getCenterOfView(child);  
            final int childWidth = child.getWidth();  
            int rotationAngle = 0;  
            t.clear();  
            t.setTransformationType(Transformation.TYPE_MATRIX);  
            if (childCenter == mCoveflowCenter) {  
                transformImageBitmap((ImageView) child, t, 0, 0);  
            } else {  
                rotationAngle = (int) (((float) (mCoveflowCenter - childCenter) / childWidth) * mMaxRotationAngle);  
                // Log.d("test", "recanglenum:"+Math.floor ((mCoveflowCenter -  
                // childCenter) / childWidth));  
                if (Math.abs(rotationAngle) > mMaxRotationAngle) {  
                    rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle  
                            : mMaxRotationAngle;  
                }  
                transformImageBitmap((ImageView) child, t, rotationAngle,  
                        (int) Math.floor((mCoveflowCenter - childCenter)/ (childWidth==0?1:childWidth)));  
            }  
            Log.e("sequence", "getChildStaticTransformation");  
            return true;  
        }  
      
        /** 
         * This is called during layout when the size of this view has changed. If 
         * you were just added to the view hierarchy, you're called with the old 
         * values of 0. 
         *  
         * @param w 
         *            Current width of this view. 
         * @param h 
         *            Current height of this view. 
         * @param oldw 
         *            Old width of this view. 
         * @param oldh 
         *            Old height of this view. 
         */  
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
            mCoveflowCenter = getCenterOfCoverflow();  
            super.onSizeChanged(w, h, oldw, oldh);  
            Log.e("sequence", "onSizeChanged");  
        }  
      
        /** 
         * Transform the Image Bitmap by the Angle passed 
         *  
         * @param imageView 
         *            ImageView the ImageView whose bitmap we want to rotate 
         * @param t 
         *            transformation 
         * @param rotationAngle 
         *            the Angle by which to rotate the Bitmap 
         */  
        private void transformImageBitmap(ImageView child, Transformation t,  
                int rotationAngle, int d) {  
            mCamera.save();  
            final Matrix imageMatrix = t.getMatrix();  
            final int imageHeight = child.getLayoutParams().height;  
            final int imageWidth = child.getLayoutParams().width;  
            final int rotation = Math.abs(rotationAngle);  
            mCamera.translate(0.0f, 0.0f, 100.0f);  
            // As the angle of the view gets less, zoom in  
            if (rotation <= mMaxRotationAngle) {  
                float zoomAmount = (float) (mMaxZoom + (rotation * 1.5));  
                mCamera.translate(0.0f, 0.0f, zoomAmount);  
                if (mCircleMode) {  
                    if (rotation < 40)  
                        mCamera.translate(0.0f, 155, 0.0f);  
                    else  
                        mCamera.translate(0.0f, (255 - rotation * 2.5f), 0.0f);  
                }  
                if (mAlphaMode) {  
                    ((ImageView) (child)).setAlpha((int) (255 - rotation * 2.5));  
                }  
            }  
            mCamera.rotateY(rotationAngle);  
            mCamera.getMatrix(imageMatrix);  
      
            imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));  
            imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));  
            mCamera.restore();  
            Log.e("sequence", "transformImageBitmap");  
        }  
    }  

          4、圖片介面卡:ImageAdapter。這裡,我改寫了getView方法,把圖片按照一定比例進行縮放,防止圖片過大,超出螢幕而導致報錯。

     package com.myandroid.test;  
    import java.io.InputStream;  
    import android.content.Context;  
    import android.content.res.Resources;  
    import android.graphics.Bitmap;  
    import android.graphics.BitmapFactory;  
    import android.graphics.Matrix;  
    import android.graphics.drawable.BitmapDrawable;  
    import android.view.View;  
    import android.view.ViewGroup;  
    import android.widget.BaseAdapter;  
    import android.widget.Gallery;  
    import android.widget.ImageView;  
    public class ImageAdapter extends BaseAdapter {  
        private Context context;  
        private Integer[] images;  
        public ImageAdapter(Context context, Integer[] imageIds) {  
            this.context = context;  
            this.images = imageIds;  
        }  
          
        @Override  
        public int getCount() {  
            // TODO Auto-generated method stub  
            return images.length;  
        }  
      
        @Override  
        public Object getItem(int position) {  
            // TODO Auto-generated method stub  
            return position;  
        }  
      
        @Override  
        public long getItemId(int position) {  
            // TODO Auto-generated method stub  
            return position;  
        }  
      
        @Override  
        public View getView(int position, View convertView, ViewGroup parent) {  
              
             ImageView imageView = new ImageView(context);  
             //建立BitMap物件,用於顯示圖片     
             Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(),  
                     images[position]);     
             Matrix matrix = new Matrix();   //矩陣,用於圖片比例縮放     
             matrix.postScale((float)80/bitmap.getWidth(),   
                     (float)60/bitmap.getHeight());    //設定高寬比例(三維矩陣)  
             //圖片不能超出螢幕範圍,否則報錯,這裡進行縮小  
             Bitmap newBmp = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(),  
                     bitmap.getHeight(), matrix, true);      
             imageView.setImageBitmap(MyImgView.createReflectedImage(newBmp));  
             imageView.setLayoutParams(new Gallery.LayoutParams(80, 60));  
      
             return imageView;  
        }  
      
    }  

好了!核心程式碼已經搞定。。。