Cómo animar un gesto de desplazamiento

Prueba la forma de Compose

Jetpack Compose es el kit de herramientas de IU recomendado para Android. Aprende a usar el sistema táctil y la entrada en Compose.

Desplazamiento →

En Android, el desplazamiento generalmente se logra con la clase ScrollView. Anida cualquier diseño estándar que pueda extenderse más allá de los límites de su contenedor en un ScrollView para proporcionar una vista desplazable administrada por el framework. La implementación de un desplazador personalizado solo es necesaria en situaciones especiales. En este documento, se describe cómo mostrar un efecto de desplazamiento en respuesta a los gestos táctiles con desplazadores.

Tu app puede usar desplazadores (Scroller o OverScroller) para recopilar los datos necesarios para producir una animación de desplazamiento en respuesta a un evento táctil. Son similares, pero OverScroller también incluye métodos para indicar a los usuarios que llegaron al límite del contenido después de un gesto de desplazamiento lateral o de arrastre.

• A partir de Android 12 (nivel de API 31), los elementos visuales se estiran y rebotan en un evento de arrastre, y se deslizan y rebotan en un evento de deslizamiento.
• En Android 11 (nivel de API 30) y versiones anteriores, los límites muestran un efecto de "resplandor" después de un gesto de arrastrar o soltar hacia el borde.

En el ejemplo de InteractiveChart de este documento, se usa la clase EdgeEffect para mostrar estos efectos de desplazamiento excesivo.

Nota: Usa OverScroller en lugar de Scroller para las animaciones de desplazamiento. OverScroller proporciona mejor compatibilidad con dispositivos anteriores.

Por lo general, solo necesitas usar desplazadores cuando implementas el desplazamiento tú mismo. ScrollView y HorizontalScrollView hacen todo esto por ti si anidas el diseño dentro de ellas.

Puedes usar un desplazador para animar el desplazamiento con el tiempo, usando la física de desplazamiento estándar de la plataforma, como la fricción, la velocidad y otras cualidades. En sí, el desplazador no dibuja nada. Los desplazadores registran los descentramientos de desplazamiento del tiempo, pero no aplican esas posiciones automáticamente a tu vista. Debes obtener y aplicar nuevas coordenadas a una velocidad que haga que la animación de desplazamiento se vea uniforme.

Cómo interpretar la terminología de desplazamiento

La palabra "desplazamiento" puede tener diferentes significados en Android, según el contexto.

El desplazamiento es el proceso general de mover el viewport, es decir, la "ventana" del contenido que estás viendo. Cuando el desplazamiento se realiza tanto en el eje X como en el eje Y, se llama desplazamiento lateral. La app de ejemplo InteractiveChart de este documento ilustra dos tipos diferentes de desplazamiento, arrastrar y arrastrar y soltar:

• Arrastrar: Este es el tipo de desplazamiento que ocurre cuando un usuario arrastra el dedo por la pantalla táctil. Puedes implementar el arrastre anulando onScroll() en GestureDetector.OnGestureListener. Para obtener más información sobre el arrastre, consulta Arrastrar y escalar.
• Arrastrar y soltar: Este es el tipo de desplazamiento que ocurre cuando un usuario arrastra y levanta el dedo rápidamente. Después de que el usuario levanta el dedo, generalmente deseas seguir moviendo el viewport, pero desacelerar hasta que el viewport deje de moverse. Puedes implementar el gesto de arrastrar y soltar anulando onFling() en GestureDetector.OnGestureListener y usando un objeto de desplazamiento.
• Desplazamiento lateral: El desplazamiento simultáneo a lo largo de los ejes X y Y se denomina desplazamiento lateral.

Es común usar objetos de desplazamiento junto con un gesto de arrastrar y soltar, pero se pueden usar en cualquier contexto en el que desees que la IU muestre desplazamiento en respuesta a un evento táctil. Por ejemplo, puedes anular onTouchEvent() para procesar eventos táctiles directamente y producir un efecto de desplazamiento o una animación de "ajuste a la página" en respuesta a esos eventos táctiles.

