Android瀏覽圖片，點擊放大至全屏效果

最近做一個項目類似於QQ空間，做到照片瀏覽的功能，對於QQ空間中點擊圖片放大至全屏，感覺效果很贊，於是也做了個類似的效果。如下。

我不知道QQ那個是怎麼做的，我的思路如下：

首先，從圖片縮略界面跳轉到圖片詳情頁面，應該是從一個Activity跳轉到另外一個Activity，應該圖片詳情頁面也有很多操作，用View或者Dialog不是很好。所以現在難點就是，如何使得前一個界面的ImageView在另外一個界面做縮放切割動畫。

一般縮略界面的ImageView的是如上圖所示的正方形的，並且是CENTER_CROP縮放屬性的。CENTER_CROP屬性會導致ImageView中顯示的Bitmap有被切割達到填充的效果。

而詳情頁面的ImageView一般都是FIT_CENTER的縮放屬性。所以要保證這個跳轉動畫的流暢，要做如下的變化：

1、Bitmap的縮放，因爲縮略圖和詳情圖的縮放比例肯定不一樣

2、Bitmap位置的平移，因爲縮略圖的位置是不確定的，我們要使他平移到中間

3、Bitmap的切割，因爲CENTER_CROP是切割過得，而FIT_CENTER是沒有切割的，那麼兩幅圖顯示的內容區域是不同的，所以也要顯示區域的平滑變換。

要完成上面的效果，如果單單是指對ImageView做一個動畫變換，我覺得是完成不了這個要求的。所以自己重寫了ImageView來完成上述的變換。

直接貼上主要的ImageView

package com.roamer.ui.view;

import android.animation.Animator;
import android.animation.PropertyValuesHolder;
import android.animation.ValueAnimator;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.ImageView;

/**
 * 2d平滑變化的顯示圖片的ImageView
 * 僅限於用於:從一個ScaleType==CENTER_CROP的ImageView，切換到另一個ScaleType=
 * FIT_CENTER的ImageView，或者反之 (當然，得使用同樣的圖片最好)
 *
 * @author Dean Tao
 *
 */
public class SmoothImageView extends ImageView {

    private static final int STATE_NORMAL = 0;
    private static final int STATE_TRANSFORM_IN = 1;
    private static final int STATE_TRANSFORM_OUT = 2;
    private int mOriginalWidth;
    private int mOriginalHeight;
    private int mOriginalLocationX;
    private int mOriginalLocationY;
    private int mState = STATE_NORMAL;
    private Matrix mSmoothMatrix;
    private Bitmap mBitmap;
    private boolean mTransformStart = false;
    private Transfrom mTransfrom;
    private final int mBgColor = 0xFF000000;
    private int mBgAlpha = 0;
    private Paint mPaint;

    public SmoothImageView(Context context) {
        super(context);
        init();
    }

