เอกสารนี้อธิบายวิธีใช้ท่าทางสัมผัสเพื่อลากและปรับขนาดออบเจ็กต์บนหน้าจอ โดยใช้ onTouchEvent() เพื่อดักจับเหตุการณ์สัมผัส
ลากออบเจ็กต์
การดำเนินการทั่วไปสำหรับท่าทางสัมผัสคือการใช้ท่าทางสัมผัสเพื่อลากออบเจ็กต์ไปทั่วหน้าจอ
ในการดำเนินการลากหรือเลื่อน แอปจะต้องติดตามตัวชี้เดิม แม้ว่าจะมีนิ้วเพิ่มเติมสัมผัสหน้าจอ ตัวอย่างเช่น ลองนึกภาพว่าขณะลากรูปภาพ ผู้ใช้วางนิ้วที่ 2 บนหน้าจอสัมผัสและยกนิ้วแรกออก หากแอปติดตามเฉพาะตัวชี้แต่ละรายการ แอปจะถือว่าตัวชี้ที่ 2 เป็นตัวชี้เริ่มต้นและย้ายรูปภาพไปยังตำแหน่งนั้น
แอปต้องแยกความแตกต่างระหว่างตัวชี้เดิมกับตัวชี้ที่ตามมาเพื่อป้องกันไม่ให้เกิดเหตุการณ์นี้ โดยแอปจะติดตามเหตุการณ์
ACTION_POINTER_DOWN
และ
ACTION_POINTER_UP
ตามที่อธิบายไว้ในหัวข้อจัดการท่าทางสัมผัสแบบมัลติทัช
ระบบจะส่ง ACTION_POINTER_DOWN และ ACTION_POINTER_UP ไปยัง Callback onTouchEvent() ทุกครั้งที่ Pointer รองลงหรือขึ้น
ในกรณี 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
ร่วมกันได้เมื่อต้องการให้มุมมองจดจำท่าทางสัมผัสเพิ่มเติม
เครื่องมือตรวจหาท่าทางสัมผัสใช้ออบเจ็กต์ Listener ที่ส่งไปยังตัวสร้างเพื่อรายงานเหตุการณ์ท่าทางสัมผัสที่ตรวจพบ ScaleGestureDetector ใช้
ScaleGestureDetector.OnScaleGestureListener
Android มี ScaleGestureDetector.SimpleOnScaleGestureListener เป็นคลาส Helper ที่คุณขยายได้หากไม่ต้องการเหตุการณ์ที่รายงานทั้งหมด
ตัวอย่างการปรับขนาดพื้นฐาน
ข้อมูลโค้ดต่อไปนี้แสดงองค์ประกอบพื้นฐานที่เกี่ยวข้องกับการปรับขนาด
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 (getCurrentSpanX และ getCurrentSpanY) และฟีเจอร์ "โฟกัส" (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; } };
แหล่งข้อมูลเพิ่มเติม
ดูข้อมูลอ้างอิงต่อไปนี้เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์อินพุต เซ็นเซอร์ และการสร้างมุมมองที่กำหนดเองแบบโต้ตอบ