Animacja gestu przewijania

Wypróbuj Compose
Jetpack Compose to zalecany zestaw narzędzi interfejsu na Androida. Dowiedz się, jak korzystać z dotyku i wpisywania w Compose.
Przewijanie →

W Androidzie przewijanie zwykle odbywa się za pomocą klasy ScrollView. Zagnieżdżaj dowolny układ standardowy, który może wykraczać poza granice kontenera, w elemencie ScrollView, aby zapewnić widok z możliwością przewijania zarządzany przez platformę. Wdrażanie niestandardowego przewijania jest konieczne tylko w szczególnych przypadkach. Z tego dokumentu dowiesz się, jak wyświetlać efekt przewijania w odpowiedzi na gesty dotykowe za pomocą przewijaków.

Aplikacja może używać przewijania – Scroller lub OverScroller – do zbierania danych potrzebnych do wygenerowania animacji przewijania w odpowiedzi na zdarzenie dotknięcia. Są podobne, ale OverScroller zawiera też metody informowania użytkowników o osiągnięciu krawędzi treści po wykonaniu gestu przesuwania lub szybkiego przesuwania.

  • Od Androida 12 (poziom API 31) elementy wizualne rozciągają się i odbijają podczas przeciągania oraz rozciągają się i odbijają podczas szybkiego przesunięcia.
  • Na Androidzie 11 (poziom API 30) i starszych wersjach po przeciągnięciu lub przesunięciu do krawędzi granice wyświetlają efekt „poświaty”.

W InteractiveChartprzykładzie w tym dokumencie użyto klasyEdgeEffect do wyświetlania efektów przewijania.

Za pomocą przewijania możesz animować przewijanie w czasie, korzystając ze standardowych dla platformy mechanizmów przewijania, takich jak tarcie, prędkość i inne właściwości. Sam przewijak niczego nie rysuje. Obiekty przewijane śledzą przesunięcia przewijania w czasie, ale nie stosują automatycznie tych pozycji do widoku. Musisz pobierać i stosować nowe współrzędne z częstotliwością, która zapewnia płynność animacji przewijania.

Terminologia dotycząca przewijania

Przewijanie to słowo, które w Androidzie może mieć różne znaczenia w zależności od kontekstu.

Przewijanie to ogólny proces przesuwania obszaru widoku, czyli „okna” treści, które oglądasz. Gdy przewijanie odbywa się w obu osiach – x i y – nazywa się to przesuwaniem. Przykładowa aplikacja InteractiveChart w tym dokumencie ilustruje 2 rodzaje przewijania: przeciąganie i szybkie przesuwanie:

  • Przeciąganie: to rodzaj przewijania, który występuje, gdy użytkownik przeciąga palcem po ekranie dotykowym. Przeciąganie możesz zaimplementować, zastępując funkcję onScroll() w funkcji GestureDetector.OnGestureListener. Więcej informacji o przeciąganiu znajdziesz w sekcji Przeciąganie i skalowanie.
  • Przesuwanie: to rodzaj przewijania, który występuje, gdy użytkownik szybko przeciąga i podnosi palec. Gdy użytkownik podniesie palec, zwykle chcesz nadal przesuwać obszar widoku, ale zwalniać, aż przestanie się poruszać. Aby wdrożyć przesuwanie, zastąp funkcję onFling() w GestureDetector.OnGestureListener i użyj obiektu przewijania.
  • Przesuwanie: przewijanie jednocześnie wzdłuż osi x i y nazywa się przesuwaniem.

Obiekty przewijania są zwykle używane w połączeniu z gestem szybkiego przesunięcia, ale możesz ich używać w dowolnym kontekście, w którym chcesz, aby interfejs wyświetlał przewijanie w odpowiedzi na zdarzenie dotknięcia. Możesz na przykład zastąpić onTouchEvent() funkcję, aby bezpośrednio przetwarzać zdarzenia dotknięcia i w odpowiedzi na nie wywoływać efekt przewijania lub animację „przyciągania do strony”.

Komponenty zawierające wbudowane implementacje przewijania

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

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

  1. Utwórz niestandardową implementację przewijania za pomocą dotyku
  2. Aby obsługiwać urządzenia z Androidem 12 lub nowszym, wdroż efekt rozciągania przewijania.

Tworzenie niestandardowej implementacji przewijania za pomocą dotyku

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

Poniższy fragment pochodzi z InteractiveChartprzykładowego kodu. Używa metody GestureDetector i zastępuje metodę GestureDetector.SimpleOnGestureListener onFling(). Do śledzenia gestu szybkiego przesunięcia używa metody OverScroller. Jeśli po wykonaniu gestu przesunięcia użytkownik dotrze do krawędzi treści, kontener wskaże, kiedy użytkownik dotrze do końca treści. Wskazanie zależy od wersji Androida, na której działa urządzenie:

  • Na Androidzie 12 i nowszych elementy wizualne rozciągają się i wracają do pierwotnego kształtu.
  • Na Androidzie 11 i starszych elementom wizualnym towarzyszy efekt poświaty.

