2. 程式人生 > >android實現圖片縮放、移動、單擊退出、雙擊縮放

android實現圖片縮放、移動、單擊退出、雙擊縮放

阿新 • • 發佈：2019-02-09

實現思路

思路：重寫用於顯示圖片的ImageView，定義ScaleGestureDetector（縮放手勢檢測）型別、GestureDetector（雙擊手勢檢測）型別的變數進行手勢檢測並重寫方法實現圖片的縮放、移動、單擊退出、雙擊放大等功能。
重寫的方法implements OnTouchListener介面，重寫onTouch方法對手勢進行監聽

ScaleGestureDetector mScaleGestureDetector ;
GestureDetector mGestureDetector;
public boolean onTouch(View v, MotionEvent event
 
)
{
    if (mGestureDetector.onTouchEvent(event))
        return true;                           //單雙擊監聽
    mScaleGestureDetector.onTouchEvent(event); //縮放監聽
    圖片移動處理的code；                           //移動監聽及處理    
}

為什麼單雙擊監聽的時候檢測到單雙擊直接就返回而不執行後面的程式碼？這裡主要考慮到但雙擊的時候是自動縮放，一般我們不會在自動縮放的時候還會移動圖片，但是如果是人手動考手勢縮放圖片，往往還會伴隨著移動圖片的處理，所以檢測到手動縮放的程式碼時不返回，仍然要執行後面的移動圖片的程式碼。

單雙擊處理程式碼：

mGestureDetector = new GestureDetector(context,
                new SimpleOnGestureListener()
                {
                    //單擊退出
                    @Override
                    public boolean onSingleTapConfirmed(MotionEvent e) {
                        EventBus.getDefault().post(new
 
 ZoomBus());
                        return super.onSingleTapConfirmed(e);
                    }

                    //雙擊放大縮小
                    @Override
                    public boolean onDoubleTap(MotionEvent e)
                    {
                        if (isAutoScale == true)  //首先判斷是否正在自動縮放,如果是直接返回true
                            return true;

                        float x = e.getX();
                        float y = e.getY();
                        Log.e("DoubleTap", getScale() + " , " + initScale);
                        //postDelayed每16ms執行一個AutoScaleRunnable方法
                        if (getScale() < SCALE_MID)
                        {
                            ZoomImageView.this.postDelayed(
                                    new AutoScaleRunnable(SCALE_MID, x, y), 16);//如果獲得的縮放比例小於SCALE_MID,那麼就設定縮放比例為SCALE_MID
                            isAutoScale = true;
                        } else if (getScale() >= SCALE_MID
                                && getScale() < SCALE_MAX)
                        {
                            ZoomImageView.this.postDelayed(
                                    new AutoScaleRunnable(SCALE_MAX, x, y), 16);//如果獲得的縮放比例大於SCALE_MID並且小於SCALE_MAX，就設定縮放比例為SCALE_MAX
                            isAutoScale = true;
                        } else
                        {
                            ZoomImageView.this.postDelayed(
                                    new AutoScaleRunnable(initScale, x, y), 16);//同理
                            isAutoScale = true;
                        }

                        return true;
                    }
                });


/*AutoScaleRunnable()*/
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);
            checkBorderAndCenterWhenScale();//如果不用，圖片寬高大於螢幕時，圖片與螢幕間出現白邊；圖片小於螢幕，但是不居中。
            setImageMatrix(mScaleMatrix);

            final float currentScale = getScale();
            // 如果值在合法範圍內，繼續縮放
            if (((tmpScale > 1f) && (currentScale < mTargetScale))
                    || ((tmpScale < 1f) && (mTargetScale < currentScale)))
            {
                Log.d("合理範圍",currentScale+" "+mTargetScale+" "+tmpScale);
                ZoomImageView.this.postDelayed(this, 16);
            } else
            // 設定為目標的縮放比例
            {
                Log.d("目標範圍","目標範圍"+currentScale+" "+mTargetScale);
                final float deltaScale = mTargetScale / currentScale;
                Log.d("deltaScale",deltaScale+" ");
                mScaleMatrix.postScale(deltaScale, deltaScale, x, y);
                checkBorderAndCenterWhenScale();
                setImageMatrix(mScaleMatrix);
                isAutoScale = false;
            }
        }
    }

new SimpleOnGestureListener()方法處理單擊退出，這裡用了EventBus，有關EventBus的使用可以搜尋看一下，有handler的效果。在顯示這個圖片的Activity中的程式碼如下：

public class PictureShowActivity extends Activity {
    private ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_picture);
        EventBus.getDefault().register(this);
        ....
    @Subscribe(threadMode = ThreadMode.MAIN)
    public void onUserEvent(ZoomBus zoomBus) {  //自己定義個ZoomBuS實體，可以是空實體
        Log.d("zoomBus",zoomBus+"");
       finish();
    }
}

public boolean onDoubleTap(MotionEvent e)處理的是雙擊縮放，雙擊時首先判斷當前縮放比例getScale()，然後拿當前縮放比例和initScale、SCALE_MID、SCALE_MAX進行比較以定出自動縮放的縮放比例，然後呼叫AutoScaleRunnable（）方法，注意AutoScaleRunnable()方法進行了邊界檢測checkBorderAndCenterWhenScale()

手動縮放程式碼：

@SuppressLint("NewApi")
    @Override
    public boolean onScale(ScaleGestureDetector detector)
    {
        Log.d("scale","scale");
        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());
            checkBorderAndCenterWhenScale();
            setImageMatrix(mScaleMatrix);
        }
        return true;
    }

具體流程如下：
這裡寫圖片描述

移動程式碼：（在onTouch方法裡面）

        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;
        RectF rectF = getMatrixRectF();
        switch (event.getAction())
        {
//      case MotionEvent.ACTION_DOWN:
//          if (rectF.width() > getWidth() || rectF.height() > getHeight())
//          {
//              getParent().requestDisallowInterceptTouchEvent(true);
//          }
//          break;

        case MotionEvent.ACTION_MOVE:
//          if (rectF.width() > getWidth() || rectF.height() > getHeight())
//          {
//              getParent().requestDisallowInterceptTouchEvent(true);
//          }
            Log.e(TAG, "ACTION_MOVE");
            float dx = x - mLastX;
            float dy = y - mLastY;

            if (!isCanDrag)
            {
                isCanDrag = isCanDrag(dx, dy);
            }
            if (isCanDrag)
            {
                if (getDrawable() != null)
                {
                    // if (getMatrixRectF().left == 0 && dx > 0)
                    // {
                    // getParent().requestDisallowInterceptTouchEvent(false);
                    // }
                    //
                    // if (getMatrixRectF().right == getWidth() && dx < 0)
                    // {
                    // getParent().requestDisallowInterceptTouchEvent(false);
                    // }
                    isCheckLeftAndRight = isCheckTopAndBottom = true;
                    // 如果寬度小於螢幕寬度，則禁止左右移動
                    if (rectF.width() < getWidth())
                    {
                        dx = 0;
                        isCheckLeftAndRight = false;
                    }
                    // 如果高度小雨螢幕高度，則禁止上下移動
                    if (rectF.height() < getHeight())
                    {
                        dy = 0;
                        isCheckTopAndBottom = false;
                    }


                    mScaleMatrix.postTranslate(dx, dy);
                    checkMatrixBounds();
                    setImageMatrix(mScaleMatrix);
                }
            }
            mLastX = x;
            mLastY = y;
            break;

        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:
            Log.e(TAG, "ACTION_UP");
            lastPointerCount = 0;
            break;
        }
        return true;

首先我們拿到觸控點的數量，然後求出多個觸控點的平均值，設定給我們的mLastX , mLastY ， 然後在移動的時候，得到dx ,dy 進行範圍檢查以後，呼叫mScaleMatrix.postTranslate進行設定偏移量，設定完成以後，還需要再次校驗一下，不能把圖片移動的與螢幕邊界出現白邊，校驗完成後，呼叫setImageMatrix.

相關推薦

android實現圖片縮放、移動、單擊退出、雙擊縮放

實現思路 思路：重寫用於顯示圖片的ImageView，定義ScaleGestureDetector（縮放手勢檢測）型別、GestureDetector（雙擊手勢檢測）型別的變數進行手勢檢測並重寫方法實現圖片的縮放、移動、單擊退出、雙擊放大等功能。 重

android 實現圖片旋轉，移動，縮放，並且記錄變化值，用另外一張圖片顯示出來

最近公司要做一個戒指試戴的功能，就是把戒指通過手勢移動到你指定的手指處，並且儲存狀態，方便下次進入時顯示，可以參考APP“鑽石快線”的試戴功能， 圖片網上有很多的教程教你怎麼把圖片旋轉，移動，縮放，等等，卻沒有教你儲存狀態，而且網上的教程都亂七八糟，都是複製貼上，都不是自己

Android 實現圖片縮放和拖動

今天我們來編寫一個縮放效果的ImageView ，網上有很多人都講了這些。但有許多人都直接使用了庫檔案， 那麼我們今天做的是直接上程式碼編寫一個拖動和縮放的ImageView，具體看效果圖， 那麼簡單了分析一下。在手機上縮放圖片和拖動要用到什麼?手指對不