    public SmoothImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public SmoothImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        mSmoothMatrix = new Matrix();
        mPaint=new Paint();
        mPaint.setColor(mBgColor);
        mPaint.setStyle(Style.FILL);
//      setBackgroundColor(mBgColor);
    }

    public void setOriginalInfo(int width, int height, int locationX, int locationY) {
        mOriginalWidth = width;
        mOriginalHeight = height;
        mOriginalLocationX = locationX;
        mOriginalLocationY = locationY;
        // 因爲是屏幕座標，所以要轉換爲該視圖內的座標，因爲我所用的該視圖是MATCH_PARENT，所以不用定位該視圖的位置,如果不是的話，還需要定位視圖的位置，然後計算mOriginalLocationX和mOriginalLocationY
        mOriginalLocationY = mOriginalLocationY - getStatusBarHeight(getContext());
    }

    /**
     * 獲取狀態欄高度
     *
     * @return
     */
    public static int getStatusBarHeight(Context context) {
        Class<?> c = null;
        Object obj = null;
        java.lang.reflect.Field field = null;
        int x = 0;
        int statusBarHeight = 0;
        try {
            c = Class.forName("com.android.internal.R$dimen");
            obj = c.newInstance();
            field = c.getField("status_bar_height");
            x = Integer.parseInt(field.get(obj).toString());
            statusBarHeight = context.getResources().getDimensionPixelSize(x);
            return statusBarHeight;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return statusBarHeight;
    }

    /**
     * 用於開始進入的方法。 調用此方前，需已經調用過setOriginalInfo
     */
    public void transformIn() {
        mState = STATE_TRANSFORM_IN;
        mTransformStart = true;
        invalidate();
    }

    /**
     * 用於開始退出的方法。 調用此方前，需已經調用過setOriginalInfo
     */
    public void transformOut() {
        mState = STATE_TRANSFORM_OUT;
        mTransformStart = true;
        invalidate();
    }

    private class Transfrom {
        float startScale;// 圖片開始的縮放值
        float endScale;// 圖片結束的縮放值
        float scale;// 屬性ValueAnimator計算出來的值
        LocationSizeF startRect;// 開始的區域
        LocationSizeF endRect;// 結束的區域
        LocationSizeF rect;// 屬性ValueAnimator計算出來的值

        void initStartIn() {
            scale = startScale;
            try {
                rect = (LocationSizeF) startRect.clone();
            } catch (CloneNotSupportedException e) {
                e.printStackTrace();
            }
        }

        void initStartOut() {
            scale = endScale;
            try {
                rect = (LocationSizeF) endRect.clone();
            } catch (CloneNotSupportedException e) {
                e.printStackTrace();
            }
        }

    }

    /**
     * 初始化進入的變量信息
     */
    private void initTransform() {
        if (getDrawable() == null) {
            return;
        }
        if (mBitmap == null || mBitmap.isRecycled()) {
            mBitmap = ((BitmapDrawable) getDrawable()).getBitmap();
        }
        //防止mTransfrom重複的做同樣的初始化
        if (mTransfrom != null) {
            return;
        }
        if (getWidth() == 0 || getHeight() == 0) {
            return;
        }
        mTransfrom = new Transfrom();

        /** 下面爲縮放的計算 */
        /* 計算初始的縮放值，初始值因爲是CENTR_CROP效果，所以要保證圖片的寬和高至少1個能匹配原始的寬和高，另1個大於 */
        float xSScale = mOriginalWidth / ((float) mBitmap.getWidth());
        float ySScale = mOriginalHeight / ((float) mBitmap.getHeight());
        float startScale = xSScale > ySScale ? xSScale : ySScale;
        mTransfrom.startScale = startScale;
        /* 計算結束時候的縮放值，結束值因爲要達到FIT_CENTER效果，所以要保證圖片的寬和高至少1個能匹配原始的寬和高，另1個小於 */
        float xEScale = getWidth() / ((float) mBitmap.getWidth());
        float yEScale = getHeight() / ((float) mBitmap.getHeight());
        float endScale = xEScale < yEScale ? xEScale : yEScale;
        mTransfrom.endScale = endScale;

        /**
         * 下面計算Canvas Clip的範圍，也就是圖片的顯示的範圍，因爲圖片是慢慢變大，並且是等比例的，所以這個效果還需要裁減圖片顯示的區域
         * ，而顯示區域的變化範圍是在原始CENTER_CROP效果的範圍區域
         * ，到最終的FIT_CENTER的範圍之間的，區域我用LocationSizeF更好計算
         * ，他就包括左上頂點座標，和寬高，最後轉爲Canvas裁減的Rect.
         */
        /* 開始區域 */
        mTransfrom.startRect = new LocationSizeF();
        mTransfrom.startRect.left = mOriginalLocationX;
        mTransfrom.startRect.top = mOriginalLocationY;
        mTransfrom.startRect.width = mOriginalWidth;
        mTransfrom.startRect.height = mOriginalHeight;
        /* 結束區域 */
        mTransfrom.endRect = new LocationSizeF();
        float bitmapEndWidth = mBitmap.getWidth() * mTransfrom.endScale;// 圖片最終的寬度
        float bitmapEndHeight = mBitmap.getHeight() * mTransfrom.endScale;// 圖片最終的寬度
        mTransfrom.endRect.left = (getWidth() - bitmapEndWidth) / 2;
        mTransfrom.endRect.top = (getHeight() - bitmapEndHeight) / 2;
        mTransfrom.endRect.width = bitmapEndWidth;
        mTransfrom.endRect.height = bitmapEndHeight;

        mTransfrom.rect = new LocationSizeF();
    }

    private class LocationSizeF implements Cloneable{
        float left;
        float top;
        float width;
        float height;
        @Override
        public String toString() {
            return "[left:"+left+" top:"+top+" width:"+width+" height:"+height+"]";
        }

        @Override
        public Object clone() throws CloneNotSupportedException {
            // TODO Auto-generated method stub
            return super.clone();
        }

    }

    /* 下面實現了CENTER_CROP的功能 的Matrix，在優化的過程中，已經不用了 */
    private void getCenterCropMatrix() {
        if (getDrawable() == null) {
            return;
        }
        if (mBitmap == null || mBitmap.isRecycled()) {
            mBitmap = ((BitmapDrawable) getDrawable()).getBitmap();
        }
        /* 下面實現了CENTER_CROP的功能 */
        float xScale = mOriginalWidth / ((float) mBitmap.getWidth());
        float yScale = mOriginalHeight / ((float) mBitmap.getHeight());
        float scale = xScale > yScale ? xScale : yScale;
        mSmoothMatrix.reset();
        mSmoothMatrix.setScale(scale, scale);
        mSmoothMatrix.postTranslate(-(scale * mBitmap.getWidth() / 2 - mOriginalWidth / 2), -(scale * mBitmap.getHeight() / 2 - mOriginalHeight / 2));
    }

    private void getBmpMatrix() {
        if (getDrawable() == null) {
            return;
        }
        if (mTransfrom == null) {
            return;
        }
        if (mBitmap == null || mBitmap.isRecycled()) {
            mBitmap = ((BitmapDrawable) getDrawable()).getBitmap();
        }
        /* 下面實現了CENTER_CROP的功能 */
        mSmoothMatrix.setScale(mTransfrom.scale, mTransfrom.scale);
        mSmoothMatrix.postTranslate(-(mTransfrom.scale * mBitmap.getWidth() / 2 - mTransfrom.rect.width / 2),
                -(mTransfrom.scale * mBitmap.getHeight() / 2 - mTransfrom.rect.height / 2));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (getDrawable() == null) {
            return; // couldn't resolve the URI
        }

        if (mState == STATE_TRANSFORM_IN || mState == STATE_TRANSFORM_OUT) {
            if (mTransformStart) {
                initTransform();
            }
            if (mTransfrom == null) {
                super.onDraw(canvas);
                return;
            }

            if (mTransformStart) {
                if (mState == STATE_TRANSFORM_IN) {
                    mTransfrom.initStartIn();
                } else {
                    mTransfrom.initStartOut();
                }
            }

            if(mTransformStart){
                Log.d("Dean", "mTransfrom.startScale:"+mTransfrom.startScale);
                Log.d("Dean", "mTransfrom.startScale:"+mTransfrom.endScale);
                Log.d("Dean", "mTransfrom.scale:"+mTransfrom.scale);
                Log.d("Dean", "mTransfrom.startRect:"+mTransfrom.startRect.toString());
                Log.d("Dean", "mTransfrom.endRect:"+mTransfrom.endRect.toString());
                Log.d("Dean", "mTransfrom.rect:"+mTransfrom.rect.toString());
            }

            mPaint.setAlpha(mBgAlpha);
            canvas.drawPaint(mPaint);

            int saveCount = canvas.getSaveCount();
            canvas.save();
            // 先得到圖片在此刻的圖像Matrix矩陣
            getBmpMatrix();
            canvas.translate(mTransfrom.rect.left, mTransfrom.rect.top);
            canvas.clipRect(0, 0, mTransfrom.rect.width, mTransfrom.rect.height);
            canvas.concat(mSmoothMatrix);
            getDrawable().draw(canvas);
            canvas.restoreToCount(saveCount);
            if (mTransformStart) {
                mTransformStart=false;
                startTransform(mState);
            }
        } else {
            //當Transform In變化完成後，把背景改爲黑色，使得Activity不透明
            mPaint.setAlpha(255);
            canvas.drawPaint(mPaint);
            super.onDraw(canvas);
        }
    }

    private void startTransform(final int state) {
        if (mTransfrom == null) {
            return;
        }
        ValueAnimator valueAnimator = new ValueAnimator();
        valueAnimator.setDuration(300);
        valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        if (state == STATE_TRANSFORM_IN) {
            PropertyValuesHolder scaleHolder = PropertyValuesHolder.ofFloat("scale", mTransfrom.startScale, mTransfrom.endScale);
            PropertyValuesHolder leftHolder = PropertyValuesHolder.ofFloat("left", mTransfrom.startRect.left, mTransfrom.endRect.left);
            PropertyValuesHolder topHolder = PropertyValuesHolder.ofFloat("top", mTransfrom.startRect.top, mTransfrom.endRect.top);
            PropertyValuesHolder widthHolder = PropertyValuesHolder.ofFloat("width", mTransfrom.startRect.width, mTransfrom.endRect.width);
            PropertyValuesHolder heightHolder = PropertyValuesHolder.ofFloat("height", mTransfrom.startRect.height, mTransfrom.endRect.height);
            PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofInt("alpha", 0, 255);
            valueAnimator.setValues(scaleHolder, leftHolder, topHolder, widthHolder, heightHolder, alphaHolder);
        } else {
            PropertyValuesHolder scaleHolder = PropertyValuesHolder.ofFloat("scale", mTransfrom.endScale, mTransfrom.startScale);
            PropertyValuesHolder leftHolder = PropertyValuesHolder.ofFloat("left", mTransfrom.endRect.left, mTransfrom.startRect.left);
            PropertyValuesHolder topHolder = PropertyValuesHolder.ofFloat("top", mTransfrom.endRect.top, mTransfrom.startRect.top);
            PropertyValuesHolder widthHolder = PropertyValuesHolder.ofFloat("width", mTransfrom.endRect.width, mTransfrom.startRect.width);
            PropertyValuesHolder heightHolder = PropertyValuesHolder.ofFloat("height", mTransfrom.endRect.height, mTransfrom.startRect.height);
            PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofInt("alpha", 255, 0);
            valueAnimator.setValues(scaleHolder, leftHolder, topHolder, widthHolder, heightHolder, alphaHolder);
        }

        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public synchronized void onAnimationUpdate(ValueAnimator animation) {
                mTransfrom.scale = (Float) animation.getAnimatedValue("scale");
                mTransfrom.rect.left = (Float) animation.getAnimatedValue("left");
                mTransfrom.rect.top = (Float) animation.getAnimatedValue("top");
                mTransfrom.rect.width = (Float) animation.getAnimatedValue("width");
                mTransfrom.rect.height = (Float) animation.getAnimatedValue("height");
                mBgAlpha = (Integer) animation.getAnimatedValue("alpha");
                invalidate();
                ((Activity)getContext()).getWindow().getDecorView().invalidate();
            }
        });
        valueAnimator.addListener(new ValueAnimator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                /*
                 * 如果是進入的話，當然是希望最後停留在center_crop的區域。但是如果是out的話，就不應該是center_crop的位置了
                 * ， 而應該是最後變化的位置，因爲當out的時候結束時，不回覆視圖是Normal，要不然會有一個突然閃動回去的bug
                 */
                // TODO 這個可以根據實際需求來修改
                if (state == STATE_TRANSFORM_IN) {
                    mState = STATE_NORMAL;
                }
                if (mTransformListener != null) {
                    mTransformListener.onTransformComplete(state);
                }
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }
        });
        valueAnimator.start();
    }

    public void setOnTransformListener(TransformListener listener) {
        mTransformListener = listener;
    }

    private TransformListener mTransformListener;

    public static interface TransformListener {
        /**
         *
         * @param mode
         *            STATE_TRANSFORM_IN 1 ,STATE_TRANSFORM_OUT 2
         */
        void onTransformComplete(int mode);// mode 1
    }

}