Componentes que contienen implementaciones de desplazamiento integradas

Los siguientes componentes de Android incluyen compatibilidad integrada con el comportamiento de desplazamiento y desplazamiento excesivo:

• GridView
• HorizontalScrollView
• ListView
• NestedScrollView
• RecyclerView
• ScrollView
• ViewPager
• ViewPager2

Si tu app necesita admitir el desplazamiento y el desplazamiento excesivo dentro de un componente diferente, completa los siguientes pasos:

1. Crea una implementación personalizada del desplazamiento basado en el tacto.
2. Para admitir dispositivos que ejecutan Android 12 y versiones posteriores, implementa el efecto de desplazamiento.

Crea una implementación personalizada del desplazamiento táctil

En esta sección, se describe cómo crear tu propio desplazador si tu app usa un componente que no incluye compatibilidad integrada para el desplazamiento y el desplazamiento excesivo.

El siguiente fragmento proviene del ejemplo de InteractiveChart. Usa un GestureDetector y anula el método GestureDetector.SimpleOnGestureListener de onFling(). Utiliza OverScroller para hacer un seguimiento del gesto de arrastrar y soltar. Si el usuario llega al límite del contenido después de realizar el gesto de arrastrar y soltar, el contenedor indica cuándo el usuario llega al final del contenido. La indicación depende de la versión de Android que ejecute un dispositivo:

• En Android 12 y versiones posteriores, los elementos visuales se estiran y rebotan.
• En Android 11 y versiones anteriores, los elementos visuales muestran un efecto de brillo.

Nota: La app de ejemplo InteractiveChart muestra un gráfico que puedes ampliar, desplazar lateralmente o desplazar. En el siguiente fragmento, contentRect representa las coordenadas del rectángulo dentro de la vista en la que se dibuja el gráfico. En un momento determinado, se dibuja un subconjunto del dominio y el rango del gráfico total en esta área rectangular. currentViewport representa la parte del gráfico que está visible en la pantalla. Debido a que, por lo general, los desplazamientos de píxeles se tratan como enteros, contentRect es del tipo Rect. Como el dominio y el rango del gráfico son valores decimales o flotantes, currentViewport es del tipo RectF.

La primera parte del siguiente fragmento muestra la implementación de onFling():

Kotlin

// Viewport extremes. See currentViewport for a discussion of the viewport.
private val AXIS_X_MIN = -1f
private val AXIS_X_MAX = 1f
private val AXIS_Y_MIN = -1f
private val AXIS_Y_MAX = 1f

// The current viewport. This rectangle represents the visible chart
// domain and range. The viewport is the part of the app that the
// user manipulates via touch gestures.
private val currentViewport = 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 lateinit var contentRect: Rect

private lateinit var scroller: OverScroller
private lateinit var scrollerStartViewport: RectF
...
private val gestureListener = object : GestureDetector.SimpleOnGestureListener() {

    override fun onDown(e: MotionEvent): Boolean {
        // Initiates the decay phase of any active edge effects.
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
            releaseEdgeEffects()
        }
        scrollerStartViewport.set(currentViewport)
        // Aborts any active scroll animations and invalidates.
        scroller.forceFinished(true)
        ViewCompat.postInvalidateOnAnimation(this@InteractiveLineGraphView)
        return true
    }
    ...
    override fun onFling(
            e1: MotionEvent,
            e2: MotionEvent,
            velocityX: Float,
            velocityY: Float
    ): Boolean {
        fling((-velocityX).toInt(), (-velocityY).toInt())
        return true
    }
}

private fun fling(velocityX: Int, velocityY: Int) {
    // Initiates the decay phase of any active edge effects.
    // On Android 12 and later, the edge effect (stretch) must
    // continue.
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
            releaseEdgeEffects()
    }
    // Flings use math in pixels, as opposed to math based on the viewport.
    val surfaceSize: Point = computeScrollSurfaceSize()
    val (startX: Int, startY: Int) = scrollerStartViewport.run {
        set(currentViewport)
        (surfaceSize.x * (left - AXIS_X_MIN) / (AXIS_X_MAX - AXIS_X_MIN)).toInt() to
                (surfaceSize.y * (AXIS_Y_MAX - bottom) / (AXIS_Y_MAX - AXIS_Y_MIN)).toInt()
    }
    // Before flinging, stops the current animation.
    scroller.forceFinished(true)
    // Begins the animation.
    scroller.fling(
            // Current scroll position.
            startX,
            startY,
            velocityX,
            velocityY,
            /*
             * Minimum and maximum scroll positions. The minimum scroll
             * position is generally 0 and the maximum scroll position
             * is generally the content size less the screen size. So if the
             * content width is 1000 pixels and the screen width is 200
             * pixels, the maximum scroll offset is 800 pixels.
             */
            0, surfaceSize.x - contentRect.width(),
            0, surfaceSize.y - contentRect.height(),
            // The edges of the content. This comes into play when using
            // the EdgeEffect class to draw "glow" overlays.
            contentRect.width() / 2,
            contentRect.height() / 2
    )
    // Invalidates to trigger computeScroll().
    ViewCompat.postInvalidateOnAnimation(this)
}

Java

// Viewport extremes. See currentViewport for a discussion of the viewport.
private static final float AXIS_X_MIN = -1f;
private static final float AXIS_X_MAX = 1f;
private static final float AXIS_Y_MIN = -1f;
private static final float AXIS_Y_MAX = 1f;

// The current viewport. This rectangle represents the visible chart
// domain and range. The viewport is the part of the app that the
// user manipulates via touch gestures.
private RectF currentViewport =
  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 final Rect contentRect = new Rect();

private final OverScroller scroller;
private final RectF scrollerStartViewport =
  new RectF(); // Used only for zooms and flings.
...
private final GestureDetector.SimpleOnGestureListener gestureListener
        = new GestureDetector.SimpleOnGestureListener() {
    @Override
    public boolean onDown(MotionEvent e) {
         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
            releaseEdgeEffects();
        }
        scrollerStartViewport.set(currentViewport);
        scroller.forceFinished(true);
        ViewCompat.postInvalidateOnAnimation(InteractiveLineGraphView.this);
        return true;
    }
...
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        fling((int) -velocityX, (int) -velocityY);
        return true;
    }
};

private void fling(int velocityX, int velocityY) {
    // Initiates the decay phase of any active edge effects.
    // On Android 12 and later, the edge effect (stretch) must
    // continue.
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
            releaseEdgeEffects();
    }
    // Flings use math in pixels, as opposed to math based on the viewport.
    Point surfaceSize = computeScrollSurfaceSize();
    scrollerStartViewport.set(currentViewport);
    int startX = (int) (surfaceSize.x * (scrollerStartViewport.left -
            AXIS_X_MIN) / (
            AXIS_X_MAX - AXIS_X_MIN));
    int startY = (int) (surfaceSize.y * (AXIS_Y_MAX -
            scrollerStartViewport.bottom) / (
            AXIS_Y_MAX - AXIS_Y_MIN));
    // Before flinging, stops the current animation.
    scroller.forceFinished(true);
    // Begins the animation.
    scroller.fling(
            // Current scroll position.
            startX,
            startY,
            velocityX,
            velocityY,
            /*
             * Minimum and maximum scroll positions. The minimum scroll
             * position is generally 0 and the maximum scroll position
             * is generally the content size less the screen size. So if the
             * content width is 1000 pixels and the screen width is 200
             * pixels, the maximum scroll offset is 800 pixels.
             */
            0, surfaceSize.x - contentRect.width(),
            0, surfaceSize.y - contentRect.height(),
            // The edges of the content. This comes into play when using
            // the EdgeEffect class to draw "glow" overlays.
            contentRect.width() / 2,
            contentRect.height() / 2);
    // Invalidates to trigger computeScroll().
    ViewCompat.postInvalidateOnAnimation(this);
}

