Kaydırma hareketini canlandırma

Oluşturma yöntemini deneyin
Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Oluşturma'da dokunma ve giriş işlevini nasıl kullanacağınızı öğrenin.

Android'de kaydırma işlemi genellikle ScrollView sınıfı kullanılarak gerçekleştirilir. Kapsayıcının sınırlarının ötesine geçebilecek tüm standart düzenleri bir ScrollView içine yerleştirerek çerçeve tarafından yönetilen kaydırılabilir bir görünüm sağlayın. Özel kaydırıcının uygulanması yalnızca özel senaryolar için gereklidir. Bu dokümanda, kaydırıcıları kullanarak dokunma hareketlerine yanıt olarak nasıl bir kaydırma efektinin gösterileceği açıklanmaktadır.

Uygulamanız, bir dokunma etkinliğine yanıt olarak kaydırma animasyonu oluşturmak için gereken verileri toplamak üzere kaydırma çubuklarını (Scroller veya OverScroller) kullanabilir. Bunlar benzerdir ancak OverScroller, bir kaydırma veya kaydırma hareketinin ardından içerik kenarlarına ulaştıklarında kullanıcıları belirtmek için yöntemler de içerir.

  • Android 12'den (API düzeyi 31) itibaren, görsel öğeler bir "sürükleme" etkinliğinde esneyerek geri seker ve bir hızla kaçış etkinliğinde hızla geri seker.
  • Android 11 (API düzeyi 30) ve önceki sürümlerde sınırlar, kenara sürükleme veya kaydırma hareketinin ardından bir "parlama" efekti gösterir.

Bu dokümandaki InteractiveChart örneğinde, bu fazla kaydırma efektlerini göstermek için EdgeEffect sınıfı kullanılmaktadır.

Sürtünme, hız ve diğer nitelikler gibi platform standardı kaydırma fiziğinden yararlanarak zaman içindeki kaydırmayı canlandırmak için bir kaydırıcı kullanabilirsiniz. Kaydırıcının kendisi hiçbir şey çizmez. Kaydırıcılar zaman içinde kaydırma ofsetlerini sizin için izler, ancak bu konumları görünümünüze otomatik olarak uygulamaz. Yeni koordinatları, kaydırma animasyonunu pürüzsüz görünecek bir hızda alıp uygulamanız gerekir.

Kaydırma terminolojisini anlama

Kaydırma, bağlama bağlı olarak Android'de farklı anlamlara gelebilen bir kelimedir.

Kaydırma, görüntü alanının taşınmasına ilişkin genel süreçtir. Bu işlem, bakmakta olduğunuz içeriğin "penceresi"dir. Kaydırma hem x hem de y ekseninde olduğunda bu işleme kaydırma adı verilir. Bu dokümandaki InteractiveChart örnek uygulamasında iki farklı kaydırma, sürükleme ve sallama türü gösterilmektedir:

  • Sürükleme: Bu, bir kullanıcı parmağını dokunmatik ekranda sürüklediğinde ortaya çıkan kaydırma türüdür. GestureDetector.OnGestureListener içinde onScroll() değerini geçersiz kılarak sürükleme işlemini uygulayabilirsiniz. Sürükleme hakkında daha fazla bilgi için Sürükleme ve ölçeklendirme bölümüne bakın.
  • Flaş yapma: Bir kullanıcı parmağını hızlı bir şekilde sürükleyip kaldırdığında ortaya çıkan kaydırma türüdür. Kullanıcı parmağını kaldırdıktan sonra, genellikle görüntü alanını hareket ettirmeye devam etmek istersiniz ancak görüntü alanı hareket etmemeye başlayana kadar yavaşlatırsınız. GestureDetector.OnGestureListener içinde onFling() değerini geçersiz kılıp bir kaydırma nesnesi kullanarak hızlı kaydırmayı uygulayabilirsiniz.
  • Kaydırma: x ve y ekseninde aynı anda kaydırma yapmaya kaydırma adı verilir.

Kaydırma nesneleri genellikle bir sallama hareketiyle birlikte kullanılır, ancak bunları, kullanıcı arayüzünün bir dokunma etkinliğine yanıt olarak kaydırmayı görüntülemesini istediğiniz herhangi bir bağlamda kullanabilirsiniz. Örneğin, dokunma etkinliklerini doğrudan işlemek ve bu dokunma etkinliklerine yanıt olarak bir kaydırma efekti veya "sayfaya tuttur" animasyonu oluşturmak için onTouchEvent() öğesini geçersiz kılabilirsiniz.

Yerleşik kaydırma uygulamaları içeren bileşenler

Aşağıdaki Android bileşenleri, kaydırma ve fazla kaydırma davranışı için yerleşik destek içerir:

Uygulamanızın farklı bir bileşen içinde kaydırma ve fazla kaydırmayı desteklemesi gerekiyorsa aşağıdaki adımları tamamlayın:

  1. Dokunmaya dayalı özel bir kaydırma uygulaması oluşturun.
  2. Android 12 ve sonraki sürümleri çalıştıran cihazları desteklemek için esneme fazla kaydırma efektini uygulayın.

Dokunmaya dayalı özel bir kaydırma uygulaması oluşturma

Bu bölümde, uygulamanızda kaydırma ve fazla kaydırma için yerleşik destek içermeyen bir bileşen kullanılıyorsa kendi kaydırma çubuğunuzu nasıl oluşturacağınız açıklanmaktadır.

Aşağıdaki snippet InteractiveChart örneğinden gelir. GestureDetector kullanır ve GestureDetector.SimpleOnGestureListener yöntemini onFling() geçersiz kılar. Sallama hareketini izlemek için OverScroller özelliğini kullanır. Kullanıcı sallama hareketini yaptıktan sonra içerik kenarlarına ulaşırsa kapsayıcı, kullanıcının içeriğin sonuna ne zaman ulaştığını belirtir. Gösterge, cihazın hangi Android sürümünü çalıştırdığına bağlıdır:

  • Android 12 ve sonraki sürümlerde, görsel öğeler uzatılıp geri gelir.
  • Android 11 ve önceki sürümlerde görsel öğeler parlaklık efektiyle gösterilir.

Aşağıdaki snippet'in ilk bölümünde onFling() uygulaması gösterilmektedir:

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

onFling() postInvalidateOnAnimation() yöntemini çağırdığında x ve y değerlerini güncellemek için computeScroll() tetiklenir. Bu işlem genellikle, önceki örnekte gösterildiği gibi, görünüm alt öğesi, kaydırma nesnesini kullanarak kaydırma animasyonu yaparken yapılır.

Çoğu görünüm, kaydırıcı nesnesinin x ve y konumunu doğrudan scrollTo() öğesine geçirir. Aşağıdaki computeScroll() uygulaması farklı bir yaklaşım benimsemektedir: x ve y öğelerinin geçerli konumunu almak için computeScrollOffset() yöntemini çağırır. Fazla kaydırma "parlama" kenar efekti görüntüleme ölçütleri karşılandığında (yani ekran yakınlaştırıldığında, x veya y sınırların dışında olduğunda ve uygulama zaten fazla kaydırma göstermiyorsa). Kod, fazla kaydırma parlaklığı efektini ayarlar ve görünümün geçersiz kılınmasını tetiklemek için postInvalidateOnAnimation() çağrısı yapar.

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

Aşağıda, kodun gerçek yakınlaştırmayı gerçekleştiren bölümü gösterilmektedir:

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

Bu, önceki snippet'te çağrılan computeScrollSurfaceSize() yöntemidir. Mevcut kaydırılabilir yüzey boyutunu piksel cinsinden hesaplar. Örneğin, grafik alanının tamamı görünürse mContentRect için geçerli boyut budur. Grafik her iki yönde de% 200 yakınlaştırılırsa döndürülen boyut yatay ve dikey olarak iki kat daha büyük olur.

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