Pierwsza część tego fragmentu kodu pokazuje implementację 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 funkcja onFling() wywołuje funkcję postInvalidateOnAnimation(), powoduje to, że funkcja computeScroll() aktualizuje wartości x i y. Zwykle dzieje się tak, gdy element podrzędny widoku animuje przewijanie za pomocą obiektu przewijania, jak pokazano w poprzednim przykładzie.

Większość widoków przekazuje pozycję x i y obiektu przewijania bezpośrednio do scrollTo(). Poniższa implementacja funkcji computeScroll() wykorzystuje inne podejście: wywołuje funkcję computeScrollOffset(), aby uzyskać bieżącą lokalizację zmiennych x i y. Gdy zostaną spełnione kryteria wyświetlania efektu „poświaty” przy przewijaniu poza zakres – tzn. wyświetlacz jest powiększony, x lub y jest poza zakresem, a aplikacja nie wyświetla jeszcze przewijania poza zakres – kod konfiguruje efekt poświaty przy przewijaniu poza zakres i wywołuje funkcję postInvalidateOnAnimation(), aby wywołać 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 odpowiada za 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);
}

Jest to metoda computeScrollSurfaceSize() wywoływana w poprzednim fragmencie kodu. Oblicza bieżący rozmiar powierzchni przewijania w pikselach. Jeśli na przykład cały obszar wykresu jest widoczny, jest to bieżący rozmiar mContentRect. Jeśli wykres jest powiększony o 200% w obu kierunkach, 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 przewijania znajdziesz w kodzie źródłowym klasy ViewPager. Przewija się w odpowiedzi na szybkie przesunięcia i wykorzystuje przewijanie do implementacji animacji „przyciągania do strony”.

Wdrażanie efektu rozciągania podczas przewijania

Od Androida 12 EdgeEffect dodaje te interfejsy API do implementowania efektu rozciągania podczas przewijania:

  • getDistance()
  • onPullDistance()

Aby zapewnić użytkownikom jak najlepsze wrażenia podczas korzystania z rozciąganego przewijania, wykonaj te czynności:

  1. Gdy animacja rozciągania jest aktywna, a użytkownik dotknie treści, zarejestruj dotknięcie jako „złapanie”. Użytkownik zatrzymuje animację i ponownie zaczyna manipulować rozciąganiem.
  2. Gdy użytkownik przesunie palec w kierunku przeciwnym do rozciągania, zwolnij rozciąganie, aż całkowicie zniknie, a potem zacznij przewijać.
  3. Gdy użytkownik wykonuje szybki ruch podczas rozciągania, wykonaj szybki ruch w przypadku EdgeEffect, aby wzmocnić efekt rozciągania.

Złap animację

Gdy użytkownik złapie aktywną animację rozciągania, funkcja EdgeEffect.getDistance() zwraca wartość 0. Ten warunek oznacza, że rozciąganie musi być kontrolowane przez ruch dotykowy. W większości kontenerów wyjątek jest wykrywany w onInterceptTouchEvent(), jak pokazano 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 onInterceptTouchEvent() zwraca wartość true, gdy mIsBeingDragged ma wartość true, więc wystarczy wykorzystać zdarzenie, zanim dziecko będzie miało możliwość to zrobić.

Zwolnij efekt przewijania

Ważne jest, aby zwolnić efekt rozciągania przed przewijaniem, aby nie został on zastosowany do przewijanej treści. Ten fragment kodu jest zgodny z tą sprawdzoną metodą:

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 element, wykorzystaj EdgeEffectodległość przeciągnięciaEdgeEffect, zanim przekażesz zdarzenie dotknięcia do zagnieżdżonego kontenera przewijania lub przeciągniesz przewijanie. W przykładowym kodzie powyżej funkcja getDistance() zwraca wartość dodatnią, gdy wyświetlany jest efekt krawędzi, który można zwolnić ruchem. Gdy zdarzenie dotknięcia zwalnia rozciąganie, jest ono najpierw przetwarzane przez EdgeEffect, aby zostało całkowicie zwolnione przed wyświetleniem innych efektów, takich jak zagnieżdżone przewijanie. Możesz użyć getDistance(), aby dowiedzieć się, jak duża odległość jest wymagana do zwolnienia bieżącego efektu.

W przeciwieństwie do funkcji onPull() funkcja onPullDistance() zwraca zużytą kwotę przekazanego przyrostu. Od Androida 12, jeśli w przypadku parametru getDistance() o wartości 0 przekazywane są ujemne wartości parametrów onPull() lub onPullDistance(), efekt rozciągania nie ulega zmianie.deltaDistance W Androidzie 11 i starszych wersjach onPull() umożliwia wyświetlanie efektów świetlnych dla ujemnych wartości całkowitego dystansu.

Rezygnacja z overscroll

Możesz zrezygnować z przewijania poza krawędź w pliku układu lub programowo.

Aby zrezygnować w pliku układu, ustaw android:overScrollMode, jak pokazano w tym przykładzie:

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

Aby zrezygnować z programu za pomocą kodu, 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 materiałami: