拖拽与缩放

编写:Andrwyw - 原文:http://developer.android.com/training/gestures/scale.html

本节课程讲述，使用onTouchEvent()截获触摸事件后，如何使用触摸手势拖拽、缩放屏幕上的对象。

拖拽一个对象

如果我们的目标版本为3.0或以上，我们可以使用View.OnDragListener监听内置的拖放（drag-and-drop）事件，拖拽与释放中有更多相关描述。

对于触摸手势来说，一个很常见的操作是在屏幕上拖拽一个对象。接下来的代码段让用户可以拖拽屏幕上的图片。需要注意以下几点：

  • 拖拽操作时，即使有额外的手指放置到屏幕上了，app也必须保持对最初的点（手指）的追踪。比如，想象在拖拽图片时，用户放置了第二根手指在屏幕上，并且抬起了第一根手指。如果我们的app只是单独地追踪每个点，它会把第二个点当做默认的点，并且把图片移到该点的位置。
  • 为了防止这种情况发生，我们的app需要区分初始点以及随后任意的触摸点。要做到这一点，它需要追踪处理多触摸手势章节中提到过的 ACTION_POINTER_DOWN 和 ACTION_POINTER_UP 事件。每当第二根手指按下或拿起时，ACTION_POINTER_DOWN 和 ACTION_POINTER_UP 事件就会传递给onTouchEvent()回调函数。
  • 当ACTION_POINTER_UP事件发生时，示例程序会移除对该点的索引值的引用，确保操作中的点的ID(the active pointer ID)不会引用已经不在触摸屏上的触摸点。这种情况下，app会选择另一个触摸点来作为操作中(active)的点，并保存它当前的x、y值。由于在ACTION_MOVE事件时，这个保存的位置会被用来计算屏幕上的对象将要移动的距离，所以app会始终根据正确的触摸点来计算移动的距离。

下面的代码段允许用户拖拽屏幕上的对象。它会记录操作中的点（active pointer）的初始位置，计算触摸点移动过的距离，再把对象移动到新的位置。如上所述，它也正确地处理了额外触摸点的可能。

需要注意的是，代码段中使用了getActionMasked()函数。我们应该始终使用这个函数（或者最好用MotionEventCompat.getActionMasked()这个兼容版本）来获得MotionEvent对应的动作(action)。不像旧的getAction()函数，getActionMasked()就是设计用来处理多点触摸的。它会返回执行过的动作的掩码值，不包括该点的索引位。

  1. // The ‘active pointer’ is the one currently moving our object.
  2. private int mActivePointerId = INVALID_POINTER_ID;
  4. @Override
  5. public boolean onTouchEvent(MotionEvent ev) {
  6.     // Let the ScaleGestureDetector inspect all events.
  7.     mScaleDetector.onTouchEvent(ev);
  9.     final int action = MotionEventCompat.getActionMasked(ev);
  11.     switch (action) {
  12.     case MotionEvent.ACTION_DOWN: {
  13.         final int pointerIndex = MotionEventCompat.getActionIndex(ev);
  14.         final float x = MotionEventCompat.getX(ev, pointerIndex);
  15.         final float y = MotionEventCompat.getY(ev, pointerIndex);
  17.         // Remember where we started (for dragging)
  18.         mLastTouchX = x;
  19.         mLastTouchY = y;
  20.         // Save the ID of this pointer (for dragging)
  21.         mActivePointerId = MotionEventCompat.getPointerId(ev, 0);
  22.         break;
  23.     }
  25.     case MotionEvent.ACTION_MOVE: {
  26.         // Find the index of the active pointer and fetch its position
  27.         final int pointerIndex =
  28.                 MotionEventCompat.findPointerIndex(ev, mActivePointerId);
  30.         final float x = MotionEventCompat.getX(ev, pointerIndex);
  31.         final float y = MotionEventCompat.getY(ev, pointerIndex);
  33.         // Calculate the distance moved
  34.         final float dx = x - mLastTouchX;
  35.         final float dy = y - mLastTouchY;
  37.         mPosX += dx;
  38.         mPosY += dy;
  40.         invalidate();
  42.         // Remember this touch position for the next move event
  43.         mLastTouchX = x;
  44.         mLastTouchY = y;
  46.         break;
  47.     }
  49.     case MotionEvent.ACTION_UP: {
  50.         mActivePointerId = INVALID_POINTER_ID;
  51.         break;
  52.     }
  54.     case MotionEvent.ACTION_CANCEL: {
  55.         mActivePointerId = INVALID_POINTER_ID;
  56.         break;
  57.     }
  59.     case MotionEvent.ACTION_POINTER_UP: {
  61.         final int pointerIndex = MotionEventCompat.getActionIndex(ev);
  62.         final int pointerId = MotionEventCompat.getPointerId(ev, pointerIndex);
  64.         if (pointerId == mActivePointerId) {
  65.             // This was our active pointer going up. Choose a new
  66.             // active pointer and adjust accordingly.
  67.             final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
  68.             mLastTouchX = MotionEventCompat.getX(ev, newPointerIndex);
  69.             mLastTouchY = MotionEventCompat.getY(ev, newPointerIndex);
  70.             mActivePointerId = MotionEventCompat.getPointerId(ev, newPointerIndex);
  71.         }
  72.         break;
  73.     }
  74.     }
  75.     return true;
  76. }

