Animacja gestu przewijania

Wypróbuj Compose
Jetpack Compose to zalecany zestaw narzędzi do tworzenia interfejsu na Androidzie. Dowiedz się, jak używać dotyku i wprowadzania danych w Compose.
Przewijanie →

W Androidzie przewijanie jest zwykle realizowane za pomocą klasy ScrollView. Aby zapewnić widok przewijany zarządzany przez framework, zagnieźdź dowolny standardowy układ, który może wykraczać poza granice kontenera, w ScrollView. Implementowanie 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ą przewijania.

Aplikacja może używać przewijania –Scroller lub OverScroller– do zbierania danych potrzebnych do utworzenia animacji przewijania w odpowiedzi na zdarzenie dotknięcia. Są one podobne, ale OverScroller zawiera też metody informowania użytkowników o tym, że po przesunięciu lub przeciągnięciu dotarli do krawędzi treści.

  • Od Androida 12 (poziom API 31) elementy wizualne rozciągają się i odbijają podczas zdarzenia przeciągnięcia, a także rozciągają się i odbijają podczas przesuwania palcem.
  • W Androidzie 11 (poziom API 30) i starszych wersjach po przeciągnięciu lub przesunięciu palcem do krawędzi granice wyświetlają efekt „poświaty” .

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

Możesz użyć paska przewijania, aby animować przewijanie w czasie, korzystając ze standardowej fizyki przewijania platformy, takiej jak tarcie, prędkość i inne właściwości. Sam pasek przewijania niczego nie rysuje. Przewijanie śledzi przesunięcia przewijania w czasie, ale nie stosuje automatycznie tych pozycji do widoku. Musisz pobierać i stosować nowe współrzędne z częstotliwością, która sprawi, że animacja przewijania będzie wyglądać płynnie.

Poznaj terminologię przewijania

Słowo „przewijanie” może mieć w Androidzie różne znaczenia w zależności od kontekstu.

Przewijanie to ogólny proces przesuwania widocznego obszaru, czyli „okna” treści, którą oglądasz. Gdy przewijanie odbywa się zarówno w osi x, jak i y, nazywa się to przesuwaniem. Przykładowa aplikacja InteractiveChart w tym dokumencie ilustruje 2 różne typy przewijania: przeciąganie i przesuwanie palcem:

  • Przeciąganie: to typ przewijania, który występuje, gdy użytkownik przeciąga palcem po ekranie dotykowym. Przeciąganie możesz zaimplementować, zastępując onScroll() w GestureDetector.OnGestureListener. Więcej informacji o przeciąganiu znajdziesz w artykule Przeciąganie i skalowanie.
  • Przesuwanie palcem: to typ przewijania, który występuje, gdy użytkownik szybko przeciąga i podnosi palec. Gdy użytkownik podniesie palec, zwykle chcesz, aby widoczny obszar nadal się przesuwał, ale zwalniał, aż się zatrzyma. Przesuwanie palcem możesz zaimplementować, zastępując onFling() w GestureDetector.OnGestureListener i używając obiektu przewijania.
  • Przesuwanie: przewijanie jednocześnie w osi x i y nazywa się przesuwaniem.

Obiekty przewijania są zwykle używane w połączeniu z gestem przesuwania palcem, 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(), aby bezpośrednio przetwarzać zdarzenia dotknięcia i w odpowiedzi na nie tworzyć efekt przewijania lub animację „przyciągania do strony”.

Komponenty zawierające wbudowane implementacje przewijania

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

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

  1. Utwórz niestandardową implementację przewijania opartego na dotyku.
  2. Aby obsługiwać urządzenia z Androidem 12 i nowszym, zaimplementuj efekt rozciągania.

Tworzenie niestandardowej implementacji przewijania opartego na dotyku

W tej sekcji opisujemy, jak utworzyć własne przewijanie, jeśli aplikacja używa komponentu, który nie ma wbudowanej obsługi dla przewijania i przewijania.

