android 縮放平移自定義View 顯示圖片

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>

 

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

 

好了，到此我們的圖片隨意的方法縮小~~~已經完成了~~~如果只需要縮放功能的，就可以拿去用了 不過碼農是需要拿來主義的 否則哪來的時間撩妹 今天心情好 再將 測試完后bug 修改后的代碼在貼下

 

package com.library.custom.view;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.Canvas;

import android.graphics.Matrix;

import android.graphics.RectF;

import android.graphics.drawable.Drawable;

import android.util.AttributeSet;

import android.view.GestureDetector;

import android.view.GestureDetector.SimpleOnGestureListener;

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 CustomZoomImageView extends ImageView implements OnTouchListener {

/**

* 最大放大比率（相較於原圖尺寸）

*/

public static float SCALE_MAX = 4.0f;

/**

* 最小放大比率（相較於原圖尺寸）

*/

private static float SCALE_MID = 2.0f;

/**

* 初始化時的縮放比例，如果圖片寬或高最小值大於屏幕，此值將小於1.0

*/

private float initScale = 1.0f;

private boolean once = true;

/**

* 用於存放矩陣的9個值

*/

private final float[] matrixValues = new float[9];

/**

* 縮放的手勢檢測

*/

private ScaleGestureDetector mScaleGestureDetector;

private Matrix mScaleMatrix = new Matrix();

/**

* 用於雙擊檢測

*/

private GestureDetector mGestureDetector;

private boolean isAutoScale;

private int mTouchSlop;

private float mLastX;

private float mLastY;

private boolean isCanDrag;

private int lastPointerCount;

private int oldwidth;

private int oldHeight;

/**

* 水平方向與View的邊距

*/

private int mHorizontalPadding;

/**

* 垂直方向與View的邊距

*/

private int mVerticalPadding;

public CustomZoomImageView(Context context) {

this(context, null);

}

public CustomZoomImageView(Context context, AttributeSet attrs) {

super(context, attrs);

setScaleType(ScaleType.MATRIX);

mGestureDetector = new GestureDetector(context, onDoubleListener);

mScaleGestureDetector = new ScaleGestureDetector(context, mOnScaleListener);

this.setOnTouchListener(this);

getViewTreeObserver().addOnGlobalLayoutListener(onLayoutListener);

}

private SimpleOnGestureListener onDoubleListener = new SimpleOnGestureListener() {

@Override

public boolean onDoubleTap(MotionEvent e) {

if (isAutoScale == true)

return true;

float x = e.getX();

float y = e.getY();

if (getScale() < SCALE_MID) {

CustomZoomImageView.this.postDelayed(

new AutoScaleRunnable(SCALE_MID, x, y), 16);

isAutoScale = true;

} else {

CustomZoomImageView.this.postDelayed(

new AutoScaleRunnable(initScale, x, y), 16);

isAutoScale = true;

}

return true;

}

};

private OnScaleGestureListener mOnScaleListener = new OnScaleGestureListener() {

@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,

detector.getFocusX(), detector.getFocusY());

checkBorder();

setImageMatrix(mScaleMatrix);

}

return true;

}

@Override

public boolean onScaleBegin(ScaleGestureDetector detector) {

return true;

}

@Override

public void onScaleEnd(ScaleGestureDetector detector) {

}

};

private ViewTreeObserver.OnGlobalLayoutListener onLayoutListener = new ViewTreeObserver.OnGlobalLayoutListener() {

@Override

public void onGlobalLayout() {

if (once) {

getViewTreeObserver().removeGlobalOnLayoutListener(onLayoutListener);

initScale();

once = false;

}

}

};

/**

* 自動縮放的任務

*

* @author zhy

*/

private class AutoScaleRunnable implements Runnable {

static final float BIGGER = 1.07f;

static final float SMALLER = 0.93f;

private float mTargetScale;

private float tmpScale;

/**

* 縮放的中心

*/

private float x;

private float y;

/**

* 傳入目標縮放值，根據目標值與當前值，判斷應該放大還是縮小

*

* @param targetScale

*/

public AutoScaleRunnable(float targetScale, float x, float y) {

this.mTargetScale = targetScale;

this.x = x;

this.y = y;

if (getScale() < mTargetScale) {

tmpScale = BIGGER;

} else {

tmpScale = SMALLER;

}

}

@Override

public void run() {

// 進行縮放

mScaleMatrix.postScale(tmpScale, tmpScale, x, y);

checkBorder();

setImageMatrix(mScaleMatrix);

final float currentScale = getScale();

// 如果值在合法范圍內，繼續縮放

if (((tmpScale > 1f) && (currentScale < mTargetScale))

|| ((tmpScale < 1f) && (mTargetScale < currentScale))) {

CustomZoomImageView.this.postDelayed(this, 16);

} else

// 設置為目標的縮放比例

{

final float deltaScale = mTargetScale / currentScale;

mScaleMatrix.postScale(deltaScale, deltaScale, x, y);

checkBorder();

setImageMatrix(mScaleMatrix);

isAutoScale = false;

}

}

}

/**

* 根據當前圖片的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;

}

@Override

public boolean onTouch(View v, MotionEvent event) {

if (mGestureDetector.onTouchEvent(event))

return true;

mScaleGestureDetector.onTouchEvent(event);

float x = 0, y = 0;

// 拿到觸摸點的個數

final int pointerCount = event.getPointerCount();

// 得到多個觸摸點的x與y均值

for (int i = 0; i < pointerCount; i++) {

x += event.getX(i);

y += event.getY(i);

}

x = x / pointerCount;

y = y / pointerCount;

/**

* 每當觸摸點發生變化時，重置mLasX , mLastY

*/

if (pointerCount != lastPointerCount) {

isCanDrag = false;

mLastX = x;

mLastY = y;

}

lastPointerCount = pointerCount;

switch (event.getAction()) {

case MotionEvent.ACTION_MOVE:

float dx = x - mLastX;

float dy = y - mLastY;

if (!isCanDrag) {

isCanDrag = isCanDrag(dx, dy);

}

if (isCanDrag) {

if (getDrawable() != null) {

RectF rectF = getMatrixRectF();

// 如果寬度小於屏幕寬度，則禁止左右移動

if (rectF.width() <= getWidth() - mHorizontalPadding * 2) {

dx = 0;

}

// 如果高度小雨屏幕高度，則禁止上下移動

if (rectF.height() <= getHeight() - mVerticalPadding * 2) {

dy = 0;

}

mScaleMatrix.postTranslate(dx, dy);

checkBorder();

setImageMatrix(mScaleMatrix);

}

}

mLastX = x;

mLastY = y;

break;

case MotionEvent.ACTION_UP:

case MotionEvent.ACTION_CANCEL:

lastPointerCount = 0;

break;

}

return true;

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

Drawable d = getDrawable();

if (d == null || getWidth() == 0 || once)

return;

initScale();

}

private void initScale() {

Drawable d = getDrawable();

if (d == null)

return;

if (oldwidth != d.getIntrinsicWidth() || oldHeight != d.getIntrinsicHeight()) {

oldwidth = d.getIntrinsicWidth();

oldHeight = d.getIntrinsicHeight();

// 垂直方向的邊距

int width = getWidth();

int height = getHeight();

mVerticalPadding = (height - (width - 2 * mHorizontalPadding)) / 2;

// 拿到圖片的寬和高

int dw = d.getIntrinsicWidth();

int dh = d.getIntrinsicHeight();

float scale = 1.0f;

int contentWidth = width - mHorizontalPadding * 2;

int contentHeight = height - mVerticalPadding * 2;

if (dw < contentWidth && dh >= contentHeight) {

scale = (width * 1.0f - mHorizontalPadding * 2) / dw;

}

if (dw < contentWidth && dh < contentHeight) {

float scaleW = (width * 1.0f - mHorizontalPadding * 2)

/ dw;

float scaleH = (height * 1.0f - mVerticalPadding * 2) / dh;

scale = Math.max(scaleW, scaleH);

}

if (dw >= contentWidth && dh >= contentHeight) {

float scaleW = (width * 1.0f - mHorizontalPadding * 2)

/ dw;

float scaleH = (height * 1.0f - mVerticalPadding * 2) / dh;

scale = Math.max(scaleW, scaleH);

}

if (dw >= contentWidth && dh < contentHeight) {

scale = (height * 1.0f - mVerticalPadding * 2) / dh;

}

initScale = scale;

SCALE_MID = initScale * 2;

SCALE_MAX = initScale * 4;

mScaleMatrix = new Matrix();

mScaleMatrix.postTranslate((width - dw) / 2, (height - dh) / 2);

mScaleMatrix.postScale(scale, scale, width / 2,

height / 2);

// 圖片移動至屏幕中心

setImageMatrix(mScaleMatrix);

}

}

/**

* 獲得當前的縮放比例

*

* @return

*/

public final float getScale() {

mScaleMatrix.getValues(matrixValues);

return matrixValues[Matrix.MSCALE_X];

}

/**

* 剪切圖片，返回剪切后的bitmap對象

*

* @return

*/

public Bitmap clip() {

Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(),

Bitmap.Config.ARGB_8888);

Canvas canvas = new Canvas(bitmap);

draw(canvas);

Bitmap chipResult = Bitmap.createBitmap(bitmap, mHorizontalPadding,

mVerticalPadding, getWidth() - 2 * mHorizontalPadding,

getWidth() - 2 * mHorizontalPadding);

if (chipResult != bitmap) {

bitmap.recycle();

}

return chipResult;

}

/**

* 邊界檢測

*/

private void checkBorder() {

RectF rect = getMatrixRectF();

float deltaX = 0;

float deltaY = 0;

int width = getWidth();

int height = getHeight();

// 如果寬或高大於屏幕，則控制范圍 ; 這里的0.001是因為精度丟失會產生問題，但是誤差一般很小，所以我們直接加了一個0.01

if (rect.width() + 0.01 >= width - 2 * mHorizontalPadding) {

if (rect.left > mHorizontalPadding) {

deltaX = -rect.left + mHorizontalPadding;

}

if (rect.right < width - mHorizontalPadding) {

deltaX = width - mHorizontalPadding - rect.right;

}

}

if (rect.height() + 0.01 >= height - 2 * mVerticalPadding) {

if (rect.top > mVerticalPadding) {

deltaY = -rect.top + mVerticalPadding;

}

if (rect.bottom < height - mVerticalPadding) {

deltaY = height - mVerticalPadding - rect.bottom;

}

}

mScaleMatrix.postTranslate(deltaX, deltaY);

}

/**

* 是否是拖動行為

*

* @param dx

* @param dy

* @return

*/

private boolean isCanDrag(float dx, float dy) {

return Math.sqrt((dx * dx) + (dy * dy)) >= mTouchSlop;

}

public void setHorizontalPadding(int mHorizontalPadding) {

this.mHorizontalPadding = mHorizontalPadding;

}

}