Animasikan isyarat menggulir

Mencoba cara Compose

Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan sentuhan dan input di Compose.

Scrolling →

Di Android, proses scroll biasanya dicapai menggunakan class ScrollView. Tempatkan tata letak standar apa pun yang mungkin melampaui batas penampungnya dalam ScrollView untuk memberikan tampilan yang dapat di-scroll dan dikelola oleh framework. Penerapan scroller kustom hanya diperlukan untuk skenario khusus. Dokumen ini menjelaskan cara menampilkan efek scroll sebagai respons terhadap gestur sentuh menggunakan scroller.

Aplikasi Anda dapat menggunakan scroller—Scroller atau OverScroller—untuk mengumpulkan data yang diperlukan untuk menghasilkan animasi scroll sebagai respons terhadap peristiwa sentuh. Kedua scroller ini serupa, tetapi OverScroller juga menyertakan metode untuk menunjukkan kepada pengguna saat mereka mencapai tepi konten setelah gestur geser atau lempar.

• Mulai Android 12 (API level 31), elemen visual meregang dan memantul kembali pada peristiwa tarik, lalu mengayunkan dan memantul kembali saat peristiwa fling.
• Di Android 11 (level API 30) dan yang lebih lama, batas menampilkan efek "glow" setelah gestur tarik atau lempar ke tepi.

Contoh InteractiveChart dalam dokumen ini menggunakan class EdgeEffect untuk menampilkan efek overscroll ini.

Catatan: Gunakan OverScroller, bukan Scroller, untuk animasi scroll. OverScroller memberikan kompatibilitas mundur terbaik dengan perangkat sebelumnya.

Anda umumnya hanya perlu menggunakan scroll ketika menerapkan scrolling sendiri. ScrollView dan HorizontalScrollView melakukan semua ini untuk Anda jika Anda menyusun tata letak di dalamnya.

Anda dapat menggunakan scroll untuk menganimasikan scroll dari waktu ke waktu, menggunakan prinsip fisika scroll standar platform seperti gesekan, kecepatan, dan kualitas lainnya. Scroller itu sendiri tidak menggambar apa pun. Scroller melacak offset scroll untuk Anda dari waktu ke waktu, tetapi tidak otomatis menerapkan posisi tersebut ke tampilan Anda. Anda harus mendapatkan dan menerapkan koordinat baru pada kecepatan yang membuat animasi scroll terlihat lancar.

Memahami terminologi scrolling

Scroll adalah kata yang memiliki arti yang berbeda di Android, bergantung pada konteksnya.

Scroll adalah proses umum untuk menggerakkan area pandang—yaitu, "jendela" konten yang Anda lihat. Saat scrolling berada di sumbu x dan y, tindakan ini disebut panning. Aplikasi contoh InteractiveChart dalam dokumen ini mengilustrasikan dua jenis scroll, tarik, dan lempar yang berbeda:

• Menyeret: ini adalah jenis scroll yang terjadi saat pengguna menarik jarinya di layar sentuh. Anda dapat menerapkan tindakan menarik dengan mengganti onScroll() di GestureDetector.OnGestureListener. Untuk informasi selengkapnya tentang menarik, lihat Menyeret dan menskalakan.
• Flinging: ini adalah jenis scroll yang terjadi saat pengguna menarik dan mengangkat jari dengan cepat. Setelah pengguna mengangkat jarinya, Anda biasanya perlu terus menggerakkan area pandang, tetapi melambat hingga area pandang berhenti bergerak. Anda dapat menerapkan flinging dengan mengganti onFling() di GestureDetector.OnGestureListener dan menggunakan objek scroller.
• Panning: men-scroll secara bersamaan di sepanjang sumbu x dan y disebut panning.

Penggunaan objek scroller bersamaan dengan gestur ayunkan jari adalah hal yang umum, tetapi Anda dapat menggunakannya dalam konteks apa pun saat Anda ingin UI menampilkan scroll sebagai respons terhadap peristiwa sentuh. Misalnya, Anda dapat mengganti onTouchEvent() untuk memproses peristiwa sentuh secara langsung dan menghasilkan efek scroll atau animasi "snap-to-page" sebagai respons terhadap peristiwa sentuh tersebut.

Komponen yang berisi implementasi scroll bawaan

Komponen Android berikut berisi dukungan bawaan untuk perilaku scroll dan overscroll:

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

Jika aplikasi Anda perlu mendukung scroll dan overscroll di dalam komponen yang berbeda, selesaikan langkah-langkah berikut:

1. Buat implementasi scroll berbasis sentuhan kustom.
2. Untuk mendukung perangkat yang menjalankan Android 12 dan yang lebih baru, terapkan efek overscroll regangan.

Membuat implementasi scroll berbasis sentuhan kustom

Bagian ini menjelaskan cara membuat scroller Anda sendiri jika aplikasi menggunakan komponen yang tidak berisi dukungan bawaan untuk men-scroll dan melakukan overscroll.

Cuplikan berikut berasal dari contoh InteractiveChart. Class ini menggunakan GestureDetector dan mengganti metode GestureDetector.SimpleOnGestureListener onFling(). OverScroller digunakan untuk melacak gestur lempar. Jika pengguna mencapai tepi konten setelah melakukan gestur ayun, penampung akan menunjukkan kapan pengguna mencapai akhir konten. Indikasi ini bergantung pada versi Android yang dijalankan perangkat:

• Di Android 12 dan yang lebih baru, elemen visual meregang dan memantul kembali.
• Di Android 11 dan yang lebih lama, elemen visual menampilkan efek glow.