Kaydırma çubuğu kullanımıyla ilgili başka bir örnek için ViewPager sınıfının kaynak koduna bakın. Hızlıca kaydırmaya yanıt olarak kaydırır ve "sayfaya tuttur" animasyonunu uygulamak için kaydırmayı kullanır.

Fazla kaydırmayı uzatma efektini uygulama

EdgeEffect, Android 12'den itibaren esnek fazla kaydırma efektini uygulamak için aşağıdaki API'leri ekler:

  • getDistance()
  • onPullDistance()

Uzatılmış fazla kaydırmayla en iyi kullanıcı deneyimini sağlamak için aşağıdakileri yapın:

  1. Kullanıcı içeriğe dokunduğunda uzatma animasyonu etkin olduğunda, dokunmayı bir "yakalama" olarak kaydedin. Kullanıcı animasyonu durdurur ve uzatmayı tekrar etkilemeye başlar.
  2. Kullanıcı parmağını uzatmanın ters yönünde hareket ettirdiğinde, esnemeyi tamamen ayrılana kadar bırakın ve daha sonra kaydırmaya başlayın.
  3. Kullanıcı esneme sırasında hızla hareket ettiğinde esneme efektini artırmak için EdgeEffect hareketini yapın.

Animasyonu yakalayın

Bir kullanıcı etkin bir uzatma animasyonu yakaladığında EdgeEffect.getDistance(), 0 değerini döndürür. Bu durum, uzatmanın dokunma hareketiyle değiştirilmesi gerektiğini gösterir. Çoğu kapsayıcıda yakalama, aşağıdaki kod snippet'inde gösterildiği gibi onInterceptTouchEvent() içinde algılanır:

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

Yukarıdaki örnekte, onInterceptTouchEvent(), mIsBeingDragged true olduğunda true değerini döndürür. Bu nedenle, alt öğeyi kullanma fırsatı olmadan önce etkinliği tüketmeniz yeterlidir.

Fazla kaydırma efektini iptal et

Uzatmanın kaydırma içeriğine uygulanmasını önlemek için kaydırma işleminden önce uzatma efektinin serbest bırakılması önemlidir. Aşağıdaki kod örneğinde bu en iyi uygulama kullanılmıştır:

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

Kullanıcı sürüklerken, dokunma etkinliğini iç içe yerleştirilmiş bir kaydırma kapsayıcısına iletmeden önce EdgeEffect çekme mesafesini kullanın veya kaydırmayı sürükleyin. Önceki kod örneğinde getDistance(), bir uç efekti gösterilirken pozitif bir değer döndürür ve hareketle serbest bırakılabilir. Dokunma etkinliği uzatmayı serbest bıraktığında iç içe kaydırma gibi diğer etkiler gösterilmeden önce ilk olarak EdgeEffect tarafından tüketilir. Geçerli efekti açığa çıkarmak için ne kadar çekme mesafesi gerektiğini öğrenmek üzere getDistance() kullanabilirsiniz.

onPull()'den farklı olarak onPullDistance(), geçirilen deltanın tüketilen miktarını döndürür. Android 12'den itibaren, getDistance() 0 olduğunda onPull() veya onPullDistance() negatif deltaDistance değerleri aktarılırsa uzatma etkisi değişmez. Android 11 ve önceki sürümlerde onPull(), toplam mesafenin negatif değerlerinin parlaklık efektlerini göstermesine izin verir.

Fazla kaydırmayı devre dışı bırak

Fazla kaydırmayı düzen dosyanızda veya programlı olarak devre dışı bırakabilirsiniz.

Düzen dosyanızda devre dışı bırakmak için android:overScrollMode öğesini aşağıdaki örnekte gösterildiği gibi ayarlayın:

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

Programatik olarak devre dışı bırakmak için aşağıdaki gibi bir kod kullanın:

Kotlin

customView.overScrollMode = View.OVER_SCROLL_NEVER

Java

customView.setOverScrollMode(View.OVER_SCROLL_NEVER);

Ek kaynaklar

Aşağıdaki ilgili kaynakları inceleyin: