W tym dokumencie opisujemy, jak używać gestów dotykowych do przeciągania i skalowania obiektów na ekranie przy użyciu funkcji onTouchEvent() do przechwytywania zdarzeń dotyku.
Przeciąganie obiektu
Typowa operacja w przypadku gestu dotykowego polega na przeciągnięciu obiektu po ekranie.
Podczas przeciągania lub przewijania aplikacja musi śledzić pierwotny wskaźnik, nawet jeśli dodatkowe palce dotykają ekranu. Wyobraź sobie na przykład, że podczas przeciągania obrazu użytkownik umieszcza drugi palec na ekranie dotykowym i unosi pierwszy. Jeśli aplikacja śledzi tylko pojedyncze wskaźniki, traktuje drugi wskaźnik jako domyślny i przenosi obraz do tej lokalizacji.
Aby temu zapobiec, aplikacja musi odróżniać pierwotny wskaźnik od kolejnych wskaźników. W tym celu śledzi zdarzenia ACTION_POINTER_DOWN i ACTION_POINTER_UP zgodnie z opisem w sekcji Obsługa gestów wielodotykowych.
Parametry ACTION_POINTER_DOWN i ACTION_POINTER_UP są przekazywane do wywołania zwrotnego onTouchEvent() za każdym razem, gdy dodatkowy wskaźnik się przesunie w dół lub w górę.
W przypadku ACTION_POINTER_UP możesz wyodrębnić ten indeks i upewnić się, że identyfikator aktywnego wskaźnika nie odnosi się do wskaźnika, który już nie dotyka ekranu. Jeśli tak, możesz wybrać inny wskaźnik, który będzie aktywny, i zapisać jego bieżącą pozycję na osi X i Y. Użyj tej zapisanej pozycji w przypadku ACTION_MOVE do obliczenia odległości, jaka porusza się obiektem na ekranie. Dzięki temu aplikacja zawsze oblicza odległość do przebycia na podstawie danych z właściwego wskaźnika.
Poniższy fragment kodu pozwala użytkownikowi przeciągnąć obiekt na ekranie. Rejestruje początkową pozycję aktywnego wskaźnika, oblicza odległość, jaką pokonuje, i przesuwa obiekt do nowej pozycji. Prawidłowo zarządza też możliwością pojawienia się dodatkowych wskaźników.
Fragment kodu korzysta z metody getActionMasked(). Zawsze używaj tej metody do pobierania działania obiektu 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;
}
Przeciągnij, aby przesunąć
W poprzedniej sekcji pokazano przykład przeciągania obiektu na ekranie.
Innym typowym scenariuszem jest przesuwanie, które polega na przeciągnięciu palcem przez użytkownika
i przewijaniu zarówno na osi X, jak i po osi Y. Poprzedni fragment kodu bezpośrednio przechwytuje działania MotionEvent, aby zaimplementować przeciąganie. Fragment kodu z tej sekcji korzysta z wbudowanej obsługi typowych gestów na platformie i zastępuje właściwość onScroll() w polu GestureDetector.SimpleOnGestureListener.
Aby zapewnić szerszy kontekst, wywoływana jest funkcja onScroll(), gdy użytkownik przesunie palcem, aby przesunąć treść. Funkcja onScroll() jest wywoływana tylko wtedy, gdy palec jest w dół. Zaraz po oderwaniu palca od ekranu następuje zakończenie gestu lub gest przesuwania, jeśli palec porusza się z pewną prędkością tuż przed podniesieniem. Więcej informacji o przewijaniu i przesuwaniu znajdziesz w artykule Tworzenie animacji gestu przewijania.
Oto fragment kodu aplikacji 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;
}
Implementacja onScroll() przewija widoczny obszar w odpowiedzi na gest kliknięcia:
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);
}
Skaluj, używając dotyku
Jak wspomnieliśmy w sekcji Wykrywanie typowych gestów, GestureDetector służy do wykrywania typowych gestów używanych przez Androida, takich jak przewijanie, przesuwanie oraz dotykanie i przytrzymywanie. Do skalowania Android zapewnia ScaleGestureDetector.
Możesz używać GestureDetector i ScaleGestureDetector razem, jeśli chcesz, aby widok rozpoznawał dodatkowe gesty.
Do raportowania wykrytych zdarzeń gestów używane są obiekty detektora, które są przekazywane do ich konstruktorów. ScaleGestureDetector używa właściwości ScaleGestureDetector.OnScaleGestureListener.
Android udostępnia klasę pomocniczą ScaleGestureDetector.SimpleOnScaleGestureListener, którą możesz rozszerzyć, jeśli nie potrzebujesz wszystkich raportowanych zdarzeń.
Przykład skalowania podstawowego
Poniższy fragment kodu ilustruje podstawowe elementy wykorzystywane przy skalowaniu.
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;
}
}
Przykład bardziej złożonego skalowania
Poniżej znajdziesz bardziej skomplikowany przykład z przykładu InteractiveChart w sekcji Tworzenie animacji gestu przewijania.
Przykładowy element InteractiveChart obsługuje przewijanie, przesuwanie i skalowanie wieloma palcami za pomocą funkcji rozpiętości ScaleGestureDetector (getCurrentSpanX i getCurrentSpanY) oraz „fokus” (getFocusX i 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;
}
};
Dodatkowe materiały
Poniżej znajdziesz więcej informacji o zdarzeniach wejściowych, czujnikach i tworzeniu interaktywnych widoków niestandardowych.