Ten fragment kodu pochodzi z InteractiveChart przykładu. Używa GestureDetector i zastępuje metodę GestureDetector.SimpleOnGestureListener onFling(). Do śledzenia gestu przesuwania palcem używa OverScroller. Jeśli po wykonaniu gestu przeciągnięcia użytkownik dotrze do krawędzi treści, kontener wskaże, że użytkownik dotarł do końca treści. Wskazanie zależy od wersji Androida, na której działa urządzenie:

  • W Androidzie 12 i nowszym elementy wizualne rozciągają się i odbijają.
  • W Androidzie 11 i starszych wersjach elementy wizualne wyświetlają 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 onFling() wywołuje postInvalidateOnAnimation(), uruchamia computeScroll() w celu zaktualizowania 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(). Ta implementacja computeScroll() stosuje inne podejście: wywołuje computeScrollOffset(), aby uzyskać bieżącą lokalizację x i y. Gdy zostaną spełnione kryteria wyświetlania efektu „poświaty” przewijania – czyli wyświetlacz jest powiększony, x lub y jest poza zakresem, a aplikacja nie wyświetla jeszcze przewijania – kod konfiguruje efekt poświaty przewijania i wywołuje postInvalidateOnAnimation(), aby uruchomić unieważnienie w 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 jest metoda computeScrollSurfaceSize(), która jest wywoływana w poprzednim fragmencie kodu. Oblicza ona bieżący rozmiar przewijanego obszaru w pikselach. Jeśli na przykład widoczny jest cały obszar wykresu, 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ę ona w odpowiedzi na przesuwanie palcem i używa przewijania do implementowania animacji „przyciągania do strony”.

Implementowanie efektu rozciągania

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

  • getDistance()
  • onPullDistance()

Aby zapewnić użytkownikom jak najlepsze wrażenia z przewijania, wykonaj te czynności:

  1. Gdy animacja rozciągania jest aktywna, a użytkownik dotknie treści, zarejestruj dotknięcie jako „przechwycenie”. 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 następnie zacznij przewijać.
  3. Gdy użytkownik przeciągnie podczas rozciągania, przeciągnij EdgeEffect aby wzmocnić efekt rozciągania.

Przechwytywanie animacji

Gdy użytkownik przechwyci aktywną animację rozciągania, EdgeEffect.getDistance() zwróci 0. Ten warunek wskazuje, że rozciąganie musi być manipulowane przez ruch dotykowy. W większości kontenerów przechwycenie jest wykrywane 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 true, gdy mIsBeingDragged ma wartość true, więc wystarczy, że zdarzenie zostanie zużyte, zanim element podrzędny będzie miał możliwość je zużyć.

Zwalnianie efektu przewijania

Przed przewijaniem ważne jest, aby zwolnić efekt rozciągania, aby nie został on zastosowany do przewijanej treści. Ten fragment kodu stosuje 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, zużyj odległość przeciągnięcia EdgeEffect, zanim przekażesz zdarzenie dotknięcia do zagnieżdżonego kontenera przewijania lub przeciągniesz przewijanie. W poprzednim przykładowym kodzie getDistance() zwraca wartość dodatnią, gdy wyświetlany jest efekt krawędzi i można go zwolnić za pomocą ruchu. Gdy zdarzenie dotknięcia zwalnia rozciąganie, jest ono najpierw zużywane przez EdgeEffect, aby zostało całkowicie zwolnione przed wyświetleniem innych efektów, takich jak zagnieżdżone przewijanie. Za pomocą getDistance() możesz dowiedzieć się, ile odległości przeciągnięcia jest wymagane do zwolnienia bieżącego efektu.

W przeciwieństwie do onPull() funkcja onPullDistance() zwraca zużytą ilość przekazanego delta. Od Androida 12, jeśli do onPull() lub onPullDistance() zostaną przekazane ujemne wartości deltaDistance, gdy getDistance() ma wartość 0, efekt rozciągania nie zmieni się. W Androidzie 11 i starszych wersjach onPull() pozwala na wyświetlanie efektów poświaty w przypadku ujemnych wartości całkowitej odległości.

Rezygnacja z przewijania

Możesz zrezygnować z przewijania 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ć programowo, użyj kodu takiego jak ten:

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: