Animacja gestu przewijania

Wypróbuj sposób tworzenia wiadomości
Jetpack Compose to zalecany zestaw narzędzi UI na Androida. Dowiedz się, jak korzystać z dotyku i wprowadzania w sekcji Utwórz
Przewijanie →

Na Androidzie przewijanie jest zwykle wykonywane za pomocą klasy ScrollView. Umieść dowolny standardowy układ, który może wykraczać poza granice kontenera w elemencie ScrollView, aby zapewnić przewijany widok zarządzany przez platformę. Wdrożenie niestandardowego narzędzia do przewijania jest konieczne tylko w specjalnych sytuacjach. W tym dokumencie opisujemy, jak wyświetlić efekt przewijania w odpowiedzi na gesty dotykowe za pomocą suwaków.

Aplikacja może używać suwaków Scroller lub OverScroller do zbierania danych potrzebnych do utworzenia przewijanej animacji w odpowiedzi na zdarzenie dotknięcia. Są one podobne, ale OverScroller umożliwia też wskazywanie użytkownikom, gdy dotrą do krawędzi treści po wykonaniu gestu przesuwania lub przerzucania.

  • Począwszy od Androida 12 (poziom interfejsu API 31) elementy wizualne rozciągają się i odbijają po zdarzeniu przeciągania, a następnie przerzucają i odbijają się po krótkim wydarzeniu.
  • Na Androidzie 11 (poziom interfejsu API 30) i starszych granice wyświetlają efekt „poświaty” po przeciągnięciu lub przesuwaniu w stronę krawędzi.

Przykład InteractiveChart w tym dokumencie używa klasy EdgeEffect do wyświetlania tych efektów nadmiernego przewijania.

Możesz użyć przewijania, aby animować przewijanie wraz z upływem czasu, korzystając ze standardowych platform fizyki, takich jak tarcie, prędkość i inne właściwości. Sam mechanizm przewijania niczego nie rysuje. Przewijacze śledzą przesunięcia przewijania, ale nie stosują automatycznie tych pozycji w widoku danych. Nowe współrzędne trzeba pobierać i stosować z częstotliwością, która sprawi, że animacja przewijania będzie płynna.

Terminologia związana z przewijaniem

Przewijanie to słowo, które może mieć wiele znaczeń w Androidzie w zależności od kontekstu.

Przewijanie to ogólny proces przesuwania widocznego obszaru, czyli „okna” oglądanych treści. Przewijanie to zarówno na osi x, jak i y, jest nazywane przesuwaniem. Przykładowa aplikacja InteractiveChart w tym dokumencie ilustruje 2 różne rodzaje przewijania, przeciągania i przewijania:

  • Przeciąganie: sposób przewijania polegający na przeciągnięciu palcem po ekranie dotykowym. Możesz wdrożyć przeciąganie, zastępując właściwość onScroll() w GestureDetector.OnGestureListener. Więcej informacji o przeciąganiu znajdziesz w sekcji Przeciąganie i skalowanie.
  • Przesuwanie: sposób przewijania polegający na przeciągnięciu i szybkim uniesieniu palca. Gdy użytkownik uniesie palec, zazwyczaj lepiej, by nadal przesuwał się widoczny obszar, ale zmniejszał tempo, aż przestanie się on poruszać. Możesz wdrożyć rzutowanie, zastępując onFling() w GestureDetector.OnGestureListener i używając obiektu przewijania.
  • Przesuwanie: przewijanie równocześnie wzdłuż osi x i y jest nazywane przesuwaniem.

Obiekty przewijania często są używane w połączeniu z gestem przesunięcia, ale mogą być używane w dowolnym kontekście, w którym interfejs ma wyświetlać przewijanie w odpowiedzi na zdarzenie dotknięcia. Możesz na przykład zastąpić onTouchEvent(), by bezpośrednio przetwarzać zdarzenia kliknięcia i generować efekt przewijania lub animację „przyciągnięcia do strony” w odpowiedzi na te zdarzenia.

Komponenty, które zawierają wbudowane implementacje przewijania

Te komponenty Androida mają wbudowaną obsługę przewijania i nawigacji:

Jeśli Twoja aplikacja musi obsługiwać przewijanie i nadmierne przewijanie w innym komponencie, wykonaj te czynności:

  1. Utwórz niestandardową implementację przewijania dotykowego.
  2. Aby obsługiwać urządzenia z Androidem 12 i nowszymi wersjami, zaimplementuj efekt rozszerzonego przewijania.

Tworzenie niestandardowej implementacji przewijania dotykowego

Z tej sekcji dowiesz się, jak utworzyć własny przewijak, jeśli aplikacja korzysta z komponentu, który nie ma wbudowanej obsługi przewijania i przewijania.

Ten fragment pochodzi z przykładowego pliku InteractiveChart. Używa metody GestureDetector i zastępuje metodę onFling() GestureDetector.SimpleOnGestureListener. Używa OverScroller do śledzenia gestu rzutu. Jeśli użytkownik dotrze do krawędzi treści po wykonaniu gestu przesuwania, kontener informuje, kiedy użytkownik dotrze do końca treści. Ten stan zależy od wersji Androida, z której korzysta urządzenie:

  • Na Androidzie 12 i nowszych elementy wizualne się rozciągają i odbijają.
  • Na Androidzie 11 i starszych elementach wizualnych wyświetla się efekt poświaty.

Pierwsza część tego fragmentu kodu pokazuje implementację tagu 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);
}

Gdy onFling() wywołuje postInvalidateOnAnimation(), aktywuje computeScroll(), aby zaktualizować wartości x i y. Zwykle ma to miejsce, gdy element podrzędny widoku danych animuje przewijanie za pomocą obiektu przewijania, jak pokazano w poprzednim przykładzie.

W większości widoków pozycje x i y obiektu przewijania przekazują bezpośrednio do właściwości scrollTo(). Ta implementacja computeScroll() wygląda inaczej: wywołuje metodę computeScrollOffset(), aby uzyskać aktualną lokalizację x i y. Gdy spełnione są kryteria wyświetlania efektu „poświaty” typu nadmiernie przewijane, czyli gdy wyświetlacz jest powiększony, x lub y jest poza zakresem, a aplikacja nie wyświetla jeszcze sygnalizowania końca przewijania, kod konfiguruje efekt poświaty nadmiarowego przewijania i wywołuje metodę postInvalidateOnAnimation(), aby aktywować unieważnienie widoku.

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;
        }
        ...
    }

Oto fragment kodu, który wykonuje rzeczywiste powiększenie:

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);
}

To metoda computeScrollSurfaceSize(), która jest wywoływana w poprzednim fragmencie. Oblicza bieżący rozmiar przewijanej powierzchni w pikselach. Jeśli np. widoczny jest cały obszar wykresu, jest to bieżący rozmiar mContentRect. Jeśli wykres jest powiększony w obu kierunkach o 200%, zwrócony rozmiar jest 2 razy większy w poziomie i w pionie.

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()));
}

Inny przykład użycia narzędzia do przewijania znajdziesz w kodzie źródłowym klasy ViewPager. Przewija się w odpowiedzi na przewinięcia i wykorzystuje przewijanie, aby zaimplementować animację „przyciągnięcia na stronę”.

Wdrażanie efektu rozszerzonego sygnalizowania końca przewijania

Począwszy od Androida 12, EdgeEffect dodaje te interfejsy API do implementacji efektu rozszerzonego przewijania.

  • getDistance()
  • onPullDistance()

Aby zapewnić użytkownikom jak najlepsze wrażenia podczas przewijania za pomocą rozciągania, wykonaj te czynności:

  1. Gdy animacja rozciągania działa, gdy użytkownik dotyka zawartości, dotykanie ekranu zarejestruj jako przechwycenie. Użytkownik zatrzymuje animację i zaczyna ponownie wykonywać operacje rozciągania.
  2. Gdy użytkownik przesunie palec w przeciwnym kierunku rozciągania, puść rozciąganie, aż zniknie, a następnie zacznij przewijać.
  3. Gdy użytkownik przesuwa się w trakcie rozciągania, przesuwa EdgeEffect, aby poprawić efekt rozciągania.

Chwyć animację

Gdy użytkownik wykryje aktywną animację rozciągania, EdgeEffect.getDistance() zwraca wartość 0. Ten warunek sygnalizuje, że rozciąganie należy wykonywać ruchem dotykowym. W większości kontenerów wykrywany jest przechwytywanie w elemencie onInterceptTouchEvent(), jak widać w tym fragmencie kodu:

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;
      ...
  }
}

W poprzednim przykładzie funkcja onInterceptTouchEvent() zwraca wartość true, gdy mIsBeingDragged ma wartość true, więc jest ono wystarczające do wykorzystania zdarzenia, zanim dziecko będzie miało możliwość jego wykorzystania.

Zwalnianie efektu dalekiego przewijania

Pamiętaj, by wyłączyć efekt rozciągania przed przewijaniem, aby uniknąć zastosowania rozciągania do przewijanej treści. Sprawdzoną metodą jest zastosowanie tego przykładowego kodu:

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);
      }
            ...

Gdy użytkownik przeciąga, weź pod uwagę odległość EdgeEffect, zanim przekażesz zdarzenie kliknięcia do zagnieżdżonego kontenera przewijanego. Możesz też przeciągnąć przewijanie. W poprzednim przykładowym kodzie funkcja getDistance() zwraca wartość dodatnią, gdy wyświetlany jest efekt krawędzi i można go zwolnić. Gdy zdarzenie dotknięcia anuluje rozciąganie, jest ono najpierw przetwarzane przez element EdgeEffect, aby w pełni zwolnić, zanim pojawią się inne efekty, np. przewijanie zagnieżdżone. Możesz użyć funkcji getDistance(), aby dowiedzieć się, jaka odległość pociągnięcia jest wymagana do włączenia aktualnego efektu.

W przeciwieństwie do funkcji onPull() funkcja onPullDistance() zwraca ilość przekazanej delta. Od Androida 12, jeśli onPull() lub onPullDistance() są przekazywane ujemne wartości deltaDistance, gdy getDistance() ma wartość 0, efekt rozciągania się nie zmienia. Na Androidzie 11 i starszych wersjach onPull() pozwala na wyświetlanie efektów poświaty przez wartości ujemne całkowitego dystansu.

Zrezygnuj z nadmiarowego przewijania

Możesz wyłączyć nadmierne przewijanie w pliku układu lub automatycznie.

Aby zrezygnować z tej funkcji w pliku układu, ustaw android:overScrollMode w taki sposób, jak pokazano w tym przykładzie:

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

Aby zrezygnować automatycznie, użyj kodu podobnego do tego:

Kotlin

customView.overScrollMode = View.OVER_SCROLL_NEVER

Java

customView.setOverScrollMode(View.OVER_SCROLL_NEVER);

Dodatkowe materiały

Zapoznaj się z tymi powiązanymi materiałami: