轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/39474553，本文出自：【張鴻洋的部落格】

1、背景

現在app中，圖片預覽功能肯定是少不了的，使用者基本已經形成條件反射，看到小圖，點選看大圖，看到大圖兩個手指開始進行放大，放大後，開始移動到指定部位~~~

我相信看圖的整個步驟，大家或者說使用者應該不希望被打斷把~~~“我擦，竟然不能放大，什麼玩意，卸了~~“ ， "我擦，竟然不能移動，留有何用，卸了~~"。

哈~所以對於圖片的預覽，一來，我們要讓使用者爽；二來，我們作為開發者，也得知道如何實現~~~

2、概述

想要做到圖片支援多點觸控，自由的進行縮放、平移，需要了解幾個知識點：Matrix , GestureDetector , ScaleGestureDetector 以及事件分發機制，ps:不會咋辦，不會你懂的。

1、Matrix

矩陣，看深入了都是3維矩陣的乘啊什麼的，怪麻煩的~~

其實這麼瞭解下就行了：

Matrix

資料結構：3維矩陣；

內部儲存：new Float[9] ; 內部就是個一維陣列，內部9個元素；可以進行setValues(float[] values)進行初始化

每個元素代表的意思：

{  MSCALE_X, MSKEW_X, MTRANS_X,                  MSKEW_Y, MSCALE_Y, MTRANS_Y,                  MPERSP_0, MPERSP_1, MPERSP_2  };  

字面上，應該能看出來哪個代表x方向縮放，哪個代表垂直方向的偏移量吧~~有不認識的3個，沒事，請無視。

操作

比如你想要設定matrix的偏移量為200，100

你可以這麼寫：

Matrix transMatrix = new Matrix();  float[] values = new float[] { 1.0, 0, 200, 0, 1.0, 100, 0, 0, 1.0 };  transMatrix.setValues(values);

如果需要在旋轉30度，放大兩倍~~

這麼寫其實怪麻煩的~~

Matrix提供了一些常用的API：例如我們可以這麼寫：

Matrix transMatrix = new Matrix();  transMatrix.postTranslate(200, 100);

如何獲取值：

當然了，我們對一個Matrix進行了各種操作，一會postScale，一會postTranslate；那麼現在如何獲得當前的縮放比例：前面說setValues可以初始化，那麼getValues就能拿到當前矩陣的值，拿到的是個一維陣列，9個元素；再通過下標取對應值就可以。

比如我想知道現在x方向縮放比例：

public final float getScale() {  scaleMatrix.getValues(matrixValues);  return matrixValues[Matrix.MSCALE_X]; }

好了，知道這些就夠了~~

2、GestureDetector 

嗯，自己看API，能夠捕捉到長按、雙擊什麼的；用法會在例子中

3、ScaleGestureDetector 

嗯，有點像繼承來的，其實不是的，獨立的一個類~用於檢測縮放的手勢~~~用法會在例子中

3、實戰

為了大家更好的理解，我會獨立出每個功能，最後再整合到一起~~也方面大家對每個API的使用的學習。

1、自由的縮放

需求：當圖片載入時，將圖片在螢幕中居中；圖片寬或高大於螢幕的，縮小至螢幕大小；自由對圖片進行方法或縮小；

程式碼不是很長，直接貼程式碼了：

package com.zhy.view;import android.content.Context;import android.graphics.Matrix;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.util.Log;import android.view.MotionEvent;import android.view.ScaleGestureDetector;import android.view.ScaleGestureDetector.OnScaleGestureListener;import android.view.View;import android.view.View.OnTouchListener;import android.view.ViewTreeObserver;import android.widget.ImageView;public class ZoomImageView extends ImageView implements OnScaleGestureListener,  OnTouchListener, ViewTreeObserver.OnGlobalLayoutListener{ private static final String TAG = ZoomImageView.class.getSimpleName();  public static final float SCALE_MAX = 4.0f; /**  * 初始化時的縮放比例，如果圖片寬或高大於螢幕，此值將小於0  */ private float initScale = 1.0f; /**  * 用於存放矩陣的9個值  */ private final float[] matrixValues = new float[9]; private boolean once = true; /**  * 縮放的手勢檢測  */ private ScaleGestureDetector mScaleGestureDetector = null; private final Matrix mScaleMatrix = new Matrix(); public ZoomImageView(Context context) {  this(context, null); } public ZoomImageView(Context context, AttributeSet attrs) {  super(context, attrs);  super.setScaleType(ScaleType.MATRIX);  mScaleGestureDetector = new ScaleGestureDetector(context, this);  this.setOnTouchListener(this); } @Override public boolean onScale(ScaleGestureDetector detector) {  float scale = getScale();  float scaleFactor = detector.getScaleFactor();  if (getDrawable() == null)   return true;  /**   * 縮放的範圍控制   */  if ((scale < SCALE_MAX && scaleFactor > 1.0f)    || (scale > initScale && scaleFactor < 1.0f))  {   /**    * 最大值最小值判斷    */   if (scaleFactor * scale < initScale)   {    scaleFactor = initScale / scale;   }   if (scaleFactor * scale > SCALE_MAX)   {    scaleFactor = SCALE_MAX / scale;   }   /**    * 設定縮放比例    */   mScaleMatrix.postScale(scaleFactor, scaleFactor, getWidth() / 2,     getHeight() / 2);   setImageMatrix(mScaleMatrix);  }  return true; } @Override public boolean onScaleBegin(ScaleGestureDetector detector) {  return true; } @Override public void onScaleEnd(ScaleGestureDetector detector) { } @Override public boolean onTouch(View v, MotionEvent event) {  return mScaleGestureDetector.onTouchEvent(event); }  /**  * 獲得當前的縮放比例  *   * @return  */ public final float getScale() {  mScaleMatrix.getValues(matrixValues);  return matrixValues[Matrix.MSCALE_X]; } @Override protected void onAttachedToWindow() {  super.onAttachedToWindow();  getViewTreeObserver().addOnGlobalLayoutListener(this); } @SuppressWarnings("deprecation") @Override protected void onDetachedFromWindow() {  super.onDetachedFromWindow();  getViewTreeObserver().removeGlobalOnLayoutListener(this); } @Override public void onGlobalLayout() {  if (once)  {   Drawable d = getDrawable();   if (d == null)    return;   Log.e(TAG, d.getIntrinsicWidth() + " , " + d.getIntrinsicHeight());   int width = getWidth();   int height = getHeight();   // 拿到圖片的寬和高   int dw = d.getIntrinsicWidth();   int dh = d.getIntrinsicHeight();   float scale = 1.0f;   // 如果圖片的寬或者高大於螢幕，則縮放至螢幕的寬或者高   if (dw > width && dh <= height)   {    scale = width * 1.0f / dw;   }   if (dh > height && dw <= width)   {    scale = height * 1.0f / dh;   }   // 如果寬和高都大於螢幕，則讓其按按比例適應螢幕大小   if (dw > width && dh > height)   {    scale = Math.min(dw * 1.0f / width, dh * 1.0f / height);   }   initScale = scale;   // 圖片移動至螢幕中心      mScaleMatrix.postTranslate((width - dw) / 2, (height - dh) / 2);   mScaleMatrix     .postScale(scale, scale, getWidth() / 2, getHeight() / 2);   setImageMatrix(mScaleMatrix);   once = false;  } }}

1、我們在onGlobalLayout的回撥中，根據圖片的寬和高以及螢幕的寬和高，對圖片進行縮放以及移動至螢幕的中心。如果圖片很小，那就正常顯示，不放大了~

2、我們讓OnTouchListener的MotionEvent交給ScaleGestureDetector進行處理

@Override public boolean onTouch(View v, MotionEvent event) {  return mScaleGestureDetector.onTouchEvent(event); }

3、在onScale的回撥中對圖片進行縮放的控制，首先進行縮放範圍的判斷，然後設定mScaleMatrix的scale值

現在的效果：

1、小於螢幕的寬和高

2、大於螢幕的寬和高

真機錄的效果不太好~~湊合看~

現在已經能夠~~~隨意的放大縮小了~~~

原始碼點選下載

可是，可是，存在問題：

1、縮放的中心點，我們設定是固定的，螢幕中間

2、放大後，無法移動~

下面，我們先解決縮放的中心點問題，不能一直按螢幕中心麼，像我這樣的，我比較關注妹子的眼睛，我要放大那一塊~~~

2、設定縮放中心

1、單純的設定縮放中心

僅僅是設定中心很簡單，直接修改下中心點 ：

/**    * 設定縮放比例    */   mScaleMatrix.postScale(scaleFactor, scaleFactor,     detector.getFocusX(), detector.getFocusX());   setImageMatrix(mScaleMatrix);

但是，隨意的中心點放大、縮小，會導致圖片的位置的變化，最終導致，圖片寬高大於螢幕時，圖片與螢幕間出現白邊；圖片小於螢幕，但是不居中。

2、控制縮放時圖片顯示的範圍

所以我們在縮放的時候需要手動控制下範圍：

/**  * 在縮放時，進行圖片顯示範圍的控制  */ private void checkBorderAndCenterWhenScale() {  RectF rect = getMatrixRectF();  float deltaX = 0;  float deltaY = 0;  int width = getWidth();  int height = getHeight();  // 如果寬或高大於螢幕，則控制範圍  if (rect.width() >= width)  {   if (rect.left > 0)   {    deltaX = -rect.left;   }   if (rect.right < width)   {    deltaX = width - rect.right;   }  }  if (rect.height() >= height)  {   if (rect.top > 0)   {    deltaY = -rect.top;   }   if (rect.bottom < height)   {    deltaY = height - rect.bottom;   }  }  // 如果寬或高小於螢幕，則讓其居中  if (rect.width() < width)  {   deltaX = width * 0.5f - rect.right + 0.5f * rect.width();  }  if (rect.height() < height)  {   deltaY = height * 0.5f - rect.bottom + 0.5f * rect.height();  }  Log.e(TAG, "deltaX = " + deltaX + " , deltaY = " + deltaY);  mScaleMatrix.postTranslate(deltaX, deltaY); } /**  * 根據當前圖片的Matrix獲得圖片的範圍  *   * @return  */ private RectF getMatrixRectF() {  Matrix matrix = mScaleMatrix;  RectF rect = new RectF();  Drawable d = getDrawable();  if (null != d)  {   rect.set(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());   matrix.mapRect(rect);  }  return rect; }

在onScale裡面記得呼叫：

/**    * 設定縮放比例    */   mScaleMatrix.postScale(scaleFactor, scaleFactor,     detector.getFocusX(), detector.getFocusY());   checkBorderAndCenterWhenScale();   setImageMatrix(mScaleMatrix);

這樣就好了，可以自由的放大任何地方，並且不會出現邊界出現白邊，也能很好的讓圖片顯示在螢幕中間（當圖片寬或高小於螢幕）；

3、貼下佈局檔案

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <com.zhy.view.ZoomImageView        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:scaleType="matrix"        android:src="@drawable/xx" /></RelativeLayout>

眼睛是心靈的窗戶，咱們來放大看看，效果圖：

好了，到此我們的圖片隨意的方法縮小~~~已經完成了~~~如果只需要縮放功能的，就可以拿去用了~

由於篇幅原因，下一篇將繼續完善此View：

1、增加多點觸控時移動

2、增加雙擊變大，雙擊變小

3、與ViewPager一起使用時的事件衝突問題

（點選聯通下載，部分選擇電信無法下載）

----------------------------------------------------------------------------------------------------------

博主部分視訊已經上線，如果你不喜歡枯燥的文字，請猛戳（初錄，期待您的支援）：