通过拖拽平移

前一节展示了一个，在屏幕上拖拽对象的例子。另一个常见的场景是平移（panning），平移是指用户通过拖拽移动引起x、y轴方向发生滚动(scrolling)。上面的代码段直接截获了MotionEvent动作来实现拖拽。这一部分的代码段，利用了平台对常用手势的内置支持。它重写了GestureDetector.SimpleOnGestureListener的onScroll()函数。

更详细地说，当用户拖拽手指来平移内容时，onScroll()函数就会被调用。onScroll()函数只会在手指按下的情况下被调用，一旦手指离开屏幕了，要么手势终止，要么快速滑动(fling)手势开始（如果手指在离开屏幕前快速移动了一段距离）。关于滚动与快速滑动的更多讨论，可以查看滚动手势动画章节。

这里是onScroll()的相关代码段：

  1. // The current viewport. This rectangle represents the currently visible
  2. // chart domain and range.
  3. private RectF mCurrentViewport =
  4.         new RectF(AXIS_X_MIN, AXIS_Y_MIN, AXIS_X_MAX, AXIS_Y_MAX);
  6. // The current destination rectangle (in pixel coordinates) into which the
  7. // chart data should be drawn.
  8. private Rect mContentRect;
  10. private final GestureDetector.SimpleOnGestureListener mGestureListener
  11.             = new GestureDetector.SimpleOnGestureListener() {
  12. ...
  14. @Override
  15. public boolean onScroll(MotionEvent e1, MotionEvent e2,
  16.             float distanceX, float distanceY) {
  17.     // Scrolling uses math based on the viewport (as opposed to math using pixels).
  19.     // Pixel offset is the offset in screen pixels, while viewport offset is the
  20.     // offset within the current viewport.
  21.     float viewportOffsetX = distanceX * mCurrentViewport.width()
  22.             / mContentRect.width();
  23.     float viewportOffsetY = -distanceY * mCurrentViewport.height()
  24.             / mContentRect.height();
  25.     ...
  26.     // Updates the viewport, refreshes the display.
  27.     setViewportBottomLeft(
  28.             mCurrentViewport.left + viewportOffsetX,
  29.             mCurrentViewport.bottom + viewportOffsetY);
  30.     ...
  31.     return true;
  32. }

onScroll()函数中滑动视窗(viewport)来响应触摸手势的实现：

  1. /**
  2.  * Sets the current viewport (defined by mCurrentViewport) to the given
  3.  * X and Y positions. Note that the Y value represents the topmost pixel position,
  4.  * and thus the bottom of the mCurrentViewport rectangle.
  5.  */
  6. private void setViewportBottomLeft(float x, float y) {
  7.     /*
  8.      * Constrains within the scroll range. The scroll range is simply the viewport
  9.      * extremes (AXIS_X_MAX, etc.) minus the viewport size. For example, if the
  10.      * extremes were 0 and 10, and the viewport size was 2, the scroll range would
  11.      * be 0 to 8.
  12.      */
  14.     float curWidth = mCurrentViewport.width();
  15.     float curHeight = mCurrentViewport.height();
  16.     x = Math.max(AXIS_X_MIN, Math.min(x, AXIS_X_MAX - curWidth));
  17.     y = Math.max(AXIS_Y_MIN + curHeight, Math.min(y, AXIS_Y_MAX));
  19.     mCurrentViewport.set(x, y - curHeight, x + curWidth, y);
  21.     // Invalidates the View to update the display.
  22.     ViewCompat.postInvalidateOnAnimation(this);
  23. }

使用触摸手势进行缩放

如同检测常用手势章节中提到的，GestureDetector可以帮助我们检测Android中的常见手势，例如滚动，快速滚动以及长按。对于缩放，Android也提供了ScaleGestureDetector类。当我们想让view能识别额外的手势时，我们可以同时使用GestureDetector和ScaleGestureDetector类。

为了报告检测到的手势事件，手势检测需要一个作为构造函数参数的listener对象。ScaleGestureDetector使用ScaleGestureDetector.OnScaleGestureListener。Android提供了ScaleGestureDetector.SimpleOnScaleGestureListener类作为帮助类，如果我们不是关注所有的手势事件，我们可以继承(extend)它。

基本的缩放示例

下面的代码段展示了缩放功能中的基本部分。

  1. private ScaleGestureDetector mScaleDetector;
  2. private float mScaleFactor = 1.f;
  4. public MyCustomView(Context mContext){
  5.     ...
  6.     // View code goes here
  7.     ...
  8.     mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
  9. }
  11. @Override
  12. public boolean onTouchEvent(MotionEvent ev) {
  13.     // Let the ScaleGestureDetector inspect all events.
  14.     mScaleDetector.onTouchEvent(ev);
  15.     return true;
  16. }
  18. @Override
  19. public void onDraw(Canvas canvas) {
  20.     super.onDraw(canvas);
  22.     canvas.save();
  23.     canvas.scale(mScaleFactor, mScaleFactor);
  24.     ...
  25.     // onDraw() code goes here
  26.     ...
  27.     canvas.restore();
  28. }
  30. private class ScaleListener
  31.         extends ScaleGestureDetector.SimpleOnScaleGestureListener {
  32.     @Override
  33.     public boolean onScale(ScaleGestureDetector detector) {
  34.         mScaleFactor *= detector.getScaleFactor();
  36.         // Don't let the object get too small or too large.
  37.         mScaleFactor = Math.max(0.1f, Math.min(mScaleFactor, 5.0f));
  39.         invalidate();
  40.         return true;
  41.     }
  42. }

更加复杂的缩放示例

这是本章节提供的InteractiveChart示例中一个更复杂的示范。通过使用ScaleGestureDetector中的”span”(getCurrentSpanX/Y)和”focus”(getFocusX/Y)功能，InteractiveChart示例同时支持滚动（平移）以及多指缩放。

  1. @Override
  2. private RectF mCurrentViewport =
  3.         new RectF(AXIS_X_MIN, AXIS_Y_MIN, AXIS_X_MAX, AXIS_Y_MAX);
  4. private Rect mContentRect;
  5. private ScaleGestureDetector mScaleGestureDetector;
  6. ...
  7. public boolean onTouchEvent(MotionEvent event) {
  8.     boolean retVal = mScaleGestureDetector.onTouchEvent(event);
  9.     retVal = mGestureDetector.onTouchEvent(event) || retVal;
  10.     return retVal || super.onTouchEvent(event);
  11. }
  13. /**
  14.  * The scale listener, used for handling multi-finger scale gestures.
  15.  */
  16. private final ScaleGestureDetector.OnScaleGestureListener mScaleGestureListener
  17.         = new ScaleGestureDetector.SimpleOnScaleGestureListener() {
  18.     /**
  19.      * This is the active focal point in terms of the viewport. Could be a local
  20.      * variable but kept here to minimize per-frame allocations.
  21.      */
  22.     private PointF viewportFocus = new PointF();
  23.     private float lastSpanX;
  24.     private float lastSpanY;
  26.     // Detects that new pointers are going down.
  27.     @Override
  28.     public boolean onScaleBegin(ScaleGestureDetector scaleGestureDetector) {
  29.         lastSpanX = ScaleGestureDetectorCompat.
  30.                 getCurrentSpanX(scaleGestureDetector);
  31.         lastSpanY = ScaleGestureDetectorCompat.
  32.                 getCurrentSpanY(scaleGestureDetector);
  33.         return true;
  34.     }
  36.     @Override
  37.     public boolean onScale(ScaleGestureDetector scaleGestureDetector) {
  39.         float spanX = ScaleGestureDetectorCompat.
  40.                 getCurrentSpanX(scaleGestureDetector);
  41.         float spanY = ScaleGestureDetectorCompat.
  42.                 getCurrentSpanY(scaleGestureDetector);
  44.         float newWidth = lastSpanX / spanX * mCurrentViewport.width();
  45.         float newHeight = lastSpanY / spanY * mCurrentViewport.height();
  47.         float focusX = scaleGestureDetector.getFocusX();
  48.         float focusY = scaleGestureDetector.getFocusY();
  49.         // Makes sure that the chart point is within the chart region.
  50.         // See the sample for the implementation of hitTest().
  51.         hitTest(scaleGestureDetector.getFocusX(),
  52.                 scaleGestureDetector.getFocusY(),
  53.                 viewportFocus);
  55.         mCurrentViewport.set(
  56.                 viewportFocus.x
  57.                         - newWidth * (focusX - mContentRect.left)
  58.                         / mContentRect.width(),
  59.                 viewportFocus.y
  60.                         - newHeight * (mContentRect.bottom - focusY)
  61.                         / mContentRect.height(),
  62.                 0,
  63.                 0);
  64.         mCurrentViewport.right = mCurrentViewport.left + newWidth;
  65.         mCurrentViewport.bottom = mCurrentViewport.top + newHeight;
  66.         ...
  67.         // Invalidates the View to update the display.
  68.         ViewCompat.postInvalidateOnAnimation(InteractiveLineGraphView.this);
  70.         lastSpanX = spanX;
  71.         lastSpanY = spanY;
  72.         return true;
  73.     }
  74. };