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

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

vc28xqzP6sfp0rPD5qOs06a4w8rHtNPSu7j2QWN0aXZpdHnM+Neqtb3B7c3i0ru49kFjdGl2aXR5o6zTprjDzbzGrM/qx+nSs8Pm0rLT0LrctuCy2df3o6zTw1ZpZXe78tXfRGlhbG9nsrvKx7rcusOho8v50tTP1tTaxNG1477NysejrMjnus7KubXDx7DSu7j2vefD5rXESW1hZ2VWaWV31NrB7c3i0ru49r3nw+bX9sv1t8XH0Ljutq+7raGjPC9wPgo8cD7Su7Djy/XC1L3nw+a1xEltYWdlVmlld7XEysfI58nPzbzL+cq+tcTV/be90M61xKOssqLH0srHQ0VOVEVSX0NST1DL9bfFyvTQ1LXEoaNDRU5URVJfQ1JPUMr00NS74bW81sJJbWFnZVZpZXfW0M/Uyr61xEJpdG1hcNPQsbvH0LjutO+1vczus+S1xNCnufuhozwvcD4KPHA+tvjP6sfp0rPD5rXESW1hZ2VWaWV30ruw47a8ysdGSVRfQ0VOVEVStcTL9bfFyvTQ1KGjy/nS1NKqsaPWpNXiuPbM+Neqtq+7rbXEwfezqaOs0qrX9sjnz8K1xLHku6+jujwvcD4KPHA+MaGiQml0bWFwtcTL9bfFo6zS8s6qy/XC1M28us3P6sfpzby1xMv1t8WxyMD9v8+2qLK70rvR+TwvcD4KPHA+MqGiQml0bWFwzrvWw7XExr3SxqOs0vLOqsv1wtTNvLXEzrvWw8rHsrvIt7aotcSjrM7Sw8fSqsq5y/vGvdLGtb3W0LzkPC9wPgo8cD4zoaJCaXRtYXC1xMfQuO6jrNLyzqpDRU5URVJfQ1JPUMrHx9C47rn9tcOjrLb4RklUX0NFTlRFUsrHw7vT0MfQuO61xKOsxMfDtMG9t/nNvM/Uyr61xMTayN3H+NPyyseyu82stcSjrMv50tTSstKqz9TKvsf40/K1xMa9u6yx5Lu7oaM8L3A+CjxwPjxicj4KPC9wPgo8cD7Sqs3qs8nJz8PmtcTQp7n7o6zI57n7taW1pcrH1ri21EltYWdlVmlld9f20ru49ravu62x5Lu7o6zO0r71tcPKx83qs8myu8HL1eK49tKqx/O1xKGjy/nS1NfUvLrW2NC0wctJbWFnZVZpZXfAtM3qs8nJz8r2tcSx5Lu7oaM8L3A+CjxwPtaxvdPM+cnP1vfSqrXESW1hZ2VWaWV3PC9wPgo8cD48cHJlIGNsYXNzPQ=="brush:java;">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和mOriginalLocationYmOriginalLocationY = 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;@Overridepublic String toString() {return "[left:"+left+" top:"+top+" width:"+width+" height:"+height+"]";}@Overridepublic Object clone() throws CloneNotSupportedException {// TODO Auto-generated method stubreturn 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));}@Overrideprotected 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() {@Overridepublic 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() {@Overridepublic void onAnimationStart(Animator animation) {}@Overridepublic void onAnimationRepeat(Animator animation) {}@Overridepublic 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);}}@Overridepublic 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) 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) 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如下：