Animacja gestu przewijania

Wypróbuj tworzenie 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 →

Na Androidzie do przewijania zwykle służy funkcja ScrollView zajęcia. Zagnieżdżaj wszystkie układy standardowe, które mogą wykraczać poza granice swojego kontenera w ScrollView, aby udostępniać przewijany widok zarządzany przez do tworzenia zasad Google. Implementacja niestandardowego elementu przewijania jest konieczna tylko w przypadku specjalnych w różnych sytuacjach. Ten dokument opisuje wyświetlanie efektu przewijania w odpowiedzi na gesty dotykowe za pomocą rolki.

Aplikacja może używać scrollerów (ScrollerlubOverScroller), aby zbierać dane potrzebne do wygenerowania animacji przewijania w odpowiedzi na zdarzenie dotykowe. Są podobne, ale OverScroller zawiera również metody: sygnalizuje użytkownikom, kiedy dotrą do krawędzi treści po przesunięciu lub przesunięciu palcem. gest.

• Od Androida 12 (poziom interfejsu API 31) elementy wizualne rozciągają się i odbijają podczas przeciągania oraz przesuwają i odbijają podczas przeciągania z odskokiem.
• Na Androidzie 11 (poziom interfejsu API 30) i starszych granice są świecące. po przeciągnięciu lub przesuwaniu w stronę krawędzi.

Przykład InteractiveChart w tym dokumencie korzysta z klasy EdgeEffect do wyświetlania efektów przewijania.

Uwaga: użyj OverScroller zamiast Scroller do animacji przewijania. OverScroller zapewnia najlepszy ruch wsteczny zgodność ze starszymi urządzeniami.

Zwykle suwaki są potrzebne tylko wtedy, gdy implementujesz przewijanie samodzielnie. ScrollView i HorizontalScrollView wszystko to zrobić, jeśli zagnieździsz w nich układ.

Do animowania przewijania w czasie, służy funkcja fizyka przewijania zgodna ze standardami platformy, w tym tarcie, prędkość i inne i odtwarzania. Scroller sam z siebie niczego nie rysuje. Przewijanie ścieżki dodatkowych pozycji, ale nie są one automatycznie stosowane do z punktu widzenia Twojej firmy. Musisz pobierać i stosować nowe współrzędne z prędkością określoną jest płynna.

Terminologia dotycząca przewijania

Przewijanie to słowo, które może mieć na Androidzie różne znaczenie, w zależności w kontekście.

Przewijanie to ogólny proces przesuwania widocznego obszaru, „okno” oglądanych treści. Gdy przewijanie znajduje się zarówno w x i y, jest to przesuwanie. InteractiveChart przykładowa aplikacja w tym dokumencie ilustruje dwa różne typy przewijania, przeciągania i przesuwania:

• Przeciąganie:ten typ przewijania ma miejsce, gdy użytkownik przeciąga palcem po ekranie dotykowym. Przeciąganie to: zastępowanie onScroll() cale GestureDetector.OnGestureListener Więcej informacji o przeciąganiu znajdziesz w sekcji Przeciąganie i skalowanie.
• Flinging: ten typ przewijania występuje, gdy użytkownik szybko przeciąga i podnosi palec. Gdy użytkownik uniesie palec, zwykle przesuwa się widoczny obszar, ale zwalnia do momentu, przestaje się ruszać widoczny obszar. Możesz zaimplementować przesuwanie, zastąpiając element onFling() w komponencie GestureDetector.OnGestureListener i używanie obiektu scroller.
• Przesuwanie: przewijanie jednocześnie wzdłuż wierszy x- i osie y są nazywane przesuwaniem.

Obiekty przewijania często używa się w połączeniu z gestem przesuwania, ale możesz ich używać w dowolnym kontekście, w którym reagowanie na zdarzenie dotknięcia. Możesz na przykład zastąpić funkcję onTouchEvent(), aby przetwarzać zdarzenia dotknięcia bezpośrednio i wywoływać w odpowiedzi na nie efekt przewijania lub animację „dopasowania do strony”.

komponenty zawierające wbudowane implementacje przewijania;

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

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

Jeśli Twoja aplikacja musi obsługiwać przewijanie i nadmiernie przewijanie w obrębie innej , wykonaj te czynności:

1. Utwórz niestandardowe przewijanie dotykowe implementacji.
2. Aby obsługiwać urządzenia z Androidem 12 lub nowszym, wprowadź efekt rozciągania podczas przewijania.

Utwórz niestandardową implementację przewijania dotykiem

Z tej sekcji dowiesz się, jak utworzyć własny przewijak, jeśli Twoja aplikacja używa , który nie zawierają wbudowaną obsługę lub daleki przewinięcie.

Ten fragment pochodzi z InteractiveChart przykład. Wykorzystuje GestureDetector i zastępuje GestureDetector.SimpleOnGestureListener metoda onFling(). Do śledzenia gestów przeciągania używa metody OverScroller. Jeśli użytkownik dotrze do krawędzi treści po wykonaniu gest przesunięcia, kontener wskazuje, kiedy użytkownik dotrze do końca treści. Zależy to od wersji Androida, biegi:

• W Androidzie 12 i nowszych elementy wizualne się rozciągają, zregenerować się.
• Na Androidzie 11 i starszych elementy wizualne mają poświatę. efektu.

Uwaga: przykładowa aplikacja InteractiveChart wyświetla wykres które możesz powiększać, przesuwać i przewijać. W tym fragmencie kodu contentRect oznacza współrzędne prostokątne widoczne na ekranie w którym wyświetla się wykres. W danym momencie podzbiór danych na wykresie domena i zakres są narysowane na tym prostokątnym obszarze. currentViewport oznacza część wykresu widoczną na ekranie. Odsunięcia w pikselach są zwykle traktowane jako liczby całkowite, więc contentRect jest typu Rect. Ponieważ domena i zakres wykresu są wartościami dziesiętnymi lub zmiennoprzecinkowymi, Typ: currentViewport RectF

Pierwsza część tego fragmentu 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() dzwoni postInvalidateOnAnimation(), uruchamia computeScroll() by zaktualizować wartości x i y. Zwykle ma to miejsce, gdy element podrzędny animuje przewijanie za pomocą obiektu przewijania, jak pokazano na poprzednim przykład.

Większość widoków przekazuje bezpośrednio położenie x i y obiektu przewijania do scrollTo() Implementacja funkcji computeScroll() w tym przykładzie jest inna: wywołuje ona funkcję computeScrollOffset(), aby uzyskać bieżącą lokalizację x i y. Gdy kryteria wyświetlania dalekiej „poświaty” efekt krawędziowy – czyli obraz jest powiększony, x lub y znajduje się poza granicami, a aplikacja jeszcze nie jest w przypadku sygnalizowania końca przewijania – kod ustawia efekt poświaty wywołuje metodę postInvalidateOnAnimation(), aby aktywować unieważnienie na widok.

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 służy do rzeczywistego powiększenia:

Kotlin

lateinit var zoomer: Zoomer
val zoomFocalPoint = PointF()
...
// If a zoom is in progress—either programmatically
// or through double touch—this performs the zoom.
if (zoomer.computeZoom()) {
    val newWidth: Float = (1f - zoomer.currZoom) * scrollerStartViewport.width()
    val newHeight: Float = (1f - zoomer.currZoom) * scrollerStartViewport.height()
    val pointWithinViewportX: Float =
            (zoomFocalPoint.x - scrollerStartViewport.left) / scrollerStartViewport.width()
    val pointWithinViewportY: Float =
            (zoomFocalPoint.y - scrollerStartViewport.top) / scrollerStartViewport.height()
    currentViewport.set(
            zoomFocalPoint.x - newWidth * pointWithinViewportX,
            zoomFocalPoint.y - newHeight * pointWithinViewportY,
            zoomFocalPoint.x + newWidth * (1 - pointWithinViewportX),
            zoomFocalPoint.y + newHeight * (1 - pointWithinViewportY)
    )
    constrainViewport()
    needsInvalidate = true
}
if (needsInvalidate) {
    ViewCompat.postInvalidateOnAnimation(this)
}

Java

// Custom object that is functionally similar to Scroller.
Zoomer zoomer;
private PointF zoomFocalPoint = new PointF();
...
// If a zoom is in progress—either programmatically
// or through double touch—this performs the zoom.
if (zoomer.computeZoom()) {
    float newWidth = (1f - zoomer.getCurrZoom()) *
            scrollerStartViewport.width();
    float newHeight = (1f - zoomer.getCurrZoom()) *
            scrollerStartViewport.height();
    float pointWithinViewportX = (zoomFocalPoint.x -
            scrollerStartViewport.left)
            / scrollerStartViewport.width();
    float pointWithinViewportY = (zoomFocalPoint.y -
            scrollerStartViewport.top)
            / scrollerStartViewport.height();
    currentViewport.set(
            zoomFocalPoint.x - newWidth * pointWithinViewportX,
            zoomFocalPoint.y - newHeight * pointWithinViewportY,
            zoomFocalPoint.x + newWidth * (1 - pointWithinViewportX),
            zoomFocalPoint.y + newHeight * (1 - pointWithinViewportY));
    constrainViewport();
    needsInvalidate = true;
}
if (needsInvalidate) {
    ViewCompat.postInvalidateOnAnimation(this);
}

To metoda computeScrollSurfaceSize(), która jest wywoływana w poprzedniego fragmentu kodu. Oblicza bieżący rozmiar powierzchni do przewijania w pikseli. Jeśli na przykład cały obszar wykresu jest widoczny, jest to bieżący rozmiaru mContentRect. Jeśli wykres jest powiększony o 200% w obu kierunków, zwrócony rozmiar jest dwa razy większy w poziomie i 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 przewijaka znajdziesz w kod źródłowy w klasie ViewPager. Przewija się w reakcji na ruch i używa przewijanie w celu wdrożenia funkcji animację.

Wdrażanie efektu rozciągania podczas przewijania

Począwszy od Androida 12, EdgeEffect dodaje te interfejsy API do implementacji efektu rozciągania dalekiego przewijania:

• getDistance()
• onPullDistance()

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

1. Jeśli animacja rozciąga się, gdy użytkownik dotknie treści, zarejestruj dotyk jako „łap”. użytkownik zatrzymuje animację, zaczyna znowu manipulować rozciąganiem.
2. Gdy użytkownik przesunie palcem w kierunku przeciwnym do rozciągania, zwolnij rozciąganie, aż zniknie, a potem zacznij przewijać.
3. Gdy użytkownik rzuca się w pionie podczas rozciągania, należy przesunąć EdgeEffect aby wzmocnić efekt rozciągania.

Animacja

Gdy użytkownik złapuje aktywną animację rozciąganą, EdgeEffect.getDistance() zwraca wartość 0. Ten warunek wskazuje, że rozciąganie musi być modyfikowane dotykiem. Najwięcej kontenery, wykrywany jest element typu „catch” w zasadzie onInterceptTouchEvent(), ponieważ w tym fragmencie kodu:

Kotlin

override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
  ...
  when (action and MotionEvent.ACTION_MASK) {
    MotionEvent.ACTION_DOWN ->
      ...
      isBeingDragged = EdgeEffectCompat.getDistance(edgeEffectBottom) > 0f ||
          EdgeEffectCompat.getDistance(edgeEffectTop) > 0f
      ...
  }
  return isBeingDragged
}

Java

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
  ...
  switch (action & MotionEvent.ACTION_MASK) {
    case MotionEvent.ACTION_DOWN:
      ...
      isBeingDragged = EdgeEffectCompat.getDistance(edgeEffectBottom) > 0
          || EdgeEffectCompat.getDistance(edgeEffectTop) > 0;
      ...
  }
}

W poprzednim przykładzie funkcja onInterceptTouchEvent() zwraca true, gdy mIsBeingDragged to true, więc wystarczy wziąć udział w zdarzeniu, zanim dziecko będzie mogło ich spożyć.

Zwolnij efekt przewijania

Ważne jest zwolnienie efektu rozciągania przed przewijaniem. Pozwoli to uniknąć rozciąga się z przewijanej treści. Następujący kod: przykład 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 elementy, uwzględniaj tę odległość wynoszącą EdgeEffect przed przekazaniem zdarzenia dotknięcia do zagnieżdżonego kontenera przewijania lub przewijanie. W poprzednim przykładzie kodu funkcja getDistance() zwraca błąd wartość dodatnią, gdy wyświetlany jest efekt krawędziowy i można go aktywować za pomocą ruchu. Gdy zdarzenie dotknięcia zwolni rozciąganie, jest ono najpierw przetwarzane przez EdgeEffect, tak aby całkowicie uwolnić go przed innymi efektami, takich jak przewijanie zagnieżdżone. Możesz użyć getDistance(), aby dowiedzieć się, jaka odległość jest wymagana do zwolnienia bieżącego efektu.

W przeciwieństwie do funkcji onPull() funkcja onPullDistance() zwraca wartość spożytej ilości przekazywanej wartości delta. Od Androida 12, jeśli: onPull() lub onPullDistance() zostały zaliczone jako wykluczające deltaDistance wartości, gdy getDistance() to 0, efekt rozciągania się nie zmieni. Na Androidzie 11 i wcześniej onPull() dopuszcza wartości ujemne dla łącznej odległości Pokaż efekty poświaty.

Zrezygnuj z nadmiernych przewijania

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

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

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

Aby zrezygnować z automatycznego wyświetlania reklam, użyj kodu podobnego do tego:

Kotlin

customView.overScrollMode = View.OVER_SCROLL_NEVER

Java

customView.setOverScrollMode(View.OVER_SCROLL_NEVER);

Dodatkowe materiały

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

• Zdarzenia wejściowe
• Omówienie czujników
• Uzyskiwanie widoku niestandardowego na potrzeby interakcji