Android 實現圖片、視訊即時更新到相簿

//android把圖片檔案新增到相簿public void udpateMedia(String url){     //圖片路徑     File file=new File(url);     ContentResolver localContentResolver = getContentResolv

Android實現仿微信朋友圈釋出動態（拍照、相簿選擇、照片壓縮、顯示、儲存、縮圖、點選縮圖刪除對應檔案等）附原始碼

         原創作品，轉載請註明出處：http://blog.csdn.net/zhang3776813/article/details/52092591 最近專案需求中要用到類似微信朋友圈釋出動態選擇圖片的UI效果，研究了一下，特來分享成果，多的不說來看程式碼。

Android------實現圖片雙擊放大，縮小，左右滑動的多種方式

params getcount androi nullable per try out 多圖 tro 項目中常常有圖片瀏覽功能。像微信朋友圈圖片瀏覽，QQ空間照片瀏覽 的功能。 實現圖片雙擊放大，縮小，左右滑動等效果。 來看看我的效果圖，希望能滿足你的要求 前

Android實現圖片下載並保存SD卡

tex on() puts show sta exc method pat bit 一、首先獲取圖片 //第一種獲取圖片的方法 1 String filePath = downloadUrl; 2 //以下是取得圖片的方法 3 取得的是InputStream，直接

JS實現圖片隨著滑鼠自由移動

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

Android 實現圖片的放大縮小及左右滑動(說明書效果)

1.先自定義一個ImageView （這裡使用的是弘揚的ZoomImageView） public class ZoomImageView extends ImageView implements ScaleGestureDetector.OnScaleGestureListener

Android實現圖片轉ascii碼字元圖的一些嘗試

z2IN.png 抖音上炫程式碼的不少，有些真的讓人歎為觀止，作為一個androider，當我看到下面這段舞蹈的時候，終於忍不住了，想要通過android實現一樣的效果。 jilejingtu.gif 這麼好玩的東西，為啥就沒有大佬做呢，原因可能有兩個，

Android實現圖片快取與非同步載入

ImageManager2這個類具有非同步從網路下載圖片，從sd讀取本地圖片，記憶體快取，硬碟快取，圖片使用動畫漸現等功能，已經將其應用在包含大量圖片的應用中一年多，沒有出現oom。 Android程式常常會記憶體溢位，網上也有很多解決方案，如軟引用，手動呼叫recycle

Android實現圖片 高斯模糊，以及圖片映象 翻轉。

好久沒寫部落格，發現不止手癢，，原來不學習還是會頹廢的….. 哎….. 速速找了網上比較感興趣的功能，，看著前人大神門的方法實現,方便自己也方便別人： 上圖： 程式碼： MainActivity.class package com.hero.

android實現圖片觸控旋轉

1.先上一張模擬觸控旋轉的效果圖。 2.下面是具體的實現，自定義Rview控制元件類繼承View,首先自定義Rview的屬性，在專案檔案的res/values目錄下新建attr.xml檔案。 attr.xml <?xml version="1.0" encodin

android實現圖片+文字輪播（帶文字）

activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.

android實現圖片圓角化實現三種方法

方法一 自定義ImageView /** * 自定義的圓角矩形ImageView，可以直接當元件在佈局中使用。 * @author caizhiming * */ public class

Android實現圖片前後翻轉

使用android.view.animation.ScaleAnimation實現圖片的前後翻轉效果。 主要使用到的類還有android.view.animation.Animation.AnimationListener,android.view.animation.An

Android實現圖片的高斯模糊(兩種方式)

原文地址：http://www.jb51.net/article/107482.htm 在市面上很多的APP都使用了對圖片作模糊化處理後作為背景的效果，來使得整個頁面更具有整體感。如下就是網易雲音樂的音樂播放頁面: 很明顯這個頁面的背景是由中間的小圖片模糊化後而來的。

Android實現圖片寬度全屏，高度隨圖片大小動態適配

1.layout中設定圖片寬度match_parent 高度wrap_content 2.獲得圖片的高度，可以讓後臺直接傳過來，也可以拿到圖片後在移動端自行獲得 3.計算圖片寬高比（注意應為fl

Android 實現圖片高斯模糊演算法，真正有效的工具類

import android.graphics.Bitmap; import android.graphics.Color; public class FastBlur {     /***      * 高斯模糊演算法      * @param bmp 要處理的影象  

Android實現圖片輪播效果

註明：轉載請註明本文連結MainActivity.javapackage com.example.carr.advertisement; import android.content.Intent; import android.os.Environment; import