Android事件處理之多點觸摸與手勢識別

時間 2019-11-06

原文原文鏈接

1、Muilti-touch 雙指縮放的實現探索： java

首先要實現OnTouchListener接口，而後重寫方法： android

public boolean onTouch(View v, MotionEvent event);

從這個方法中咱們就能夠獲取實現兩指縮放功能的所有信息。 canvas

View v是觸發事件的源，MotionEvent event即一個觸摸事件。對屏幕的幾乎全部操做都會觸發事件，如點擊、放開、滑動等。 ide

不一樣的事件在MotionEvent中有不一樣的id，咱們能夠根據event.getAction() & MotionEvent.ACTION_MASK的結果來判斷是何種事件。 post

有以下事件使咱們要用到的：字體

MotionEvent.ACTION_DOWN：在第一個點被按下時觸發
MotionEvent.ACTION_UP:當屏幕上惟一的點被放開時觸發
MotionEvent.ACTION_POINTER_DOWN:當屏幕上已經有一個點被按住，此時再按下其餘點時觸發。
MotionEvent.ACTION_POINTER_UP:當屏幕上有多個點被按住，鬆開其中一個點時觸發（即非最後一個點被放開時）。
MotionEvent.ACTION_MOVE：當有點在屏幕上移動時觸發。值得注意的是，因爲它的靈敏度很高，而咱們的手指又不可能徹底靜止（即便咱們感受不到移動，但其實咱們的手指也在不停地抖動），因此實際的狀況是，基本上只要有點在屏幕上，此事件就會一直不停地被觸發。

舉例子來講：當咱們放一個食指到屏幕上時，觸發ACTION_DOWN事件；再放一箇中指到屏幕上，觸發ACTION_POINTER_DOWN事件；此時再把食指或中指放開，都會觸發ACTION_POINTER_UP事件；再放開最後一個手指，觸發ACTION_UP事件；而同時在整個過程中，ACTION_MOVE事件會一直不停地被觸發。動畫

event.getX(index)和event.getY(index)能夠獲取到指定index點的座標，因此當屏幕上有兩個點的時候，咱們用以下方法來獲取兩點間的距離： ui

private float spacing(MotionEvent event) {  
    float x = event.getX(0) - event.getX(1);  
    float y = event.getY(0) - event.getY(1);  
    return FloatMath.sqrt(x * x + y * y);  
}

由以上事件觸發的原理，就能夠根據被觸發的不一樣事件來判斷當前屏幕上的點的個數： spa

switch (event.getAction() & MotionEvent.ACTION_MASK) {  
        case MotionEvent.ACTION_DOWN:  
            mode = 1;  
            break;  
        case MotionEvent.ACTION_UP:  
            mode = 0;  
            break;  
        case MotionEvent.ACTION_POINTER_UP:  
            mode -= 1;  
            break;  
        case MotionEvent.ACTION_POINTER_DOWN:  
            mode += 1;  
            break;  
}

而後在MotionEvent.ACTION_MOVE事件中，判斷點的個數，若是大於等於2，就計算兩點間的距離，若是距離增大就把圖片放大，距離減小就把圖片縮小。 code

因而代碼就成了：

switch (event.getAction() & MotionEvent.ACTION_MASK) {  
case MotionEvent.ACTION_DOWN:  
    mode = 1;  
    break;  
case MotionEvent.ACTION_UP:  
    mode = 0;  
    break;  
case MotionEvent.ACTION_POINTER_UP:  
    mode -= 1;  
    break;  
case MotionEvent.ACTION_POINTER_DOWN:  
    oldDist = spacing(event);//兩點按下時的距離  
    mode += 1;  
    break;        
case MotionEvent.ACTION_MOVE:  
    if (mode >= 2) {  
        float newDist = spacing(event);  
        if (newDist > oldDist) {  
            zoomOut();  
        }  
        if (newDist < oldDist) {  
            zoomIn();  
        }  
        break;  
    }

通過檢驗，這種方法是可以實現縮放效果的。

可是有了另一個問題：就是因爲ACTION_MOVE會因顫抖一直被觸發，而每次觸發的時候兩點間的距離也總會有細小的變化，因此運行以後只要有兩點在屏幕上，就總會在放大或縮小字體。

通過一番思考，我想出了一個控制其靈敏度的方法，即在case MotionEvent.ACTION_MOVE時判斷只有當距離變化大於必定程度時纔會更改字體大小：

if (newDist > oldDist + 1) {//原爲：if (newDist > oldDist)  
    zoomOut();//放大  
}

另外縮放的方法也改爲了按比例縮放，完整的ZoomListenter代碼：

import android.util.FloatMath;  
 import android.view.MotionEvent;  
 import android.view.View;  
 import android.view.View.OnTouchListener;  
 import android.widget.TextView;  
   
 public class ZoomListenter implements OnTouchListener {  
   
     private int mode = 0;  
     float oldDist;  
     float textSize = 0;  
   
     TextView textView = null;  
   
     @Override  
     public boolean onTouch(View v, MotionEvent event) {  
         textView = (TextView) v;  
         if (textSize == 0) {  
             textSize = textView.getTextSize();  
         }  
         switch (event.getAction() & MotionEvent.ACTION_MASK) {  
         case MotionEvent.ACTION_DOWN:  
             mode = 1;  
             break;  
         case MotionEvent.ACTION_UP:  
             mode = 0;  
             break;  
         case MotionEvent.ACTION_POINTER_UP:  
             mode -= 1;  
             break;  
         case MotionEvent.ACTION_POINTER_DOWN:  
             oldDist = spacing(event);  
             mode += 1;  
             break;  
   
         case MotionEvent.ACTION_MOVE:  
             if (mode >= 2) {  
                 float newDist = spacing(event);  
                 if (newDist > oldDist + 1) {  
                     zoom(newDist / oldDist);  
                     oldDist = newDist;  
                 }  
                 if (newDist < oldDist - 1) {  
                     zoom(newDist / oldDist);  
                     oldDist = newDist;  
                 }  
             }  
             break;  
         }  
         return true;  
     }  
   
     private void zoom(float f) {  
         textView.setTextSize(textSize *= f);  
     }  
   
     private float spacing(MotionEvent event) {  
         float x = event.getX(0) - event.getX(1);  
         float y = event.getY(0) - event.getY(1);  
         return FloatMath.sqrt(x * x + y * y);  
     }  
   
 }

這樣，基本算是能達到預期的效果了。

2、Android 屏幕手勢滑動

Android系統自帶一個Gallery瀏覽圖片的應用，經過手指拖動時可以很是流暢的顯示圖片，用戶交互和體驗都很好。

因此本人研究了一下android的源碼後，寫了一個小demo：

一、基本原理

在 Activity 中實現 OnGestureListener 的接口 onFling() 手勢事件，經過自定義的 View 繪製draw() 圖片

二、Activity

Activity中，經過onTouchEvent() 註冊 myGesture.onTouchEvent(event)

@Override  
public boolean onTouchEvent(MotionEvent event) {  
    switch (event.getAction()) {  
    case MotionEvent.ACTION_UP:  
        flingView.onFling(0);           // 手指擡起後，重置滑動距離offsetX = 0  
        break;  
    }  
  
    return myGesture.onTouchEvent(event);  
}

接着實現接口OnGestureListener 的 onScroll()方法，給繼承自View的 FlingView 的handleScroll()成員方法傳遞滑動參數，獲取滑動的x軸距離

@Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { flingView.handleScroll(-1 * (int) distanceX); return true; }

接着實現接口OnGestureListener 的 OnFling()方法，給繼承自View的 FlingView 的onFling()成員方法傳遞滑動參數，獲取手勢的速度

@Override  
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {  
    flingView.onFling((int) - velocityX);  
    return true;  
}

三、FlingView

FlingView中，獲取來自Activity中的手勢速度

public void onFling(int paramFloat1) {  
    if (offsetX > GalleryDemoActivity.deviceScreenWidth / 5) {  
        if (fBitmap != null) {  
            isFling = true;  
            isFlingRight = true;  
        }  
    } else if (offsetX < -GalleryDemoActivity.deviceScreenWidth / 5) {  
        if (nBitmap != null) {  
            isFling = true;  
            isFlingLeft = true;  
        }  
    }  
    // 開始動畫效果  
    startAnimation(new MyAnimation());  
}

在滑動過程當中，經過實現View的Draw()方法繪製圖片，注意：此時須要同時繪製當前圖片（獲取焦點）和下一張圖片（即將獲取焦點）共兩張圖片

@Override  
public void draw(Canvas canvas) {  
    Paint paint = new Paint();  
    Rect rect = new Rect();  
    canvas.drawColor(Color.BLACK);  
  
    // 繪製當前圖片  
    if (bitmap != null) {  
        int left = offsetX;  
        int top = offsetY;  
        int right = offsetX + GalleryDemoActivity.deviceScreenWidth;  
        int bottom = offsetY + GalleryDemoActivity.deviceScreenHeight;  
        rect.set(left, top, right, bottom);  
        canvas.drawBitmap(bitmap, null, rect, paint);  
    }  
      
    // 繪製下一張圖片  
    if (offsetX < 0) {           // 向左滑動  
        if (nBitmap != null) {  
            int left = GalleryDemoActivity.deviceScreenWidth + 15 + offsetX;  
            int top = 0;  
            int right = left + GalleryDemoActivity.deviceScreenWidth;  
            int bottom = GalleryDemoActivity.deviceScreenHeight;  
            rect.set(left, top, right, bottom);  
            canvas.drawBitmap(nBitmap, null, rect, paint);  
        }  
    } else if (offsetX > 0) {        // 向右滑動  
        if (fBitmap != null) {  
            int left = -GalleryDemoActivity.deviceScreenWidth - 15 + offsetX;  
            int top = 0;  
            int right = left + GalleryDemoActivity.deviceScreenWidth;  
            int bottom = GalleryDemoActivity.deviceScreenHeight;  
            rect.set(left, top, right, bottom);  
            canvas.drawBitmap(fBitmap, null, rect, paint);  
        }  
    }  
}

在滑動圖片結束後，須要作滑動動畫後的處理，從新設置當前圖片和當前圖片的上一張和下一張的狀態，爲下次滑動作準備

@Override  
protected void onAnimationEnd() {  
    if (isFlingRight) {         // 向右滑動，position減1  
        nBitmap = bitmap;  
        bitmap = fBitmap;  
        fBitmap = null;  
        postion = postion - 1;  
    } else if (isFlingLeft) {       // 向左滑動，position加1  
        fBitmap = bitmap;  
        bitmap = nBitmap;  
        nBitmap = null;  
        postion = postion + 1;  
    }  
      
    isFlingRight = false;             
    isFlingLeft = false;  
    isFling = false;  
    offsetX = 0;  
    if (fBitmap == null && offsetX == 0) {          // 若是前一張圖片爲空（向右滑），則重置前一張圖片（position - 1）  
        if (postion > 0) {  
            fBitmap = getBitmap(postion - 1);  
        }  
  
    } else if (nBitmap == null && offsetX == 0) {       // 若是後一張圖片爲空（向左滑），則重置後一張圖片（position + 1）  
        if (postion < bitmaps.length - 1) {  
            nBitmap = getBitmap(postion + 1);  
        }  
    }  
    clearAnimation();             
}

四、手勢座標介紹

本示例中，用到了OnGestureListener接口的onScroll()和OnFling()方法，涉及到了Android系統座標及觸摸MotionEvent e1和e二、速度velocityX、velocityY等值

Android屏幕座標系以下圖（左）

（1）MotionEvent中 e1是手指第一次按上屏幕的起點，e2是擡起手指離開屏幕的終點，根據上圖Android屏幕座標系可知：