手把手教你打造支持手勢放大縮小的ImageView

寫在前面

最近有了新的任務(wù),學(xué)習(xí)的時(shí)間比以前少了不少,Java回爐的文估計(jì)是得緩緩了,不過每周一篇盡量保質(zhì)保量。最近感覺我文寫的有點(diǎn)不好,因?yàn)槲覍憱|西除非必要,不然概念性的東西我基本上都是一筆帶過……最近感覺這對看我文的人好像不是很友好,恩,我決定改一改,盡量寫的詳細(xì)而有趣一些。


1.jpg

好了廢話時(shí)間過了,前面也說了最近有了新任務(wù),我現(xiàn)在是搞定用戶信息這一塊。一般來說現(xiàn)在用戶都會有個(gè)頭像什么的,光有個(gè)頭像還不夠,你還得能點(diǎn)擊看個(gè)大圖吧?光看個(gè)大圖也不夠啊,不說多的,你最起碼得支持用戶手勢放大縮小什么的吧?當(dāng)時(shí)腦海里第一個(gè)想到的是PhotoView,不過整個(gè)項(xiàng)目好像也只有這一塊涉及到用戶手勢放大縮小,算了,自己實(shí)現(xiàn)一個(gè)吧。當(dāng)然了,經(jīng)常刷hongyang大神博客的我自然知道hongyang大神博客里有寫過這東西。所以趁周末有空果斷刷之~

實(shí)現(xiàn)思路

做一個(gè)東西之前我們肯定要分析需求,分析完之后我們就可以利用我們會的,或者知道可以實(shí)現(xiàn)但是現(xiàn)在不會的去嘗試解決這個(gè)需求。放大縮小圖片,腦子里第一個(gè)反應(yīng)就是矩陣,Android里貌似有個(gè)可以通過矩陣處理圖像的東西,不過說真的,以前也沒有用過幾次,不過好歹有個(gè)想法了。至于讓圖片跟隨用戶手勢放大縮小,肯定是需要支持手勢檢測了。恩,我的思路暫時(shí)就是這樣了,接下來先去了解一下手勢檢測。

手勢檢測

當(dāng)用戶觸摸屏幕時(shí),會產(chǎn)生許多手勢,down、up、scroll、fling等。一般情況下我們通過實(shí)現(xiàn)OnTouchListener是可以滿足我們處理一般手勢的需求的,說實(shí)話,實(shí)現(xiàn)手勢放大縮小的ImageView是可以通過自己在OnTouch方法里面處理距離,滑動(dòng)什么的去算縮放的。但是人總是要對自己好一點(diǎn),如果有更簡單的實(shí)現(xiàn)方式為什么不用呢?Android中提供了GestureDetector給程序員去判斷不同的手勢。另外也提供了** ScaleGestureDetector **來檢測縮放手勢。雖然后者很像前者的子類,但事實(shí)上并不是,后者也是一個(gè)獨(dú)立的類。下面用一個(gè)簡單的demo來演示一下這兩者的觸發(fā)。

package com.example.luo_pc.view;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements GestureDetector.OnGestureListener,
        View.OnClickListener, ScaleGestureDetector.OnScaleGestureListener {

    //定義手勢檢測
    GestureDetector detector = null;
    //縮放檢測
    ScaleGestureDetector scDetector = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button testGet = (Button) findViewById(R.id.bt_test_ges);
        Button testScges = (Button) findViewById(R.id.bt_test_scges);
        testGet.setOnClickListener(this);
        testScges.setOnClickListener(this);
        detector = new GestureDetector(this, this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.bt_test_ges:
                detector = new GestureDetector(this, this);
                scDetector = null;
                break;
            case R.id.bt_test_scges:
                scDetector = new ScaleGestureDetector(this, this);
                detector = null;
                break;
        }
    }

    //-------------------------implement OnGestureListener's method-----------------------//

    @Override
    public boolean onTouchEvent(MotionEvent me) {
        if (detector != null)
            return detector.onTouchEvent(me);
        else
            return scDetector.onTouchEvent(me);
    }

    //用戶按下屏幕就會觸發(fā)
    @Override
    public boolean onDown(MotionEvent arg0) {
        Toast.makeText(this, "onDown", Toast.LENGTH_SHORT).show();
        return false;
    }

    //用戶按下觸摸屏、快速移動(dòng)后松開,由1個(gè)MotionEvent ACTION_DOWN,    
    //多個(gè)ACTION_MOVE, 1個(gè)ACTION_UP觸發(fā)    
    //e1:第1個(gè)ACTION_DOWN MotionEvent    
    //e2:最后一個(gè)ACTION_MOVE MotionEvent    
    //velocityX:X軸上的移動(dòng)速度,像素/秒    
    //velocityY:Y軸上的移動(dòng)速度,像素/秒    
    @Override
    public boolean onFling(MotionEvent arg0, MotionEvent arg1, float arg2,float arg3) {
        Toast.makeText(this, "onFling", Toast.LENGTH_SHORT).show();
        return false;
    }

    //用戶長按觸摸屏,由多個(gè)MotionEvent ACTION_DOWN觸發(fā)   
    @Override
    public void onLongPress(MotionEvent arg0) {
        Toast.makeText(this, "onLongPress", Toast.LENGTH_SHORT).show();
    }

    //用戶按下觸摸屏,并拖動(dòng),由1個(gè)MotionEvent ACTION_DOWN, 多個(gè)ACTION_MOVE觸發(fā)   
    @Override
    public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,
                            float arg3) {
        Toast.makeText(this, "onScroll", Toast.LENGTH_SHORT).show();
        return false;
    }

    //如果是按下的時(shí)間超過瞬間,而且在按下的時(shí)候沒有松開或者是拖動(dòng)的,
    // 那么onShowPress就會執(zhí)行 
    @Override
    public void onShowPress(MotionEvent arg0) {
        Toast.makeText(this, "onShowPress", Toast.LENGTH_SHORT).show();
    }

    //用戶(輕觸觸摸屏后)松開,由一個(gè)1個(gè)MotionEvent ACTION_UP觸發(fā)    
    @Override
    public boolean onSingleTapUp(MotionEvent arg0) {
        Toast.makeText(this, "onSingleTapUp", Toast.LENGTH_SHORT).show();
        return true;
    }

    //-----------------------implement OnScaleGestureListener's method----------------------//

    @Override
    public boolean onScale(ScaleGestureDetector detector) {
        Toast.makeText(MainActivity.this, "onScale", Toast.LENGTH_SHORT).show();
        return true;
    }

    @Override
    public boolean onScaleBegin(ScaleGestureDetector detector) {
        Toast.makeText(MainActivity.this, "onScaleBegin", Toast.LENGTH_SHORT).show();
        return true;
    }

    @Override
    public void onScaleEnd(ScaleGestureDetector detector) {
        Toast.makeText(MainActivity.this, "onScaleEnd", Toast.LENGTH_SHORT).show();
    }
}

圖方便,我將整個(gè)MainActivity搬上來了,你可以直接復(fù)制,然后加上對應(yīng)的布局和導(dǎo)包就行了,接下來看一下運(yùn)行現(xiàn)象。

GestureDetector

上面測試的是GestureDetector,接下來測試一下ScaleGestureDetector

ScaleGestureDetector

如果你想要測試更多,比如GestureDetector里另外一個(gè)接口可以把我的代碼復(fù)制一下改一改就好了,這了就不作過多的贅述了,代碼會說話。

Matrix

這里只對Matrix作簡單的介紹。Android中Matrix是一個(gè)3 x 3的矩陣(說到矩陣都是二維的,不要看到3 x 3就想到3維去了)。先看一下Matrix的getValues和setValues方法:

    /** Copy 9 values from the matrix into the array.
    */
    public void getValues(float[] values) {
        if (values.length < 9) {
            throw new ArrayIndexOutOfBoundsException();
        }
        native_getValues(native_instance, values);
    }

    /** Copy 9 values from the array into the matrix.
        Depending on the implementation of Matrix, these may be
        transformed into 16.16 integers in the Matrix, such that
        a subsequent call to getValues() will not yield exactly
        the same values.
    */
    public void setValues(float[] values) {
        if (values.length < 9) {
            throw new ArrayIndexOutOfBoundsException();
        }
        native_setValues(native_instance, values);
    }

得到或者設(shè)置一個(gè)有9個(gè)元素的數(shù)組,繼續(xù)往下看發(fā)現(xiàn)調(diào)用的是個(gè)native修飾方法,好吧,不繼續(xù)看了,了解以上也差不多夠了。其內(nèi)部有

Matrix

Matrix的對圖像的處理可分為四類基本變換:
Translate 平移變換
Rotate 旋轉(zhuǎn)變換
Scale 縮放變換
Skew 錯(cuò)切變換

從字面上理解,矩陣中的MSCALE用于處理縮放變換,MSKEW用于處理錯(cuò)切變換,MTRANS用于處理平移變換,MPERSP用于處理透視變換。實(shí)際中當(dāng)然不能完全按照字面上的說法去理解Matrix。

從字面上理解那9個(gè)量,什么X軸縮放,什么扭曲,什么X軸偏移量,還帶不認(rèn)識的,沒關(guān)系,我們現(xiàn)在做的操作比較簡單,不需要用到那么多的參數(shù)。比如我們現(xiàn)在想設(shè)置偏移量(200,200)
我們可以

Matrix matrix = new Matrix();
martrix.postTranslate(200,200);

實(shí)踐

寫完上面的東西,我已經(jīng)差不多是個(gè)廢人了……


我已經(jīng)差不多是個(gè)廢人了
我已經(jīng)差不多是個(gè)廢人了

畢竟當(dāng)年線性代數(shù)學(xué)的不咋滴,加上之前雖然有用過Matrix但是并不是很多,接下來進(jìn)入喜聞樂見的實(shí)戰(zhàn)時(shí)間。首先是不加任何限制,直接實(shí)現(xiàn)

package com.example.luo_pc.view.CustomView;

/**
 * Created by Luo_xiasuhuei321@163.com on 2016/9/24.
 * desc:
 */

import android.content.Context;
import android.graphics.Matrix;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.View;
import android.widget.ImageView;

public class ZZoomImageView extends ImageView implements View.OnTouchListener, ScaleGestureDetector.OnScaleGestureListener {
    //suppress the unused warning because maybe it will be used sometime later
    @SuppressWarnings("unused")
    private static final String TAG = "ZZoomImageView";

    /**
     * 最大放大倍數(shù)
     */
//    public static final float SCALE_MAX = 4.0f;

    /**
     * 默認(rèn)縮放
     */
//    private float initScale = 1.0f;

    /**
     * 手勢檢測
     */
    ScaleGestureDetector scaleGestureDetector = null;

    Matrix scaleMatrix = new Matrix();

    /**
     * 處理矩陣的9個(gè)值
     */
//    float[] martixValue = new float[9];

    public ZZoomImageView(Context context) {
        this(context, null);
    }

    public ZZoomImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ZZoomImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setScaleType(ScaleType.MATRIX);
        scaleGestureDetector = new ScaleGestureDetector(context, this);
        this.setOnTouchListener(this);
    }

    /**
     * 獲取當(dāng)前縮放比例
     */
//    public float getScale() {
//        scaleMatrix.getValues(martixValue);
//        return martixValue[Matrix.MSCALE_X];
//    }

    //--------------------------implement OnTouchListener----------------------------//

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

    //----------------------implement OnScaleGestureListener------------------------//

    @Override
    public boolean onScale(ScaleGestureDetector detector) {
//        float scale = getScale();
        float scaleFactor = detector.getScaleFactor();
        if (getDrawable() == null)
            return true;
//        Log.e(TAG,"君甚咸,此魚何能及君也?");
//        if (scaleFactor * scale < initScale)
//            scaleFactor = initScale / scale;
//        if (scaleFactor * scale > SCALE_MAX)
//            scaleFactor = SCALE_MAX / scale;
        //設(shè)置縮放比例
        scaleMatrix.postScale(scaleFactor, scaleFactor, getWidth() / 2, getHeight() / 2);
        setImageMatrix(scaleMatrix);
        return true;
    }

    @Override
    public boolean onScaleBegin(ScaleGestureDetector detector) {
        return true;
    }

    @Override
    public void onScaleEnd(ScaleGestureDetector detector) {

    }
}

