เอกสารนี้อธิบายวิธีใช้ท่าทางสัมผัสในการลากและปรับขนาดออบเจ็กต์บนหน้าจอโดยใช้ onTouchEvent()
เพื่อขัดจังหวะเหตุการณ์การสัมผัส
ลากวัตถุ
การดำเนินการทั่วไปสำหรับท่าทางสัมผัสคือการลากวัตถุไปทั่วหน้าจอ
ในการลากหรือเลื่อน แอปต้องติดตามเคอร์เซอร์เดิม แม้ว่าจะมีนิ้วอื่นๆ แตะหน้าจอก็ตาม ตัวอย่างเช่น สมมติว่าขณะลากรูปภาพ ผู้ใช้วางนิ้วที่ 2 บนหน้าจอสัมผัสแล้วยกนิ้วที่ 1 ขึ้น หากแอปติดตามเฉพาะเคอร์เซอร์แต่ละตัว แอปจะถือว่าเคอร์เซอร์ที่ 2 เป็นค่าเริ่มต้นและย้ายรูปภาพไปยังตำแหน่งนั้น
แอปของคุณต้องแยกความแตกต่างระหว่างเคอร์เซอร์เดิมกับเคอร์เซอร์ที่ตามมาเพื่อป้องกันไม่ให้เกิดกรณีนี้ โดยติดตามเหตุการณ์ ACTION_POINTER_DOWN
และ ACTION_POINTER_UP
ตามที่อธิบายไว้ในจัดการท่าทางสัมผัสหลายแบบ
ระบบจะส่ง ACTION_POINTER_DOWN
และ ACTION_POINTER_UP
ไปยังการเรียกกลับ onTouchEvent()
ทุกครั้งที่เคอร์เซอร์รองเลื่อนขึ้นหรือลง
ในกรณี ACTION_POINTER_UP
คุณสามารถดึงข้อมูลดัชนีนี้และตรวจสอบว่ารหัสเคอร์เซอร์ที่ใช้งานอยู่ไม่ได้อ้างอิงถึงเคอร์เซอร์ที่ไม่ได้สัมผัสหน้าจอแล้ว หากเป็นเช่นนั้น คุณจะเลือกเคอร์เซอร์อื่นให้ทำงานอยู่ได้ และบันทึกตำแหน่ง X และ Y ปัจจุบัน ใช้ตำแหน่งที่บันทึกไว้นี้ใน
ACTION_MOVE
เคสเพื่อคำนวณระยะทางในการย้ายวัตถุบนหน้าจอ วิธีนี้จะช่วยให้แอปคำนวณระยะทางที่จะย้ายโดยใช้ข้อมูลจากเคอร์เซอร์ที่ถูกต้องเสมอ
ข้อมูลโค้ดต่อไปนี้ช่วยให้ผู้ใช้ลากวัตถุบนหน้าจอได้ โดยจะบันทึกตำแหน่งเริ่มต้นของเคอร์เซอร์ที่ใช้งานอยู่ คำนวณระยะทางที่เคอร์เซอร์เคลื่อนที่ และย้ายออบเจ็กต์ไปยังตำแหน่งใหม่ รวมถึงจัดการความเป็นไปได้ของเคอร์เซอร์เพิ่มเติมอย่างถูกต้อง
ข้อมูลโค้ดใช้วิธี getActionMasked()
ใช้เมธอดนี้เสมอเพื่อดึงข้อมูลการดำเนินการของ
MotionEvent
Kotlin
// The "active pointer" is the one moving the object. private var mActivePointerId = INVALID_POINTER_ID override fun onTouchEvent(ev: MotionEvent): Boolean { // Let the ScaleGestureDetector inspect all events. mScaleDetector.onTouchEvent(ev) val action = MotionEventCompat.getActionMasked(ev) when (action) { MotionEvent.ACTION_DOWN -> { MotionEventCompat.getActionIndex(ev).also { pointerIndex -> // Remember where you start for dragging. mLastTouchX = MotionEventCompat.getX(ev, pointerIndex) mLastTouchY = MotionEventCompat.getY(ev, pointerIndex) } // Save the ID of this pointer for dragging. mActivePointerId = MotionEventCompat.getPointerId(ev, 0) } MotionEvent.ACTION_MOVE -> { // Find the index of the active pointer and fetch its position. val (x: Float, y: Float) = MotionEventCompat.findPointerIndex(ev, mActivePointerId).let { pointerIndex -> // Calculate the distance moved. MotionEventCompat.getX(ev, pointerIndex) to MotionEventCompat.getY(ev, pointerIndex) } mPosX += x - mLastTouchX mPosY += y - mLastTouchY invalidate() // Remember this touch position for the next move event. mLastTouchX = x mLastTouchY = y } MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> { mActivePointerId = INVALID_POINTER_ID } MotionEvent.ACTION_POINTER_UP -> { MotionEventCompat.getActionIndex(ev).also { pointerIndex -> MotionEventCompat.getPointerId(ev, pointerIndex) .takeIf { it == mActivePointerId } ?.run { // This is the active pointer going up. Choose a new // active pointer and adjust it accordingly. val newPointerIndex = if (pointerIndex == 0) 1 else 0 mLastTouchX = MotionEventCompat.getX(ev, newPointerIndex) mLastTouchY = MotionEventCompat.getY(ev, newPointerIndex) mActivePointerId = MotionEventCompat.getPointerId(ev, newPointerIndex) } } } } return true }
Java
// The "active pointer" is the one moving the object. private int mActivePointerId = INVALID_POINTER_ID; @Override public boolean onTouchEvent(MotionEvent ev) { // Let the ScaleGestureDetector inspect all events. mScaleDetector.onTouchEvent(ev); final int action = MotionEventCompat.getActionMasked(ev); switch (action) { case MotionEvent.ACTION_DOWN: { final int pointerIndex = MotionEventCompat.getActionIndex(ev); final float x = MotionEventCompat.getX(ev, pointerIndex); final float y = MotionEventCompat.getY(ev, pointerIndex); // Remember the starting position of the pointer. mLastTouchX = x; mLastTouchY = y; // Save the ID of this pointer for dragging. mActivePointerId = MotionEventCompat.getPointerId(ev, 0); break; } case MotionEvent.ACTION_MOVE: { // Find the index of the active pointer and fetch its position. final int pointerIndex = MotionEventCompat.findPointerIndex(ev, mActivePointerId); final float x = MotionEventCompat.getX(ev, pointerIndex); final float y = MotionEventCompat.getY(ev, pointerIndex); // Calculate the distance moved. final float dx = x - mLastTouchX; final float dy = y - mLastTouchY; mPosX += dx; mPosY += dy; invalidate(); // Remember this touch position for the next move event. mLastTouchX = x; mLastTouchY = y; break; } case MotionEvent.ACTION_UP: { mActivePointerId = INVALID_POINTER_ID; break; } case MotionEvent.ACTION_CANCEL: { mActivePointerId = INVALID_POINTER_ID; break; } case MotionEvent.ACTION_POINTER_UP: { final int pointerIndex = MotionEventCompat.getActionIndex(ev); final int pointerId = MotionEventCompat.getPointerId(ev, pointerIndex); if (pointerId == mActivePointerId) { // This is the active pointer going up. Choose a new // active pointer and adjust it accordingly. final int newPointerIndex = pointerIndex == 0 ? 1 : 0; mLastTouchX = MotionEventCompat.getX(ev, newPointerIndex); mLastTouchY = MotionEventCompat.getY(ev, newPointerIndex); mActivePointerId = MotionEventCompat.getPointerId(ev, newPointerIndex); } break; } } return true; }
ลากเพื่อเลื่อน
ส่วนก่อนหน้าแสดงตัวอย่างการลากวัตถุบนหน้าจอ
อีกสถานการณ์ที่พบบ่อยคือการปัด ซึ่งเกิดขึ้นเมื่อการเคลื่อนไหวการลากของผู้ใช้ทําให้เลื่อนทั้งในแกน X และ Y ข้อมูลโค้ดก่อนหน้าจะขัดจังหวะการดำเนินการ MotionEvent
โดยตรงเพื่อใช้การลาก ข้อมูลโค้ดในส่วนนี้ใช้ประโยชน์จากการรองรับท่าทางสัมผัสทั่วไปที่มีอยู่ในแพลตฟอร์มโดยการลบล้าง onScroll()
ใน GestureDetector.SimpleOnGestureListener
ระบบจะเรียกใช้ onScroll()
เมื่อผู้ใช้ลากนิ้วเพื่อเลื่อนเนื้อหาเพื่อให้บริบทเพิ่มเติม onScroll()
จะเรียกใช้ก็ต่อเมื่อนิ้วกดลงเท่านั้น ทันทีที่ยกนิ้วออกจากหน้าจอ ท่าทางสัมผัสจะสิ้นสุดลงหรือเริ่มใช้ท่าทางฟลิง หากนิ้วกำลังเคลื่อนไหวด้วยความเร็วหนึ่งๆ ก่อนที่จะยกขึ้น ดูข้อมูลเพิ่มเติมเกี่ยวกับการเลื่อนเทียบกับการปัดได้ที่สร้างภาพเคลื่อนไหวจากท่าทางสัมผัสในการเลื่อน
ข้อมูลโค้ดสําหรับ onScroll()
มีดังนี้
Kotlin
// The current viewport. This rectangle represents the visible // chart domain and range. private val mCurrentViewport = RectF(AXIS_X_MIN, AXIS_Y_MIN, AXIS_X_MAX, AXIS_Y_MAX) // The current destination rectangle, in pixel coordinates, into which the // chart data must be drawn. private val mContentRect: Rect? = null private val mGestureListener = object : GestureDetector.SimpleOnGestureListener() { ... override fun onScroll( e1: MotionEvent, e2: MotionEvent, distanceX: Float, distanceY: Float ): Boolean { // Scrolling uses math based on the viewport, as opposed to math using // pixels. mContentRect?.apply { // Pixel offset is the offset in screen pixels, while viewport offset is the // offset within the current viewport. val viewportOffsetX = distanceX * mCurrentViewport.width() / width() val viewportOffsetY = -distanceY * mCurrentViewport.height() / height() // Updates the viewport and refreshes the display. setViewportBottomLeft( mCurrentViewport.left + viewportOffsetX, mCurrentViewport.bottom + viewportOffsetY ) } return true } }
Java
// The current viewport. This rectangle represents the visible // chart domain and range. private RectF mCurrentViewport = new RectF(AXIS_X_MIN, AXIS_Y_MIN, AXIS_X_MAX, AXIS_Y_MAX); // The current destination rectangle, in pixel coordinates, into which the // chart data must be drawn. private Rect mContentRect; private final GestureDetector.SimpleOnGestureListener mGestureListener = new GestureDetector.SimpleOnGestureListener() { ... @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { // Scrolling uses math based on the viewport, as opposed to math using // pixels. // Pixel offset is the offset in screen pixels, while viewport offset is the // offset within the current viewport. float viewportOffsetX = distanceX * mCurrentViewport.width() / mContentRect.width(); float viewportOffsetY = -distanceY * mCurrentViewport.height() / mContentRect.height(); ... // Updates the viewport, refreshes the display. setViewportBottomLeft( mCurrentViewport.left + viewportOffsetX, mCurrentViewport.bottom + viewportOffsetY); ... return true; }
การใช้ onScroll()
จะเลื่อนวิวพอร์ตขึ้นเพื่อตอบสนองต่อท่าทางสัมผัสต่อไปนี้
Kotlin
/** * Sets the current viewport, defined by mCurrentViewport, to the given * X and Y positions. The Y value represents the topmost pixel position, * and thus the bottom of the mCurrentViewport rectangle. */ private fun setViewportBottomLeft(x: Float, y: Float) { /* * Constrains within the scroll range. The scroll range is the viewport * extremes, such as AXIS_X_MAX, minus the viewport size. For example, if * the extremes are 0 and 10 and the viewport size is 2, the scroll range * is 0 to 8. */ val curWidth: Float = mCurrentViewport.width() val curHeight: Float = mCurrentViewport.height() val newX: Float = Math.max(AXIS_X_MIN, Math.min(x, AXIS_X_MAX - curWidth)) val newY: Float = Math.max(AXIS_Y_MIN + curHeight, Math.min(y, AXIS_Y_MAX)) mCurrentViewport.set(newX, newY - curHeight, newX + curWidth, newY) // Invalidates the View to update the display. ViewCompat.postInvalidateOnAnimation(this) }
Java
/** * Sets the current viewport (defined by mCurrentViewport) to the given * X and Y positions. Note that the Y value represents the topmost pixel * position, and thus the bottom of the mCurrentViewport rectangle. */ private void setViewportBottomLeft(float x, float y) { /* * Constrains within the scroll range. The scroll range is the viewport * extremes, such as AXIS_X_MAX, minus the viewport size. For example, if * the extremes are 0 and 10 and the viewport size is 2, the scroll range * is 0 to 8. */ float curWidth = mCurrentViewport.width(); float curHeight = mCurrentViewport.height(); x = Math.max(AXIS_X_MIN, Math.min(x, AXIS_X_MAX - curWidth)); y = Math.max(AXIS_Y_MIN + curHeight, Math.min(y, AXIS_Y_MAX)); mCurrentViewport.set(x, y - curHeight, x + curWidth, y); // Invalidates the View to update the display. ViewCompat.postInvalidateOnAnimation(this); }
ใช้การสัมผัสเพื่อปรับขนาด
ดังที่ได้กล่าวไว้ในตรวจหาท่าทางสัมผัสทั่วไป ให้ใช้
GestureDetector
เพื่อตรวจหาท่าทางสัมผัสทั่วไปที่ Android ใช้ เช่น การเลื่อน การปัด และการวางนิ้วแตะค้างไว้ สำหรับการปรับขนาด Android มีตัวเลือก ScaleGestureDetector
คุณใช้ GestureDetector
และ ScaleGestureDetector
ร่วมกันได้เมื่อต้องการให้มุมมองจดจำท่าทางสัมผัสเพิ่มเติม
ตัวตรวจจับท่าทางใช้ออบเจ็กต์ตัวฟังที่ส่งไปยังตัวสร้างคอนสตรัคเตอร์เพื่อรายงานเหตุการณ์ท่าทางที่ตรวจพบ ScaleGestureDetector
ใช้
ScaleGestureDetector.OnScaleGestureListener
Android มี ScaleGestureDetector.SimpleOnScaleGestureListener
ให้บริการเป็นคลาสตัวช่วยที่คุณสามารถขยายได้หากไม่ต้องการเหตุการณ์ที่รายงานทั้งหมด
ตัวอย่างการปรับขนาดพื้นฐาน
ข้อมูลโค้ดต่อไปนี้แสดงองค์ประกอบพื้นฐานที่เกี่ยวข้องกับการปรับขนาด
Kotlin
private var mScaleFactor = 1f private val scaleListener = object : ScaleGestureDetector.SimpleOnScaleGestureListener() { override fun onScale(detector: ScaleGestureDetector): Boolean { mScaleFactor *= detector.scaleFactor // Don't let the object get too small or too large. mScaleFactor = Math.max(0.1f, Math.min(mScaleFactor, 5.0f)) invalidate() return true } } private val mScaleDetector = ScaleGestureDetector(context, scaleListener) override fun onTouchEvent(ev: MotionEvent): Boolean { // Let the ScaleGestureDetector inspect all events. mScaleDetector.onTouchEvent(ev) return true } override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) canvas?.apply { save() scale(mScaleFactor, mScaleFactor) // onDraw() code goes here. restore() } }
Java
private ScaleGestureDetector mScaleDetector; private float mScaleFactor = 1.f; public MyCustomView(Context mContext){ ... // View code goes here. ... mScaleDetector = new ScaleGestureDetector(context, new ScaleListener()); } @Override public boolean onTouchEvent(MotionEvent ev) { // Let the ScaleGestureDetector inspect all events. mScaleDetector.onTouchEvent(ev); return true; } @Override public void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.save(); canvas.scale(mScaleFactor, mScaleFactor); ... // onDraw() code goes here. ... canvas.restore(); } private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener { @Override public boolean onScale(ScaleGestureDetector detector) { mScaleFactor *= detector.getScaleFactor(); // Don't let the object get too small or too large. mScaleFactor = Math.max(0.1f, Math.min(mScaleFactor, 5.0f)); invalidate(); return true; } }
ตัวอย่างการปรับขนาดที่ซับซ้อนมากขึ้น
ตัวอย่างต่อไปนี้ซับซ้อนกว่าจากตัวอย่าง InteractiveChart
ที่แสดงในภาพเคลื่อนไหวท่าทางสัมผัสในการเลื่อน
ตัวอย่าง InteractiveChart
รองรับการเลื่อน การแพน และการปรับขนาดด้วยนิ้วหลายนิ้วโดยใช้ฟีเจอร์ ScaleGestureDetector
span (getCurrentSpanX
และ getCurrentSpanY
) และ "focus" (getFocusX
และ getFocusY
)
Kotlin
private val mCurrentViewport = RectF(AXIS_X_MIN, AXIS_Y_MIN, AXIS_X_MAX, AXIS_Y_MAX) private val mContentRect: Rect? = null ... override fun onTouchEvent(event: MotionEvent): Boolean { return mScaleGestureDetector.onTouchEvent(event) || mGestureDetector.onTouchEvent(event) || super.onTouchEvent(event) } /** * The scale listener, used for handling multi-finger scale gestures. */ private val mScaleGestureListener = object : ScaleGestureDetector.SimpleOnScaleGestureListener() { /** * This is the active focal point in terms of the viewport. It can be a * local variable, but keep it here to minimize per-frame allocations. */ private val viewportFocus = PointF() private var lastSpanX: Float = 0f private var lastSpanY: Float = 0f // Detects new pointers are going down. override fun onScaleBegin(scaleGestureDetector: ScaleGestureDetector): Boolean { lastSpanX = scaleGestureDetector.currentSpanX lastSpanY = scaleGestureDetector.currentSpanY return true } override fun onScale(scaleGestureDetector: ScaleGestureDetector): Boolean { val spanX: Float = scaleGestureDetector.currentSpanX val spanY: Float = scaleGestureDetector.currentSpanY val newWidth: Float = lastSpanX / spanX * mCurrentViewport.width() val newHeight: Float = lastSpanY / spanY * mCurrentViewport.height() val focusX: Float = scaleGestureDetector.focusX val focusY: Float = scaleGestureDetector.focusY // Ensures the chart point is within the chart region. // See the sample for the implementation of hitTest(). hitTest(focusX, focusY, viewportFocus) mContentRect?.apply { mCurrentViewport.set( viewportFocus.x - newWidth * (focusX - left) / width(), viewportFocus.y - newHeight * (bottom - focusY) / height(), 0f, 0f ) } mCurrentViewport.right = mCurrentViewport.left + newWidth mCurrentViewport.bottom = mCurrentViewport.top + newHeight // Invalidates the View to update the display. ViewCompat.postInvalidateOnAnimation(this@InteractiveLineGraphView) lastSpanX = spanX lastSpanY = spanY return true } }
Java
private RectF mCurrentViewport = new RectF(AXIS_X_MIN, AXIS_Y_MIN, AXIS_X_MAX, AXIS_Y_MAX); private Rect mContentRect; private ScaleGestureDetector mScaleGestureDetector; ... @Override public boolean onTouchEvent(MotionEvent event) { boolean retVal = mScaleGestureDetector.onTouchEvent(event); retVal = mGestureDetector.onTouchEvent(event) || retVal; return retVal || super.onTouchEvent(event); } /** * The scale listener, used for handling multi-finger scale gestures. */ private final ScaleGestureDetector.OnScaleGestureListener mScaleGestureListener = new ScaleGestureDetector.SimpleOnScaleGestureListener() { /** * This is the active focal point in terms of the viewport. It can be a * local variable, but keep it here to minimize per-frame allocations. */ private PointF viewportFocus = new PointF(); private float lastSpanX; private float lastSpanY; // Detects new pointers are going down. @Override public boolean onScaleBegin(ScaleGestureDetector scaleGestureDetector) { lastSpanX = ScaleGestureDetectorCompat. getCurrentSpanX(scaleGestureDetector); lastSpanY = ScaleGestureDetectorCompat. getCurrentSpanY(scaleGestureDetector); return true; } @Override public boolean onScale(ScaleGestureDetector scaleGestureDetector) { float spanX = ScaleGestureDetectorCompat. getCurrentSpanX(scaleGestureDetector); float spanY = ScaleGestureDetectorCompat. getCurrentSpanY(scaleGestureDetector); float newWidth = lastSpanX / spanX * mCurrentViewport.width(); float newHeight = lastSpanY / spanY * mCurrentViewport.height(); float focusX = scaleGestureDetector.getFocusX(); float focusY = scaleGestureDetector.getFocusY(); // Ensures the chart point is within the chart region. // See the sample for the implementation of hitTest(). hitTest(scaleGestureDetector.getFocusX(), scaleGestureDetector.getFocusY(), viewportFocus); mCurrentViewport.set( viewportFocus.x - newWidth * (focusX - mContentRect.left) / mContentRect.width(), viewportFocus.y - newHeight * (mContentRect.bottom - focusY) / mContentRect.height(), 0, 0); mCurrentViewport.right = mCurrentViewport.left + newWidth; mCurrentViewport.bottom = mCurrentViewport.top + newHeight; ... // Invalidates the View to update the display. ViewCompat.postInvalidateOnAnimation(InteractiveLineGraphView.this); lastSpanX = spanX; lastSpanY = spanY; return true; } };
แหล่งข้อมูลเพิ่มเติม
ดูข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์อินพุต เซ็นเซอร์ และการสร้างมุมมองที่กําหนดเองให้เป็นแบบอินเทอร์แอกทีฟได้ที่ข้อมูลอ้างอิงต่อไปนี้