Catatan: Aplikasi contoh InteractiveChart menampilkan diagram yang dapat Anda perbesar/perkecil, geser, atau scroll. Dalam cuplikan berikut, contentRect mewakili koordinat persegi panjang dalam tampilan tempat diagram digambar. Pada waktu tertentu, subset dari total domain dan rentang diagram akan ditarik ke dalam area persegi panjang ini. currentViewport mewakili bagian diagram yang terlihat di layar. Karena offset piksel biasanya diperlakukan sebagai bilangan bulat, contentRect adalah jenis Rect. Karena domain dan rentang grafik adalah nilai desimal atau float, currentViewport adalah jenis RectF.

Bagian pertama cuplikan berikut menunjukkan implementasi 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);
}

Saat onFling() memanggil postInvalidateOnAnimation(), computeScroll() akan terpicu untuk memperbarui nilai x dan y. Hal ini biasanya dilakukan saat turunan tampilan menganimasikan scroll menggunakan objek scroller, seperti yang ditunjukkan pada contoh sebelumnya.

Sebagian besar tampilan meneruskan posisi x dan y objek penggeser langsung ke scrollTo(). Implementasi computeScroll() berikut menggunakan pendekatan yang berbeda: computeScrollOffset() dipanggil untuk mendapatkan lokasi x dan y saat ini. Jika kriteria untuk menampilkan efek tepi "glow" overscroll terpenuhi—yaitu, tampilan diperbesar, x atau y berada di luar batas, dan aplikasi belum menampilkan overscroll—kode akan menyiapkan efek glow overscroll dan memanggil postInvalidateOnAnimation() untuk memicu pembatalan validasi pada tampilan.

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

Berikut adalah bagian dari kode yang melakukan zoom aktual:

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

Ini adalah metode computeScrollSurfaceSize() yang dipanggil dalam cuplikan sebelumnya. Metode ini menghitung ukuran platform yang dapat di-scroll saat ini dalam piksel. Misalnya, jika seluruh area diagram terlihat, ini adalah ukuran mContentRect saat ini. Jika diagram diperbesar 200% di kedua arah, ukuran yang ditampilkan akan dua kali lebih besar secara horizontal dan vertikal.

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

Untuk contoh lain penggunaan scroller, lihat kode sumber untuk class ViewPager. Scroller melakukan scrolling sebagai respons terhadap lemparan (fling) dan menggunakan scrolling untuk menerapkan animasi "snap-to-page".

Mengimplementasikan efek overscroll regangan

Mulai Android 12, EdgeEffect menambahkan API berikut untuk menerapkan efek overscroll regangan:

• getDistance()
• onPullDistance()

Untuk memberikan pengalaman pengguna terbaik dengan overscroll regangan, lakukan hal berikut:

1. Saat animasi regangan diterapkan saat pengguna menyentuh konten, daftarkan sentuhan sebagai "tonton". Pengguna menghentikan animasi dan mulai memanipulasi regangan lagi.
2. Saat pengguna menggerakkan jari ke arah yang berlawanan dari regangan, lepaskan regangan hingga benar-benar hilang, lalu mulailah men-scroll.
3. Saat pengguna mengayunkan selama peregangan, ayunkan EdgeEffect untuk meningkatkan efek peregangan.

Menonton animasi

Saat pengguna menonton animasi regangan aktif, EdgeEffect.getDistance() akan menampilkan 0. Kondisi ini menunjukkan bahwa regangan harus dimanipulasi oleh gerakan sentuh. Di sebagian besar penampung, tangkapan terdeteksi di onInterceptTouchEvent(), seperti yang ditunjukkan pada cuplikan kode berikut:

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

Pada contoh sebelumnya, onInterceptTouchEvent() menampilkan true jika mIsBeingDragged adalah true, sehingga cukup untuk menggunakan peristiwa sebelum turunan memiliki peluang untuk menggunakannya.

Merilis efek overscroll

Efek regangan harus dilepaskan sebelum men-scroll agar regangan tidak diterapkan ke konten scroll. Contoh kode berikut menerapkan praktik terbaik ini:

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

Saat pengguna menarik, gunakan jarak tarik EdgeEffect sebelum Anda meneruskan peristiwa sentuh ke penampung scroll bertingkat atau menarik scroll. Dalam contoh kode sebelumnya, getDistance() menampilkan nilai positif saat efek tepi ditampilkan dan dapat dilepaskan dengan gerakan. Saat melepaskan regangan, peristiwa sentuh pertama kali digunakan oleh EdgeEffect sehingga sepenuhnya dilepaskan sebelum efek lain, seperti scroll bertingkat, ditampilkan. Anda dapat menggunakan getDistance() untuk mempelajari berapa jarak tarik yang diperlukan untuk melepaskan efek saat ini.

Tidak seperti onPull(), onPullDistance() menampilkan jumlah penggunaan delta yang diteruskan. Mulai Android 12, jika onPull() atau onPullDistance() diteruskan nilai deltaDistance negatif saat getDistance() adalah 0, efek regangan tidak akan berubah. Di Android 11 dan yang lebih lama, onPull() memungkinkan nilai negatif untuk total jarak menampilkan efek glow.

Memilih tidak ikut overscroll

Anda dapat memilih untuk tidak menggunakan overscroll dalam file tata letak atau secara terprogram.

Untuk memilih tidak ikut dalam file tata letak, tetapkan android:overScrollMode seperti yang ditunjukkan dalam contoh berikut:

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

Untuk memilih tidak ikut secara terprogram, gunakan kode seperti berikut:

Kotlin

customView.overScrollMode = View.OVER_SCROLL_NEVER

Java

customView.setOverScrollMode(View.OVER_SCROLL_NEVER);

Referensi lainnya

Lihat referensi terkait berikut:

• Ringkasan peristiwa input
• Ringkasan sensor
• Membuat tampilan kustom menjadi interaktif