看一下跑起來是啥樣的

GIF.gif

將圖片放到中心

嗯,我要是把這個(gè)用在項(xiàng)目里,老大要是看到了估計(jì)我就沒有以后了……首先,是沒有限制,可以無限縮小放大,第二是縮放中心點(diǎn),默認(rèn)都是ImageView中心,最后是剛開始加載出來我的圖片有部分沒加載,而且圖片不在imageview的中心!我ImageView設(shè)置的可是倆match_parent啊。

坑爹.png

有問題沒事,我們一樣一樣,慢慢解決。首先是圖片位置,圖片位置的設(shè)定我們可以在圖片加載的時(shí)候?qū)⑺诺絀mageView的中心去,同樣在這個(gè)過程中,我們可以判斷圖片的大小,如果圖片大于ImageView尺寸則將其大小調(diào)整至ImageView的大小。首先我們在ImageView的構(gòu)造器中可能是無法獲取到ImageView和圖片的真實(shí)尺寸的,我們可以通過ViewTreeObserver在布局完成可以獲取真實(shí)尺寸的時(shí)候完成對圖片的調(diào)整。而OnGlobalLayoutListener是ViewTreeObserver的內(nèi)部接口,當(dāng)一個(gè)視圖樹的布局發(fā)生改變時(shí),可以被ViewTreeObserver監(jiān)聽到。所以新增代碼如下:

/**
 * 首先讓我們的類實(shí)現(xiàn)OnGlobalLayoutListener接口
public class ZZoomImageView extends ImageView implements View.OnTouchListener, ScaleGestureDetector.OnScaleGestureListener,
        ViewTreeObserver.OnGlobalLayoutListener

然后我們在此控件的onAttachedToWindow中設(shè)置監(jiān)聽,在onDetachedFromWindow移除這個(gè)監(jiān)聽:

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        getViewTreeObserver().addOnGlobalLayoutListener(this);
    }

    //suppress deprecate warning because i have dealt with it 
    @Override
    @SuppressWarnings("deprecation")
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (Build.VERSION.SDK_INT > Build.VERSION_CODES.JELLY_BEAN) {
            getViewTreeObserver().removeOnGlobalLayoutListener(this);
        }
        getViewTreeObserver().removeGlobalOnLayoutListener(this);
    }

最后是最重要的,在回調(diào)中對圖片進(jìn)行處理:

    @Override
    public void onGlobalLayout() {
        if (!once)
            return;
        Drawable d = getDrawable();
        if (d == null)
            return;
        //獲取imageview寬高
        int width = getWidth();
        int height = getHeight();

        //獲取圖片寬高
        int imgWidth = d.getIntrinsicWidth();
        int imgHeight = d.getIntrinsicHeight();

        float scale = 1.0f;

        //如果圖片的寬或高大于屏幕,縮放至屏幕的寬或者高
        if (imgWidth > width && imgHeight <= height)
            scale = (float) width / imgWidth;
        if (imgHeight > height && imgWidth <= width)
            scale = (float) height / imgHeight;
        //如果圖片寬高都大于屏幕,按比例縮小
        if (imgWidth > width && imgHeight > height)
            scale = Math.min((float) imgWidth / width, (float) imgHeight / height);
        Log.e(TAG, "scale" + scale);
        //將圖片移動(dòng)至屏幕中心
        scaleMatrix.postTranslate((width - imgWidth) / 2, (height - imgHeight) / 2);
        scaleMatrix.postScale(scale, scale, getWidth() / 2, getHeight() / 2);
        setImageMatrix(scaleMatrix);
        once = false;
    }

對圖片的處理核心思想就是判斷圖片尺寸和當(dāng)前控件尺寸,圖片尺寸比控件大,就對圖片進(jìn)行縮放處理,并且最后將圖片移動(dòng)至控件中心處。代碼上的注釋寫的都很詳細(xì)了,各位看官可以自行閱讀?,F(xiàn)在來看看變成啥樣了

ZZ-改

限制縮放

很好圖是到中間去了,那現(xiàn)在的問題就是無限縮小和放大的問題。這個(gè)問題解決思路是很簡單的,做個(gè)限制就行了。

嗯,新增如下幾個(gè)變量:

    /**
     * 最大放大倍數(shù)
     */
    public static final float SCALE_MAX = 4.0f;

    /**
     * 默認(rèn)縮放
     */
    private float initScale = 1.0f;

    /**
     * 處理矩陣的9個(gè)值
     */
    float[] martixValue = new float[9];

上面費(fèi)了那么多口水講到的matrix的九個(gè)值啥的,終于要出現(xiàn)了,是不是很激動(dòng)~(才怪),接下來搞個(gè)方法獲取縮放比例

    /**
     * 獲取當(dāng)前縮放比例
     */
    public float getScale() {
        scaleMatrix.getValues(martixValue);
        return martixValue[Matrix.MSCALE_X];
    }

之后為了獲取正確的初始縮放比例,在我們剛剛寫的** onGlobalLayout **中加句話:

initScale = scale;

當(dāng)然了,得是在獲取了scale值之后再添,因?yàn)槲覀冸m然設(shè)置了初始縮放比例,但是實(shí)際中可能因?yàn)閳D片大小發(fā)生了縮放行為,所以我們需要再次確定初始縮放比例。接下來就是對縮放行為進(jìn)行限制了,修改onScale代碼如下:

    @Override
    public boolean onScale(ScaleGestureDetector detector) {
        float scale = getScale();
        Log.e(TAG, "matrix scale---->" + scale);
        float scaleFactor = detector.getScaleFactor();
        Log.e(TAG, "scaleFactor---->" + scaleFactor);
        if (getDrawable() == null)
            return true;
//        Log.e(TAG,"君甚咸,此魚何能及君也?");
        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;
            Log.e(TAG, "scaleFactor2---->" + scaleFactor);
            //設(shè)置縮放比例
            scaleMatrix.postScale(scaleFactor, scaleFactor, getWidth() / 2, getHeight() / 2);
            setImageMatrix(scaleMatrix);
        }
        return true;
    }

對于以上的代碼,你可能會對兩個(gè)scale有所疑惑,一個(gè)scale是從matrix中獲得的,一個(gè)是從縮放檢測中獲得的。開始我看到hongyang大神的這段代碼我也是有所疑惑的,但是之后我自己寫了一遍,打了一下log,發(fā)現(xiàn)前一個(gè)在到達(dá)我們設(shè)置的最大值時(shí),值便會固定為4,后一個(gè)值會在1左右。那么很明顯前一個(gè)值是圖片相對于初始尺寸的縮放,后一個(gè)是每一次縮放的實(shí)際比例。理解了這個(gè)之后便容易解決了,使用如上代碼便可以限制縮放了。如果你對于縮放比例不滿意,嗯,自己設(shè)置就是了,反正也不復(fù)雜。效果圖就等下一個(gè)功能一起實(shí)現(xiàn)再放了。

以上一個(gè)簡單,還算能用的縮放ImageView就完成了,現(xiàn)在的問題是縮放中心是控件的中心,如果我想設(shè)置縮放中心是我按下去的地方呢?很簡單改一句代碼:

scaleMatrix.postScale(scaleFactor, scaleFactor, 
            getWidth() / 2, getHeight() / 2);

scaleMatrix.postScale(scaleFactor, scaleFactor, 
            detector.getFocusX(), detector.getFocusY());

