Google używa technologii AI do tłumaczenia treści na Twój preferowany język. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

Animacja gestu przewijania

W Androidzie przewijanie jest zwykle realizowane za pomocą klasy ScrollView. Zagnieżdżaj dowolny standardowy układ, który może wykraczać poza granice kontenera, w elemencie ScrollView, aby zapewnić widok z możliwością przewijania zarządzany przez platformę. Implementacja niestandardowego paska przewijania jest konieczna tylko w przypadku specjalnych scenariuszy. Z tego dokumentu dowiesz się, jak wyświetlać efekt przewijania w odpowiedzi na gesty dotykowe za pomocą scrollerów.

Aplikacja może używać scrollerów (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, że po geście przesuwania lub rzucenia dotarli do krawędzi treści.

Począwszy od Androida 12 (poziom interfejsu API 31), elementy wizualne rozciągają się i odbijają przy przeciąganiu oraz przesuwają i odbijają przy przesuwaniu.
Na Androidzie 11 (poziom interfejsu API 30) i starszych wersjach po przeciągnięciu lub przesunięciu do krawędzi granice wyświetlają efekt „poświaty”.

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

Możesz użyć przewijaka, aby animować przewijanie w czasie, korzystając ze standardowych dla platformy właściwości fizycznych przewijania, takich jak tarcie, prędkość i inne. Sam scroller niczego nie rysuje. Elementy 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 widocznego obszaru, czyli „okna” z treścią, którą oglądasz. Przewijanie w osiach x i y nazywa się przesuwaniem. Przykładowa aplikacja InteractiveChart w tym dokumencie ilustruje 2 różne typy przewijania, przeciągania i szybkiego przesuwania:

Przeciąganie: to rodzaj przewijania, które występuje, gdy użytkownik przeciąga palcem po ekranie dotykowym. Możesz zaimplementować przeciąganie, zastępując onScroll() w GestureDetector.OnGestureListener. Więcej informacji o przeciąganiu znajdziesz w artykule Przeciąganie i skalowanie.
Szybkie przewijanie: ten typ przewijania 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. Możesz zaimplementować rzucanie, zastępując metodę onFling() w GestureDetector.OnGestureListener i używając obiektu scroller.
Przesuwanie: jednoczesne przewijanie wzdłuż osi X i Y jest nazywane przesuwaniem.

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

Komponenty, które zawierają wbudowane implementacje przewijania

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

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

Utwórz niestandardową implementację przewijania dotykowego.
Aby zapewnić obsługę urządzeń z Androidem 12 lub nowszym, wdroż efekt rozciągania przy przewijaniu.

Tworzenie niestandardowej implementacji przewijania dotykowego

W tej sekcji opisano, jak utworzyć własny pasek przewijania, jeśli aplikacja używa komponentu, który nie zawiera wbudowanej obsługi przewijania i przewijania poza zakres.

Poniższy fragment kodu pochodzi z przykładowego pliku InteractiveChart. Używa przy tym metody GestureDetector i zastępuje metodę GestureDetector.SimpleOnGestureListener onFling(). Używa OverScroller do śledzenia gestu szybkiego przesunięcia. Jeśli użytkownik po wykonaniu gestu szybkiego przesunięcia dotrze do krawędzi treści, kontener poinformuje go o tym. Sposób wyświetlania tej informacji zależy od wersji Androida na urządzeniu:

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

Uwaga: przykładowa aplikacja InteractiveChart wyświetla wykres, który można powiększać, przesuwać i przewijać. We fragmencie kodu poniżej contentRect reprezentuje współrzędne prostokąta w widoku, w którym rysowany jest wykres. W danym momencie w tym prostokątnym obszarze jest rysowany podzbiór całej dziedziny i zakresu wykresu. currentViewport reprezentuje część wykresu widoczną na ekranie. Ponieważ przesunięcia pikseli są zwykle traktowane jako liczby całkowite, contentRect jest typu Rect. Ponieważ dziedzina i zbiór wartości wykresu są wartościami dziesiętnymi lub zmiennoprzecinkowymi, currentViewport jest typu RectF.

Pierwsza część poniższego 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(), powoduje to, że computeScroll() aktualizuje wartości x i y. Zwykle robi się to, gdy widok podrzędny animuje przewijanie za pomocą obiektu przewijania, jak pokazano w poprzednim przykładzie.

Większość widoków przekazuje pozycję x i y obiektu scroller bezpośrednio do scrollTo(). Poniższa implementacja computeScroll() wykorzystuje inne podejście: wywołuje computeScrollOffset(), aby uzyskać bieżącą lokalizację x i y. Gdy zostaną spełnione kryteria wyświetlania efektu „poświaty” krawędzi przy przewijaniu poza zakres – czyli 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 sekcja kodu, która 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);
}

Jest to metoda computeScrollSurfaceSize() wywoływana w poprzednim fragmencie kodu. Oblicza bieżący rozmiar obszaru 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, zwracany 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 przewijania

Od Androida 12 EdgeEffect dodaje te interfejsy API do implementacji efektu rozciągania przy przewijaniu poza zakres:

getDistance()
onPullDistance()

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

Jeśli animacja rozciągania jest aktywna, gdy użytkownik dotyka treści, zarejestruj dotknięcie jako „przechwycenie”. Użytkownik zatrzymuje animację i ponownie zaczyna manipulować rozciąganiem.
Gdy użytkownik przesunie palec w kierunku przeciwnym do rozciągania, zwolnij rozciąganie, aż całkowicie zniknie, a następnie zacznij przewijać.
Gdy użytkownik wykona gest rzutu podczas rozciągania, rzuć EdgeEffect, aby wzmocnić efekt rozciągania.

Złap animację

Gdy użytkownik przechwyci aktywną animację rozciągania, EdgeEffect.getDistance() zwraca 0. Ten warunek wskazuje, że rozciąganie musi być sterowane ruchem dotykowym. W większości kontenerów błąd 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 true, gdy mIsBeingDragged to true, więc wystarczy wykorzystać zdarzenie, zanim dziecko będzie miało okazję je wykorzystać.

Zwolnienie efektu overscroll

Ważne jest, aby zwolnić efekt rozciągania przed przewijaniem, aby zapobiec zastosowaniu rozciągania do przewijanej treści. Ten przykładowy kod 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, wykorzystaj odległość przeciągania EdgeEffect, zanim przekażesz zdarzenie dotknięcia do zagnieżdżonego kontenera przewijania lub przeciągniesz pasek przewijania. W powyższym przykładowym kodzie getDistance() zwraca wartość dodatnią, gdy wyświetlany jest efekt krawędzi, który można zwolnić za pomocą ruchu. Gdy zdarzenie dotknięcia zwalnia rozciągnięcie, jest ono najpierw wykorzystywane przez EdgeEffect, dzięki czemu jest całkowicie zwolnione, zanim zostaną wyświetlone inne efekty, takie jak zagnieżdżone przewijanie. Możesz użyć getDistance(), aby dowiedzieć się, jak duża odległość przeciągnięcia jest wymagana do zwolnienia bieżącego efektu.

W przeciwieństwie do onPull() funkcja onPullDistance() zwraca wykorzystaną wartość przekazanej różnicy. Począwszy od Androida 12, jeśli do onPull() lub onPullDistance() zostaną przekazane ujemne wartości deltaDistance, gdy getDistance() to 0, efekt rozciągnięcia nie ulegnie zmianie. Na Androidzie 11 i starszych wersjach onPull() umożliwia wyświetlanie efektów poświaty w przypadku ujemnych wartości łącznej odległości.

Rezygnacja z funkcji overscroll

Możesz zrezygnować z overscroll w pliku układu lub zautomatyzowany.

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

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

Aby zrezygnować z tej funkcji 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 przydatnymi materiałami:

Animacja gestu przewijania Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Terminologia dotycząca przewijania

Komponenty, które zawierają wbudowane implementacje przewijania

Tworzenie niestandardowej implementacji przewijania dotykowego

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Wdrażanie efektu rozciągania przewijania

Złap animację

Kotlin

Java

Zwolnienie efektu overscroll

Kotlin

Java

Rezygnacja z funkcji overscroll

Kotlin

Java

Dodatkowe materiały

Animacja gestu przewijania