Animacja gestu przewijania

Wypróbuj sposób tworzenia wiadomości

Jetpack Compose to zalecany zestaw narzędzi UI na Androida. Dowiedz się, jak w funkcji tworzenia wiadomości używać dotyku i wprowadzania tekstu.

Przewijanie →

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

Aplikacja może używać przewijania Scroller lub OverScroller do zbierania danych potrzebnych do wygenerowania animacji przewijania w odpowiedzi na zdarzenie dotyku. Są podobne, ale OverScroller zawiera również metody wskazywania użytkownikom, kiedy dotrą do krawędzi treści po przesuwaniu lub przesuwaniu gestu.

• Począwszy od Androida 12 (poziom interfejsu API 31) elementy wizualne rozciągają się i odbijają się w wyniku przeciągania, a potem wracają i wracają.
• Na Androidzie 11 (poziom interfejsu API 30) i starszych granicach pojawiają się efekt „poświaty” po przeciągnięciu lub przesunięciu palcem do krawędzi.

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

Możesz użyć suwaka, aby animować przewijanie w czasie, korzystając ze standardowych mechanizmów przewijania na platformie, takich jak tarcie, prędkość i inne parametry. Sam pasek przewijania niczego nie narysował. Przewijacze śledzą za Ciebie przesunięcia przewijania, ale nie stosują ich automatycznie w Twoim widoku. Trzeba pobrać i zastosować nowe współrzędne z taką szybkością, by animacja przewijania wyglądała płynnie.

Terminologia dotycząca przewijania

Przewijanie to pojęcie, które może mieć na Androidzie różne znaczenie w zależności od kontekstu.

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

• Przeciąganie: ten typ przewijania odbywa się, gdy użytkownik przeciąga palcem po ekranie dotykowym. Możesz zastosować przeciąganie, zastępując onScroll() w GestureDetector.OnGestureListener. Więcej informacji o przeciąganiu znajdziesz w sekcji Przeciąganie i skalowanie.
• Przesuwanie: ten typ przewijania ma miejsce, gdy użytkownik szybko przeciąga i unosi palec. Gdy użytkownik uniesie palec, warto nadal przesuwać widoczny obszar, ale zwalniać jego tempo, aż widok przestanie się poruszać. Możesz wdrożyć przesuwanie, zastępując onFling() w GestureDetector.OnGestureListener i używając obiektu przewijania.
• Przesuwanie: jednoczesne przewijanie wzdłuż osi x i y nazywa się przesuwaniem.

Obiekty przewijania często używa się w połączeniu z gestem odchylenia, ale możesz ich używać w dowolnym kontekście, w którym interfejs użytkownika ma wyświetlać przewijanie w odpowiedzi na zdarzenie dotyku. Możesz na przykład zastąpić onTouchEvent(), by przetwarzać zdarzenia dotyku bezpośrednio i w odpowiedzi na nie uzyskać efekt przewijania lub animację przyciągnięcia do strony.

Komponenty zawierające wbudowane implementacje przewijania

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

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

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

1. Utwórz niestandardową implementację przewijania dotykowego.
2. Aby zapewnić obsługę urządzeń z Androidem 12 lub nowszym, zaimplementuj efekt rozciągnięcia w trakcie przewijania.

Utwórz niestandardową implementację przewijania dotykiem

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

Ten fragment pochodzi z przykładu InteractiveChart. Używana jest metoda GestureDetector i zastępuje metodę GestureDetector.SimpleOnGestureListener onFling(). Do śledzenia gestu flirtu wykorzystuje się OverScroller. Jeśli użytkownik dotrze do krawędzi treści po wykonaniu gestu przesuwania, kontener poinformuje o tym, kiedy użytkownik dotrze do końca treści. Zależy to od wersji Androida, na której działa urządzenie:

• Na Androidzie 12 i nowszych elementy wizualne się rozciągają i odbijają się do siebie.
• Na Androidzie 11 i starszych elementy wizualne mają efekt poświaty.

Pierwsza część tego fragmentu kodu pokazuje implementację onFling():

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

// 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(), wyzwala computeScroll(), by zaktualizować wartości x i y. Zwykle ma to miejsce wtedy, gdy element podrzędny widoku animuje przewijanie za pomocą obiektu przewijania, jak pokazano w poprzednim przykładzie.

Większość widoków przekazuje położenie x i y obiektu przewijania bezpośrednio do scrollTo(). Ta implementacja computeScroll() działa inaczej: wywołuje computeScrollOffset(), aby uzyskać bieżącą lokalizację x i y. Po spełnieniu kryteriów wyświetlania efektu krawędzi nadmiernego przewijania – czyli gdy ekran jest powiększony, x lub y znajdują się poza granicami, a aplikacja nie wyświetla jeszcze nadmiernego przewijania – kod ustawia efekt nadmiernego przewijania i wywołuje postInvalidateOnAnimation(), aby wywołać unieważnienie widoku.

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

// 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 sekcja kodu, która służy do faktycznego powiększania:

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

// 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() wywoływana w poprzednim fragmencie. Oblicza bieżący rozmiar powierzchni do przewijania 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 będzie dwa razy większy w poziomie i w pionie.

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

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 przewijaka znajdziesz w kodzie źródłowym klasy ViewPager. Przewija się w reakcji na ruchy strony i wykorzystuje przewijanie, aby zaimplementować animację „przyciągnięcia do strony”.

Zastosuj efekt rozciągnięcia w trakcie przewijania

Począwszy od Androida 12 EdgeEffect dodaje te interfejsy API do implementowania efektu rozciągnięcia w tle:

• getDistance()
• onPullDistance()

Aby zapewnić użytkownikom najlepsze wrażenia z rozciągania, wykonaj te czynności:

1. Gdy animacja rozciąga się, gdy użytkownik dotyka treści, zarejestruj dotyk jako „złapanie”. Użytkownik zatrzymuje animację i ponownie zaczyna manipulować rozciąganiem.
2. Gdy użytkownik przesunie palcem w kierunku przeciwnym do rozciągania, zwolnij rozciąganie, aż zniknie w pełni, a potem zacznij przewijać.
3. Gdy użytkownik rzuca się w pionie podczas rozciągania, przechyl EdgeEffect, aby wzmocnić efekt rozciągania.

Zobacz animację

Gdy użytkownik złapuje aktywną animację rozciąganą, EdgeEffect.getDistance() zwraca wartość 0. Ten warunek oznacza, że rozciąganie musi być modyfikowane dotykiem. W większości kontenerów w onInterceptTouchEvent() jest wykrywany skrypt, jak pokazano w tym fragmencie kodu:

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
}

@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 wystarczy skorzystać ze zdarzenia, zanim dziecko będzie miało możliwość jego wykorzystania.

Zwolnij efekt przewijania

Pamiętaj, by przed przewijaniem zwolnić efekt rozciągania, aby zapobiec zastosowaniu rozciągania do przewijanej treści. Tę sprawdzoną metodę stosuje się w poniższym przykładowym kodzie:

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

@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 ekran, przed przekazaniem zdarzenia dotyku do zagnieżdżonego kontenera przewijania lub przeciągnięciem przewijania sprawdź odległość EdgeEffect. W poprzednim przykładowym kodzie funkcja getDistance() zwraca wartość dodatnią, gdy wyświetlany jest efekt brzegowy, i można go aktywować wraz z ruchem. Gdy zdarzenie kliknięcia zwolni rozciąganie, jest ono najpierw przetwarzane przez EdgeEffect, aby zostało całkowicie zwolnione, zanim zostaną wyświetlone inne efekty, takie jak przewijanie zagnieżdżone. Możesz użyć getDistance(), aby dowiedzieć się, jaka odległość jest potrzebna do odblokowania bieżącego efektu.

W przeciwieństwie do funkcji onPull() funkcja onPullDistance() zwraca wykorzystaną ilość przekazywanej wartości delta. Od Androida 12, jeśli wartości onPull() lub onPullDistance() są przekazywane jako deltaDistance, gdy getDistance() ma wartość 0, efekt rozciągania się nie zmienia. Na Androidzie 11 i starszych wersjach onPull() umożliwia pokazywanie efektów poświaty w wartościach ujemnych łącznej odległości.

Zrezygnuj z nadmiernych przewijania

Możesz zrezygnować z nadmiernego przewijania w pliku układu lub automatycznie.

Aby zrezygnować z tej funkcji w pliku układu, ustaw android:overScrollMode w następujący sposób:

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

Aby to zrobić automatycznie, użyj tego kodu:

customView.overScrollMode = View.OVER_SCROLL_NEVER

customView.setOverScrollMode(View.OVER_SCROLL_NEVER);

Dodatkowe materiały

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

• Zdarzenia wejściowe
• Omówienie czujników
• Tworzenie interaktywnego widoku niestandardowego