使用的時候，從前一個Activity傳遞到詳情Activity下面幾個主要的信息：

Intent intent = new Intent(MainActivity.this, SpaceImageDetailActivity.class);
                    intent.putExtra("images", (ArrayList<String>) datas);//非必須
                    intent.putExtra("position", position);
                    int[] location = new int[2];
                    imageView.getLocationOnScreen(location);
                    intent.putExtra("locationX", location[0]);//必須
                    intent.putExtra("locationY", location[1]);//必須

                    intent.putExtra("width", imageView.getWidth());//必須
                    intent.putExtra("height", imageView.getHeight());//必須
                    startActivity(intent);
                    overridePendingTransition(0, 0);

在詳情Activity接受到這些參數，並對SmoothImageView初始化位置信息，然後就可以進行變化了。

mDatas = (ArrayList<String>) getIntent().getSerializableExtra("images");
mPosition = getIntent().getIntExtra("position", 0);
mLocationX = getIntent().getIntExtra("locationX", 0);
mLocationY = getIntent().getIntExtra("locationY", 0);
mWidth = getIntent().getIntExtra("width", 0);
mHeight = getIntent().getIntExtra("height", 0);

imageView = new SmoothImageView(this);
imageView.setOriginalInfo(mWidth, mHeight, mLocationX, mLocationY);
imageView.transformIn();
imageView.setLayoutParams(new ViewGroup.LayoutParams(-1, -1));
imageView.setScaleType(ScaleType.FIT_CENTER);
setContentView(imageView);
ImageLoader.getInstance().displayImage(mDatas.get(mPosition), imageView);

上面的就已經完成了圖片的縮放效果，但是還需要設置下Activity透明的風格，才能使得alpha效果體驗出來，用戶體驗更好。

對Activity設置如下風格，另外說明，在SmoothImageView中沒有定位視圖的位置，只是做了對狀態欄的處理，所以要設置Activity 爲NotitleBar，具體style如下：

<style name="IMTheme.Transparent" >
       <item name="android:windowBackground">@android:color/transparent</item>
       <item name="android:windowIsTranslucent">true</item>
       <item name="android:windowNoTitle">true</item>
       <item name="android:windowContentOverlay">@null</item>
lt;/style>