Cuando onFling() llama a postInvalidateOnAnimation(), activa computeScroll() para actualizar los valores de x y y. Por lo general, esto se hace cuando un elemento secundario de vista está animando un desplazamiento con un objeto de desplazamiento, como se muestra en el ejemplo anterior.

La mayoría de las vistas pasan la posición x e y del objeto de desplazamiento directamente a scrollTo(). La siguiente implementación de computeScroll() adopta un enfoque diferente: llama a computeScrollOffset() para obtener la ubicación actual de x y y. Cuando se cumplen los criterios para mostrar un efecto de "resplandor" en el límite al desplazar (es decir, se amplía la pantalla, x o y está fuera del límite, y la app no muestra un desplazamiento), el código configura el efecto de resplandor y llama a postInvalidateOnAnimation() para activar una invalidación en la vista.

Kotlin

// Edge effect/overscroll tracking objects.
private lateinit var edgeEffectTop: EdgeEffect
private lateinit var edgeEffectBottom: EdgeEffect
private lateinit var edgeEffectLeft: EdgeEffect
private lateinit var edgeEffectRight: EdgeEffect

private var edgeEffectTopActive: Boolean = false
private var edgeEffectBottomActive: Boolean = false
private var edgeEffectLeftActive: Boolean = false
private var edgeEffectRightActive: Boolean = false

override fun computeScroll() {
    super.computeScroll()

    var needsInvalidate = false

    // The scroller isn't finished, meaning a fling or
    // programmatic pan operation is active.
    if (scroller.computeScrollOffset()) {
        val surfaceSize: Point = computeScrollSurfaceSize()
        val currX: Int = scroller.currX
        val currY: Int = scroller.currY

        val (canScrollX: Boolean, canScrollY: Boolean) = currentViewport.run {
            (left > AXIS_X_MIN || right < AXIS_X_MAX) to (top > AXIS_Y_MIN || bottom < AXIS_Y_MAX)
        }

        /*
         * If you are zoomed in, currX or currY is
         * outside of bounds, and you aren't already
         * showing overscroll, then render the overscroll
         * glow edge effect.
         */
        if (canScrollX
                && currX < 0
                && edgeEffectLeft.isFinished
                && !edgeEffectLeftActive) {
            edgeEffectLeft.onAbsorb(scroller.currVelocity.toInt())
            edgeEffectLeftActive = true
            needsInvalidate = true
        } else if (canScrollX
                && currX > surfaceSize.x - contentRect.width()
                && edgeEffectRight.isFinished
                && !edgeEffectRightActive) {
            edgeEffectRight.onAbsorb(scroller.currVelocity.toInt())
            edgeEffectRightActive = true
            needsInvalidate = true
        }

        if (canScrollY
                && currY < 0
                && edgeEffectTop.isFinished
                && !edgeEffectTopActive) {
            edgeEffectTop.onAbsorb(scroller.currVelocity.toInt())
            edgeEffectTopActive = true
            needsInvalidate = true
        } else if (canScrollY
                && currY > surfaceSize.y - contentRect.height()
                && edgeEffectBottom.isFinished
                && !edgeEffectBottomActive) {
            edgeEffectBottom.onAbsorb(scroller.currVelocity.toInt())
            edgeEffectBottomActive = true
            needsInvalidate = true
        }
        ...
    }
}

Java

// Edge effect/overscroll tracking objects.
private EdgeEffectCompat edgeEffectTop;
private EdgeEffectCompat edgeEffectBottom;
private EdgeEffectCompat edgeEffectLeft;
private EdgeEffectCompat edgeEffectRight;

private boolean edgeEffectTopActive;
private boolean edgeEffectBottomActive;
private boolean edgeEffectLeftActive;
private boolean edgeEffectRightActive;

@Override
public void computeScroll() {
    super.computeScroll();

    boolean needsInvalidate = false;

    // The scroller isn't finished, meaning a fling or
    // programmatic pan operation is active.
    if (scroller.computeScrollOffset()) {
        Point surfaceSize = computeScrollSurfaceSize();
        int currX = scroller.getCurrX();
        int currY = scroller.getCurrY();

        boolean canScrollX = (currentViewport.left > AXIS_X_MIN
                || currentViewport.right < AXIS_X_MAX);
        boolean canScrollY = (currentViewport.top > AXIS_Y_MIN
                || currentViewport.bottom < AXIS_Y_MAX);

        /*
         * If you are zoomed in, currX or currY is
         * outside of bounds, and you aren't already
         * showing overscroll, then render the overscroll
         * glow edge effect.
         */
        if (canScrollX
                && currX < 0
                && edgeEffectLeft.isFinished()
                && !edgeEffectLeftActive) {
            edgeEffectLeft.onAbsorb((int)mScroller.getCurrVelocity());
            edgeEffectLeftActive = true;
            needsInvalidate = true;
        } else if (canScrollX
                && currX > (surfaceSize.x - contentRect.width())
                && edgeEffectRight.isFinished()
                && !edgeEffectRightActive) {
            edgeEffectRight.onAbsorb((int)mScroller.getCurrVelocity());
            edgeEffectRightActive = true;
            needsInvalidate = true;
        }

        if (canScrollY
                && currY < 0
                && edgeEffectTop.isFinished()
                && !edgeEffectTopActive) {
            edgeEffectRight.onAbsorb((int)mScroller.getCurrVelocity());
            edgeEffectTopActive = true;
            needsInvalidate = true;
        } else if (canScrollY
                && currY > (surfaceSize.y - contentRect.height())
                && edgeEffectBottom.isFinished()
                && !edgeEffectBottomActive) {
            edgeEffectRight.onAbsorb((int)mScroller.getCurrVelocity());
            edgeEffectBottomActive = true;
            needsInvalidate = true;
        }
        ...
    }

La siguiente es la sección del código que realiza el zoom real:

Kotlin

lateinit var zoomer: Zoomer
val zoomFocalPoint = PointF()
...
// If a zoom is in progress—either programmatically
// or through double touch—this performs the zoom.
if (zoomer.computeZoom()) {
    val newWidth: Float = (1f - zoomer.currZoom) * scrollerStartViewport.width()
    val newHeight: Float = (1f - zoomer.currZoom) * scrollerStartViewport.height()
    val pointWithinViewportX: Float =
            (zoomFocalPoint.x - scrollerStartViewport.left) / scrollerStartViewport.width()
    val pointWithinViewportY: Float =
            (zoomFocalPoint.y - scrollerStartViewport.top) / scrollerStartViewport.height()
    currentViewport.set(
            zoomFocalPoint.x - newWidth * pointWithinViewportX,
            zoomFocalPoint.y - newHeight * pointWithinViewportY,
            zoomFocalPoint.x + newWidth * (1 - pointWithinViewportX),
            zoomFocalPoint.y + newHeight * (1 - pointWithinViewportY)
    )
    constrainViewport()
    needsInvalidate = true
}
if (needsInvalidate) {
    ViewCompat.postInvalidateOnAnimation(this)
}

Java

// Custom object that is functionally similar to Scroller.
Zoomer zoomer;
private PointF zoomFocalPoint = new PointF();
...
// If a zoom is in progress—either programmatically
// or through double touch—this performs the zoom.
if (zoomer.computeZoom()) {
    float newWidth = (1f - zoomer.getCurrZoom()) *
            scrollerStartViewport.width();
    float newHeight = (1f - zoomer.getCurrZoom()) *
            scrollerStartViewport.height();
    float pointWithinViewportX = (zoomFocalPoint.x -
            scrollerStartViewport.left)
            / scrollerStartViewport.width();
    float pointWithinViewportY = (zoomFocalPoint.y -
            scrollerStartViewport.top)
            / scrollerStartViewport.height();
    currentViewport.set(
            zoomFocalPoint.x - newWidth * pointWithinViewportX,
            zoomFocalPoint.y - newHeight * pointWithinViewportY,
            zoomFocalPoint.x + newWidth * (1 - pointWithinViewportX),
            zoomFocalPoint.y + newHeight * (1 - pointWithinViewportY));
    constrainViewport();
    needsInvalidate = true;
}
if (needsInvalidate) {
    ViewCompat.postInvalidateOnAnimation(this);
}

Este es el método computeScrollSurfaceSize() al que se llama en el fragmento anterior. Calcula el tamaño actual de la superficie desplazable en píxeles. Por ejemplo, si toda el área del gráfico es visible, este es el tamaño actual de mContentRect. Si el gráfico se amplía en un 200% en ambas direcciones, el tamaño que se muestre será el doble de horizontal y vertical.

Kotlin

private fun computeScrollSurfaceSize(): Point {
    return Point(
            (contentRect.width() * (AXIS_X_MAX - AXIS_X_MIN) / currentViewport.width()).toInt(),
            (contentRect.height() * (AXIS_Y_MAX - AXIS_Y_MIN) / currentViewport.height()).toInt()
    )
}

Java

private Point computeScrollSurfaceSize() {
    return new Point(
            (int) (contentRect.width() * (AXIS_X_MAX - AXIS_X_MIN)
                    / currentViewport.width()),
            (int) (contentRect.height() * (AXIS_Y_MAX - AXIS_Y_MIN)
                    / currentViewport.height()));
}

Para ver otro ejemplo de uso de desplazamiento, consulta el código fuente de la clase ViewPager. Se desplaza en respuesta a los gestos de arrastrar y soltar, y utiliza el desplazamiento para implementar la animación de "ajuste a la página".

Implementa el efecto de sobredesplazamiento lateral ampliado

A partir de Android 12, EdgeEffect agrega las siguientes APIs para implementar el efecto de sobredesplazamiento de estiramiento:

• getDistance()
• onPullDistance()

Para ofrecer la mejor experiencia del usuario con el efecto de desplazamiento excesivo elástico, haz lo siguiente:

1. Cuando la animación de estiramiento esté en efecto cuando el usuario toque el contenido, registra el toque como una "captura". El usuario detiene la animación y comienza a manipular el efecto de estiramiento otra vez.
2. Cuando el usuario mueva el dedo en la dirección opuesta al efecto, libera el efecto hasta que desaparezca por completo y, luego, comienza el desplazamiento.
3. Cuando el usuario desliza el dedo durante un efecto de estiramiento, desplaza EdgeEffect para mejorar este efecto.

Captura la animación

Cuando un usuario captura una animación activa del efecto de estiramiento, EdgeEffect.getDistance() devuelve 0. Esta condición indica que el efecto de estiramiento debe manipularse con el movimiento táctil. En la mayoría de los contenedores, la captura se detecta en onInterceptTouchEvent(), como se muestra en el siguiente fragmento de código:

Kotlin

override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
  ...
  when (action and MotionEvent.ACTION_MASK) {
    MotionEvent.ACTION_DOWN ->
      ...
      isBeingDragged = EdgeEffectCompat.getDistance(edgeEffectBottom) > 0f ||
          EdgeEffectCompat.getDistance(edgeEffectTop) > 0f
      ...
  }
  return isBeingDragged
}

Java

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
  ...
  switch (action & MotionEvent.ACTION_MASK) {
    case MotionEvent.ACTION_DOWN:
      ...
      isBeingDragged = EdgeEffectCompat.getDistance(edgeEffectBottom) > 0
          || EdgeEffectCompat.getDistance(edgeEffectTop) > 0;
      ...
  }
}

En el ejemplo anterior, onInterceptTouchEvent() devuelve true cuando mIsBeingDragged es true, por lo que es suficiente para consumir el evento antes de que el elemento secundario tenga la oportunidad de hacerlo.

Libera el efecto de sobredesplazamiento

Es importante liberar el efecto de estiramiento antes del desplazamiento para evitar que este efecto se aplique al contenido que se desplaza. En el siguiente ejemplo de código, se aplica esta práctica recomendada:

Kotlin

override fun onTouchEvent(ev: MotionEvent): Boolean {
  val activePointerIndex = ev.actionIndex

  when (ev.getActionMasked()) {
    MotionEvent.ACTION_MOVE ->
      val x = ev.getX(activePointerIndex)
      val y = ev.getY(activePointerIndex)
      var deltaY = y - lastMotionY
      val pullDistance = deltaY / height
      val displacement = x / width

      if (deltaY < 0f && EdgeEffectCompat.getDistance(edgeEffectTop) > 0f) {
        deltaY -= height * EdgeEffectCompat.onPullDistance(edgeEffectTop,
            pullDistance, displacement);
      }
      if (deltaY > 0f && EdgeEffectCompat.getDistance(edgeEffectBottom) > 0f) {
        deltaY += height * EdgeEffectCompat.onPullDistance(edgeEffectBottom,
            -pullDistance, 1 - displacement);
      }
      ...
  }

Java

@Override
public boolean onTouchEvent(MotionEvent ev) {

  final int actionMasked = ev.getActionMasked();

  switch (actionMasked) {
    case MotionEvent.ACTION_MOVE:
      final float x = ev.getX(activePointerIndex);
      final float y = ev.getY(activePointerIndex);
      float deltaY = y - lastMotionY;
      float pullDistance = deltaY / getHeight();
      float displacement = x / getWidth();

      if (deltaY < 0 && EdgeEffectCompat.getDistance(edgeEffectTop) > 0) {
        deltaY -= getHeight() * EdgeEffectCompat.onPullDistance(edgeEffectTop,
            pullDistance, displacement);
      }
      if (deltaY > 0 && EdgeEffectCompat.getDistance(edgeEffectBottom) > 0) {
        deltaY += getHeight() * EdgeEffectCompat.onPullDistance(edgeEffectBottom,
            -pullDistance, 1 - displacement);
      }
            ...

Cuando el usuario arrastra, consume la distancia de la acción tirar de EdgeEffect antes de pasar el evento táctil a un contenedor de desplazamiento anidado o arrastrar el desplazamiento. En el ejemplo de código anterior, getDistance() devuelve un valor positivo cuando se muestra un efecto de borde y se puede liberar con movimiento. Cuando el evento táctil libera el efecto de estiramiento, primero EdgeEffect lo consume, de modo que se liberará por completo antes de que se muestren otros efectos, como el desplazamiento anidado. Puedes usar getDistance() para saber la distancia de la acción tirar que se necesita para liberar el efecto actual.

A diferencia de onPull(), onPullDistance() devuelve la cantidad consumida del delta que se pasó. A partir de Android 12, si a onPull() o onPullDistance() se les pasan valores deltaDistance negativos cuando getDistance() es 0, el efecto de estiramiento no cambia. En Android 11 y versiones anteriores, onPull() permite que los valores negativos de la distancia total muestren efectos de brillo.

Cómo inhabilitar el sobredesplazamiento

Puedes inhabilitar el sobredesplazamiento en el archivo de diseño o de manera programática.

Para inhabilitar la opción en tu archivo de diseño, establece android:overScrollMode como se muestra en el siguiente ejemplo:

<MyCustomView android:overScrollMode="never">
    ...
</MyCustomView>

Para inhabilitar el sobredesplazamiento de forma programática, usa código similar al siguiente:

Kotlin

customView.overScrollMode = View.OVER_SCROLL_NEVER

Java

customView.setOverScrollMode(View.OVER_SCROLL_NEVER);

Recursos adicionales

Consulta los siguientes recursos relacionados:

• Descripción general de eventos de entrada
• Descripción general de los sensores
• Cómo hacer que una vista personalizada sea interactiva