但是這一改出事了……現(xiàn)在是能根據(jù)手勢縮放中心進(jìn)行縮放了,但是縮放到最小時(shí)圖片位置可能發(fā)生了變化……現(xiàn)在還要解決的就是縮放時(shí)圖片位置變化,新增如下方法:

    /**
     * 在縮放時(shí),控制范圍
     */
    private void checkBorderAndCenterWhenScale() {
        Matrix matrix = scaleMatrix;
        RectF rectF = new RectF();
        Drawable d = getDrawable();
        if (d != null) {
            rectF.set(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
            matrix.mapRect(rectF);
        }

        float deltaX = 0;
        float deltaY = 0;
        int width = getWidth();
        int height = getHeight();
        // 如果寬或高大于屏幕,則控制范圍
        if (rectF.width() >= width) {
            if (rectF.left > 0) {
                deltaX = -rectF.left;
            }
            if (rectF.right < width) {
                deltaX = width - rectF.right;
            }
        }
        if (rectF.height() >= height) {
            if (rectF.top > 0) {
                deltaY = -rectF.top;
            }
            if (rectF.bottom < height) {
                deltaY = height - rectF.bottom;
            }
        }
        // 如果寬或高小于屏幕,則讓其居中
        if (rectF.width() < width) {
            deltaX = width * 0.5f - rectF.right + 0.5f * rectF.width();
        }
        if (rectF.height() < height) {
            deltaY = height * 0.5f - rectF.bottom + 0.5f * rectF.height();
        }
        scaleMatrix.postTranslate(deltaX, deltaY);
    }

然后在onScale方法里調(diào)用以上檢測的方法:

        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;
            Log.e(TAG, "scaleFactor2---->" + scaleFactor);
            //設(shè)置縮放比例
            scaleMatrix.postScale(scaleFactor, scaleFactor,
                    detector.getFocusX(), detector.getFocusY());
            checkBorderAndCenterWhenScale();
            setImageMatrix(scaleMatrix);
        }

最終成型

以上代碼算出初步的能用了,不過還有一點(diǎn)值得注意的地方,如果你在onTouch這個(gè)方法里的代碼是這樣的:

return scaleGestureDetector.onTouchEvent(event);

那么所有的事件都會被消費(fèi),因?yàn)槲尹c(diǎn)到scaleGestureDetector的onTouch方法里,沒看到return false的東西,所以你設(shè)置的oncilck事件之類的都沒什么卵用。

對于我來說這樣是不行的,因?yàn)槲蚁M脩酎c(diǎn)擊一次之后可以退出當(dāng)前界面,所以你可以調(diào)用sacleGestureDetector.onTouchEvent(event)但是返回false,不消耗這個(gè)事件,讓onClick來處理點(diǎn)擊事件。當(dāng)我想的很美的時(shí)候,卻發(fā)現(xiàn)這么做雖然點(diǎn)擊事件會被處理,而且縮放也正常,但是縮放的操作會被判斷為點(diǎn)擊事件,也就是說這么干不行了。我的腦海中第二個(gè)想到的解決方案是回調(diào),既然系統(tǒng)的回調(diào)不行了,那我自己設(shè)置一個(gè)時(shí)間,在這個(gè)時(shí)間之內(nèi)就是click事件,我在這個(gè)事件的回調(diào)里把當(dāng)前界面退出了不就行了。實(shí)現(xiàn)如下:

    private ClickCloseListener c;

    public interface ClickCloseListener {
        void close();
    }

    public void setClickCloseListener(ClickCloseListener c) {
        this.c = c;
    }

    /**
     * 按下的時(shí)間
     */
    long downTime;

    /**
     * down 和 up之間的間隔
     */
    long closeTime = 100L;

    /**
     * 設(shè)置按下的時(shí)間
     */
    //suppress unused warning for no reason
    @SuppressWarnings("unused")
    public void setClickTime(long time) {
        this.closeTime = time;
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        scaleGestureDetector.onTouchEvent(event);
        //如果監(jiān)聽為null,消費(fèi)該事件,不讓onclick生效
        if (c == null)
            return true;
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downTime = System.currentTimeMillis();
                break;
            case MotionEvent.ACTION_UP:
                downTime = System.currentTimeMillis() - downTime;
                if (downTime < closeTime)
                    c.close();
                break;
            default:
                break;
        }
        return true;
    }

