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

本文轉載自查看原文 2013-03-10 17:41 22191 Android

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

首先要實現OnTouchListener接口，然后重寫方法：

public boolean onTouch(View v, MotionEvent event);

從這個方法中我們就可以獲取實現兩指縮放功能的全部信息。

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

不同的事件在MotionEvent中有不同的id，我們可以根據event.getAction() & MotionEvent.ACTION_MASK的結果來判斷是何種事件。

有如下事件使我們要用到的：

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點的坐標，所以當屏幕上有兩個點的時候，我們用如下方法來獲取兩點間的距離：

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);  
}

由以上事件觸發的原理，就可以根據被觸發的不同事件來判斷當前屏幕上的點的個數：

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，就計算兩點間的距離，如果距離增大就把圖片放大，距離減少就把圖片縮小。

於是代碼就成了：

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代碼：

 1 import android.util.FloatMath;  
 2 import android.view.MotionEvent;  
 3 import android.view.View;  
 4 import android.view.View.OnTouchListener;  
 5 import android.widget.TextView;  
 6   
 7 public class ZoomListenter implements OnTouchListener {  
 8   
 9     private int mode = 0;  
10     float oldDist;  
11     float textSize = 0;  
12   
13     TextView textView = null;  
14   
15     @Override  
16     public boolean onTouch(View v, MotionEvent event) {  
17         textView = (TextView) v;  
18         if (textSize == 0) {  
19             textSize = textView.getTextSize();  
20         }  
21         switch (event.getAction() & MotionEvent.ACTION_MASK) {  
22         case MotionEvent.ACTION_DOWN:  
23             mode = 1;  
24             break;  
25         case MotionEvent.ACTION_UP:  
26             mode = 0;  
27             break;  
28         case MotionEvent.ACTION_POINTER_UP:  
29             mode -= 1;  
30             break;  
31         case MotionEvent.ACTION_POINTER_DOWN:  
32             oldDist = spacing(event);  
33             mode += 1;  
34             break;  
35   
36         case MotionEvent.ACTION_MOVE:  
37             if (mode >= 2) {  
38                 float newDist = spacing(event);  
39                 if (newDist > oldDist + 1) {  
40                     zoom(newDist / oldDist);  
41                     oldDist = newDist;  
42                 }  
43                 if (newDist < oldDist - 1) {  
44                     zoom(newDist / oldDist);  
45                     oldDist = newDist;  
46                 }  
47             }  
48             break;  
49         }  
50         return true;  
51     }  
52   
53     private void zoom(float f) {  
54         textView.setTextSize(textSize *= f);  
55     }  
56   
57     private float spacing(MotionEvent event) {  
58         float x = event.getX(0) - event.getX(1);  
59         float y = event.getY(0) - event.getY(1);  
60         return FloatMath.sqrt(x * x + y * y);  
61     }  
62   
63 }

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

二、Android 屏幕手勢滑動

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

所以本人研究了一下android的源碼后，寫了一個小demo：

1、基本原理

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

2、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;  
}

3、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();             
}

4、手勢坐標介紹

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

Android屏幕坐標系如下圖（左）

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

手指向右滑動，終點（e2）在起點（e1）的右側，有e2.getX() - e1.getX() 大於0
手指向左滑動，終點（e2）在起點（e1）的左側，有e2.getX() - e1.getX() 小於0
手指向下滑動，終點（e2）在起點（e1）的下側，有e2.getY() - e1.getY() 大於0
手指向上滑動，終點（e2）在起點（e1）的上側，有e2.getY() - e1.getY() 小於0

（2）onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)

distanceX，是前后兩次call的X距離，不是e2與e1的水平距離

distanceY，是前后兩次call的Y距離，不是e2與e1的垂直距離

具體數值的方向，請詳見上圖（中）

（3）onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)

velocityX，是X軸的每秒速度

velocityY，是Y軸的每秒速度

具體數值的方向，請詳見上圖（右）

仔細觀察可以發現：velocityX、velocityY的方向與distanceX、distanceY方向正好相反

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 iOS開發——UI進階篇（十二）事件處理，觸摸事件，UITouch，UIEvent，響應者鏈條，手勢識別微信小程序~觸摸相關事件（拖拽操作、手勢識別、多點觸控） android手勢操作滑動效果觸摸屏事件處理 Android-手勢識別 iOS開發系列--觸摸事件、手勢識別、搖晃事件、耳機線控手勢識別 Android 手勢滑動，多點觸摸放大縮小圖片 flutter onPressed onTap等手勢檢測及觸摸事件處理手勢識別與事件庫 Touch.js 札記：android手勢識別，MotionEvent