最后看一下效果圖吧~

ZZ-最終打死都不改版

當(dāng)然了,自己搞的點(diǎn)擊事件有點(diǎn)不靠譜,時(shí)間間隔設(shè)置為100ms,有點(diǎn)短了,你可以自己設(shè)置,不過這篇文到這里也就結(jié)束了。本來還想連什么移動(dòng)一起加上,嗯,現(xiàn)在發(fā)現(xiàn)好像篇幅超出了我的控制。暫且還是算了吧~而且這個(gè)姑且也算是能用了,只不過適用的場景只是查看大圖的一個(gè)單獨(dú)的界面。這個(gè)簡單的小東西就寫到這了。完整代碼就放在這把,也懶得上傳github了:

package com.example.luo_pc.view.CustomView;

/**
 * Created by Luo_xiasuhuei321@163.com on 2016/9/24.
 * desc:
 */

import android.content.Context;
import android.graphics.Matrix;
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.ImageView;

public class ZZoomImageView extends ImageView implements View.OnTouchListener, ScaleGestureDetector.OnScaleGestureListener,
        ViewTreeObserver.OnGlobalLayoutListener {
    //suppress the unused warning because maybe it will be used sometime later
    @SuppressWarnings("unused")
    private static final String TAG = "ZZoomImageView";

    /**
     * 最大放大倍數(shù)
     */
    public static final float SCALE_MAX = 4.0f;

    /**
     * 默認(rèn)縮放
     */
    private float initScale = 1.0f;

    /**
     * 手勢檢測
     */
    ScaleGestureDetector scaleGestureDetector = null;

    Matrix scaleMatrix = new Matrix();

    /**
     * 處理矩陣的9個(gè)值
     */
    float[] martixValue = new float[9];

    public ZZoomImageView(Context context) {
        this(context, null);
    }

    public ZZoomImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ZZoomImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setScaleType(ScaleType.MATRIX);
        scaleGestureDetector = new ScaleGestureDetector(context, this);
        this.setOnTouchListener(this);
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        getViewTreeObserver().addOnGlobalLayoutListener(this);
    }

    //suppress deprecate warning because i have dealt with it 
    @Override
    @SuppressWarnings("deprecation")
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (Build.VERSION.SDK_INT > Build.VERSION_CODES.JELLY_BEAN) {
            getViewTreeObserver().removeOnGlobalLayoutListener(this);
        }
        getViewTreeObserver().removeGlobalOnLayoutListener(this);
    }

    /**
     * 獲取當(dāng)前縮放比例
     */
    public float getScale() {
        scaleMatrix.getValues(martixValue);
        return martixValue[Matrix.MSCALE_X];
    }

    /**
     * 在縮放時(shí),控制范圍
     */
    private void checkBorderAndCenterWhenScale() {
        Matrix matrix = scaleMatrix;
        RectF rectF = new RectF();
        Drawable d = getDrawable();
        if (d != null) {
            rectF.set(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
            matrix.mapRect(rectF);
        }

        float deltaX = 0;
        float deltaY = 0;
        int width = getWidth();
        int height = getHeight();
        // 如果寬或高大于屏幕,則控制范圍
        if (rectF.width() >= width) {
            if (rectF.left > 0) {
                deltaX = -rectF.left;
            }
            if (rectF.right < width) {
                deltaX = width - rectF.right;
            }
        }
        if (rectF.height() >= height) {
            if (rectF.top > 0) {
                deltaY = -rectF.top;
            }
            if (rectF.bottom < height) {
                deltaY = height - rectF.bottom;
            }
        }
        // 如果寬或高小于屏幕,則讓其居中
        if (rectF.width() < width) {
            deltaX = width * 0.5f - rectF.right + 0.5f * rectF.width();
        }
        if (rectF.height() < height) {
            deltaY = height * 0.5f - rectF.bottom + 0.5f * rectF.height();
        }
        scaleMatrix.postTranslate(deltaX, deltaY);
    }

    //--------------------------implement OnTouchListener----------------------------//
    private ClickCloseListener c;

    public interface ClickCloseListener {
        void close();
    }

    public void setClickCloseListener(ClickCloseListener c) {
        this.c = c;
    }

    /**
     * 按下的時(shí)間
     */
    long downTime;

    /**
     * down 和 up之間的間隔
     */
    long closeTime = 100L;

    /**
     * 設(shè)置按下的時(shí)間
     */
    //suppress unused warning for no reason
    @SuppressWarnings("unused")
    public void setClickTime(long time) {
        this.closeTime = time;
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        scaleGestureDetector.onTouchEvent(event);
        //如果監(jiān)聽為null,消費(fèi)該事件,不讓onclick生效
        if (c == null)
            return true;
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downTime = System.currentTimeMillis();
                break;
            case MotionEvent.ACTION_UP:
                downTime = System.currentTimeMillis() - downTime;
                if (downTime < closeTime)
                    c.close();
                break;
            default:
                break;
        }
        return true;
    }

    //----------------------implement OnScaleGestureListener------------------------//

    @Override
    public boolean onScale(ScaleGestureDetector detector) {
        float scale = getScale();
        float scaleFactor = detector.getScaleFactor();
        if (getDrawable() == null)
            return true;
//        Log.e(TAG,"君甚咸,此魚何能及君也?");
        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;
            Log.e(TAG, "scaleFactor2---->" + scaleFactor);
            //設(shè)置縮放比例
            scaleMatrix.postScale(scaleFactor, scaleFactor,
                    detector.getFocusX(), detector.getFocusY());
            checkBorderAndCenterWhenScale();
            setImageMatrix(scaleMatrix);
        }
        return true;
    }

    @Override
    public boolean onScaleBegin(ScaleGestureDetector detector) {
        return true;
    }

    @Override
    public void onScaleEnd(ScaleGestureDetector detector) {

    }

    boolean once = true;

    @Override
    public void onGlobalLayout() {
        if (!once)
            return;
        Drawable d = getDrawable();
        if (d == null)
            return;
        //獲取imageview寬高
        int width = getWidth();
        int height = getHeight();

        //獲取圖片寬高
        int imgWidth = d.getIntrinsicWidth();
        int imgHeight = d.getIntrinsicHeight();

        float scale = 1.0f;

        //如果圖片的寬或高大于屏幕,縮放至屏幕的寬或者高
        if (imgWidth > width && imgHeight <= height)
            scale = (float) width / imgWidth;
        if (imgHeight > height && imgWidth <= width)
            scale = (float) height / imgHeight;
        //如果圖片寬高都大于屏幕,按比例縮小
        if (imgWidth > width && imgHeight > height)
            scale = Math.min((float) imgWidth / width, (float) imgHeight / height);
        initScale = scale;
        //將圖片移動(dòng)至屏幕中心
        scaleMatrix.postTranslate((width - imgWidth) / 2, (height - imgHeight) / 2);
        scaleMatrix.postScale(scale, scale, getWidth() / 2, getHeight() / 2);
        setImageMatrix(scaleMatrix);
        once = false;
    }
}

參考資料:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 手勢圖片控件 PinchImageView 點(diǎn)擊圖片框架 photoView packagecom.example...
    Ztufu閱讀 803評論 0 1
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,716評論 25 709
  • 概述 項(xiàng)目開發(fā)中,大家APP開發(fā)一般都會用到上傳圖片,比如是上傳了自己的生活照,然后在某個(gè)界面處查看上傳的圖片,這...
    青蛙要fly閱讀 6,419評論 2 20
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,020評論 4 61
  • 《南京·清涼山》 昔諸葛駐馬 虎踞龍?bào)?又后主避暑 三絕遺世 曾有金戈鐵馬 亦有詩情畫意 無數(shù)王侯將相 文人雅士 ...
    梁子仗劍走天下閱讀 696評論 3 5

友情鏈接更多精彩內(nèi)容