אנימציה של תנועת גלילה

כדאי לנסות את התכונה 'כתיבה מהירה'

Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ב-Android. איך משתמשים במגע ובקלט ב-Compose

גלילה →

ב-Android, בדרך כלל משתמשים בכיתה ScrollView כדי לגלול. כדי ליצור תצוגה שניתן לגלול בה שמנוהלת על ידי המסגרת, צריך להטמיע כל פריסה רגילה שעשויה לחרוג מגבולות המאגר שלה ב-ScrollView. צריך להטמיע סרגל גלילה מותאם אישית רק בתרחישים מיוחדים. במסמך הזה מוסבר איך להציג אפקט גלילה בתגובה לחיוות מגע באמצעות סרגל גלילה.

האפליקציה יכולה להשתמש בפס גלילה – Scroller או OverScroller – כדי לאסוף את הנתונים הנדרשים ליצירת אנימציה של גלילה בתגובה לאירוע מגע. הן דומות, אבל OverScroller כולל גם שיטות להצגת אינדיקציה למשתמשים כשהם מגיעים לקצוות התוכן אחרי תנועת החלקה או תנועת משיכה.

• החל מגרסה Android 12 (רמת API 31), הרכיבים החזותיים נמתחים ומקפיצים חזרה באירוע גרירה, ומבצעים תנועה מהירה ומקפיצים חזרה באירוע תנועה מהירה.
• בגרסה Android 11 (רמת API 30) וגרסאות קודמות, אחרי שמגררים או מניפים את האצבע לקצה המסך, מופיע אפקט 'זוהר' על גבולות המסך.

בדוגמה InteractiveChart במסמך הזה נעשה שימוש בכיתה EdgeEffect כדי להציג את האפקטים האלה של גלילה מעבר לקצה המסך.

אפשר להשתמש בפס גלילה כדי ליצור אנימציה של גלילה לאורך זמן, באמצעות פיזיקה סטנדרטית של גלילה בפלטפורמה, כמו חיכוך, מהירות ומאפיינים אחרים. סרגל ההזזה עצמו לא מצייר שום דבר. סרגל הגלילה עוקב אחרי הזזות הגלילה לאורך זמן, אבל הוא לא מחיל את המיקומים האלה באופן אוטומטי על התצוגה. צריך לקבל קואורדינטות חדשות ולהחיל אותן בקצב שיגרום לאנימציית הגלילה להיראות חלקה.

הסבר על המונחים הקשורים לגלילה

למילה 'גלילה' יכולות להיות משמעויות שונות ב-Android, בהתאם להקשר.

גלילה היא התהליך הכללי של העברת אזור התצוגה – כלומר 'החלון' של התוכן שמוצג. כשהגלילה מתבצעת גם בציר x וגם בציר y, היא נקראת זזת. באפליקציית הדוגמה InteractiveChart שמופיעה במסמך הזה מוצגים שני סוגים שונים של גלילה, גרירה והשלכה:

• גרירה: זהו סוג הגלילה שמתרחש כשמשתמש גורר את האצבע על המסך המגע. כדי להטמיע גרירה, צריך לשנות את onScroll() ב-GestureDetector.OnGestureListener. מידע נוסף על גרירה זמין במאמר גרירה ושינוי קנה מידה.
• דחיפת המסך: זהו סוג הגלילה שמתרחש כשמשתמש גורר את האצבע ומרים אותה במהירות. אחרי שהמשתמש מרים את האצבע, בדרך כלל כדאי להמשיך להזיז את אזור התצוגה, אבל להאט עד שהוא יפסיק לזוז. כדי להטמיע תנועה מהירה, משנים את onFling() ב-GestureDetector.OnGestureListener ומשתמשים באובייקט scroller.
• הזזה: גלילה בו-זמנית בכיוון x ובכיוון y נקראת הזזה.

מקובל להשתמש באובייקטים של גלילה בשילוב עם תנועת משיכה, אבל אפשר להשתמש בהם בכל הקשר שבו רוצים שממשק המשתמש יציג גלילה בתגובה לאירוע מגע. לדוגמה, אפשר לשנות את הערך של onTouchEvent() כדי לעבד אירועי מגע ישירות וליצור אפקט גלילה או אנימציה של 'הצמדה לדף' בתגובה לאירועי המגע האלה.

רכיבים שמכילים הטמעות מובנות של גלילה

הרכיבים הבאים של Android מכילים תמיכה מובנית בהתנהגות של גלילה וגלילה מעבר למסך:

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

אם האפליקציה שלכם צריכה לתמוך בגלילה ובגלילה מעבר לתוכן בתוך רכיב אחר, עליכם לבצע את השלבים הבאים:

1. יצירת הטמעה בהתאמה אישית של גלילה באמצעות מגע.
2. כדי לתמוך במכשירים עם Android 12 ואילך, צריך להטמיע את האפקט של גרירת המסך למטה עם מתיחה.

יצירת הטמעה מותאמת אישית של גלילה מבוססת-מגע

בקטע הזה מוסבר איך ליצור גלילה משלכם אם באפליקציה שלכם נעשה שימוש ברכיב שלא מכיל תמיכה מובנית בגלילה ובגלילה מעבר לקצה המסך.

קטע הקוד הבא מגיע מהדוגמה InteractiveChart. היא משתמשת ב-GestureDetector ומבטלת את השיטה GestureDetector.SimpleOnGestureListener onFling(). הוא משתמש ב-OverScroller כדי לעקוב אחרי תנועת ההשלכה. אם המשתמש מגיע לקצוות התוכן אחרי שהוא מבצע את תנועת ההזזה, המאגר מציין מתי המשתמש מגיע לסוף התוכן. ההודעה תלויה בגרסת Android שפועלת במכשיר:

• בגרסה Android 12 ואילך, הרכיבים החזותיים נמתחים ומתכווצים.
• בגרסה Android 11 וגרסאות קודמות, הרכיבים החזותיים מוצגים עם אפקט זוהר.

החלק הראשון של קטע הקוד הבא מציג את ההטמעה של onFling():

// Viewport extremes. See currentViewport for a discussion of the viewport.
private val AXIS_X_MIN = -1f
private val AXIS_X_MAX = 1f
private val AXIS_Y_MIN = -1f
private val AXIS_Y_MAX = 1f

// The current viewport. This rectangle represents the visible chart
// domain and range. The viewport is the part of the app that the
// user manipulates via touch gestures.
private val currentViewport = RectF(AXIS_X_MIN, AXIS_Y_MIN, AXIS_X_MAX, AXIS_Y_MAX)

// The current destination rectangle—in pixel coordinates—into which
// the chart data must be drawn.
private lateinit var contentRect: Rect

private lateinit var scroller: OverScroller
private lateinit var scrollerStartViewport: RectF
...
private val gestureListener = object : GestureDetector.SimpleOnGestureListener() {

    override fun onDown(e: MotionEvent): Boolean {
        // Initiates the decay phase of any active edge effects.
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
            releaseEdgeEffects()
        }
        scrollerStartViewport.set(currentViewport)
        // Aborts any active scroll animations and invalidates.
        scroller.forceFinished(true)
        ViewCompat.postInvalidateOnAnimation(this@InteractiveLineGraphView)
        return true
    }
    ...
    override fun onFling(
            e1: MotionEvent,
            e2: MotionEvent,
            velocityX: Float,
            velocityY: Float
    ): Boolean {
        fling((-velocityX).toInt(), (-velocityY).toInt())
        return true
    }
}

private fun fling(velocityX: Int, velocityY: Int) {
    // Initiates the decay phase of any active edge effects.
    // On Android 12 and later, the edge effect (stretch) must
    // continue.
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
            releaseEdgeEffects()
    }
    // Flings use math in pixels, as opposed to math based on the viewport.
    val surfaceSize: Point = computeScrollSurfaceSize()
    val (startX: Int, startY: Int) = scrollerStartViewport.run {
        set(currentViewport)
        (surfaceSize.x * (left - AXIS_X_MIN) / (AXIS_X_MAX - AXIS_X_MIN)).toInt() to
                (surfaceSize.y * (AXIS_Y_MAX - bottom) / (AXIS_Y_MAX - AXIS_Y_MIN)).toInt()
    }
    // Before flinging, stops the current animation.
    scroller.forceFinished(true)
    // Begins the animation.
    scroller.fling(
            // Current scroll position.
            startX,
            startY,
            velocityX,
            velocityY,
            /*
             * Minimum and maximum scroll positions. The minimum scroll
             * position is generally 0 and the maximum scroll position
             * is generally the content size less the screen size. So if the
             * content width is 1000 pixels and the screen width is 200
             * pixels, the maximum scroll offset is 800 pixels.
             */
            0, surfaceSize.x - contentRect.width(),
            0, surfaceSize.y - contentRect.height(),
            // The edges of the content. This comes into play when using
            // the EdgeEffect class to draw "glow" overlays.
            contentRect.width() / 2,
            contentRect.height() / 2
    )
    // Invalidates to trigger computeScroll().
    ViewCompat.postInvalidateOnAnimation(this)
}

// Viewport extremes. See currentViewport for a discussion of the viewport.
private static final float AXIS_X_MIN = -1f;
private static final float AXIS_X_MAX = 1f;
private static final float AXIS_Y_MIN = -1f;
private static final float AXIS_Y_MAX = 1f;

// The current viewport. This rectangle represents the visible chart
// domain and range. The viewport is the part of the app that the
// user manipulates via touch gestures.
private RectF currentViewport =
  new RectF(AXIS_X_MIN, AXIS_Y_MIN, AXIS_X_MAX, AXIS_Y_MAX);

// The current destination rectangle—in pixel coordinates—into which
// the chart data must be drawn.
private final Rect contentRect = new Rect();

private final OverScroller scroller;
private final RectF scrollerStartViewport =
  new RectF(); // Used only for zooms and flings.
...
private final GestureDetector.SimpleOnGestureListener gestureListener
        = new GestureDetector.SimpleOnGestureListener() {
    @Override
    public boolean onDown(MotionEvent e) {
         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
            releaseEdgeEffects();
        }
        scrollerStartViewport.set(currentViewport);
        scroller.forceFinished(true);
        ViewCompat.postInvalidateOnAnimation(InteractiveLineGraphView.this);
        return true;
    }
...
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        fling((int) -velocityX, (int) -velocityY);
        return true;
    }
};

private void fling(int velocityX, int velocityY) {
    // Initiates the decay phase of any active edge effects.
    // On Android 12 and later, the edge effect (stretch) must
    // continue.
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
            releaseEdgeEffects();
    }
    // Flings use math in pixels, as opposed to math based on the viewport.
    Point surfaceSize = computeScrollSurfaceSize();
    scrollerStartViewport.set(currentViewport);
    int startX = (int) (surfaceSize.x * (scrollerStartViewport.left -
            AXIS_X_MIN) / (
            AXIS_X_MAX - AXIS_X_MIN));
    int startY = (int) (surfaceSize.y * (AXIS_Y_MAX -
            scrollerStartViewport.bottom) / (
            AXIS_Y_MAX - AXIS_Y_MIN));
    // Before flinging, stops the current animation.
    scroller.forceFinished(true);
    // Begins the animation.
    scroller.fling(
            // Current scroll position.
            startX,
            startY,
            velocityX,
            velocityY,
            /*
             * Minimum and maximum scroll positions. The minimum scroll
             * position is generally 0 and the maximum scroll position
             * is generally the content size less the screen size. So if the
             * content width is 1000 pixels and the screen width is 200
             * pixels, the maximum scroll offset is 800 pixels.
             */
            0, surfaceSize.x - contentRect.width(),
            0, surfaceSize.y - contentRect.height(),
            // The edges of the content. This comes into play when using
            // the EdgeEffect class to draw "glow" overlays.
            contentRect.width() / 2,
            contentRect.height() / 2);
    // Invalidates to trigger computeScroll().
    ViewCompat.postInvalidateOnAnimation(this);
}

כש-onFling() קורא ל-postInvalidateOnAnimation(), הוא מפעיל את computeScroll() כדי לעדכן את הערכים של x ו-y. בדרך כלל זה קורה כשצאצא של תצוגה מבצע אנימציה של גלילה באמצעות אובייקט גלילה, כפי שמוצג בדוגמה הקודמת.

רוב התצוגות מעבירות את המיקום x ו-y של אובייקט הגלילה ישירות אל scrollTo(). בהטמעה הבאה של computeScroll() נעשה שימוש בגישה שונה: היא קוראת ל-computeScrollOffset() כדי לקבל את המיקום הנוכחי של x ו-y. כשהקריטריונים להצגת אפקט 'זוהר' בקצה של גלילה מעבר למסגרת מתקיימים – כלומר, התצוגה מוגדרת להגדלת מרחק התצוגה, הערך של x או y חורג מהגבולות והאפליקציה כבר לא מציגה גלילה מעבר למסגרת – הקוד מגדיר את אפקט הזוהרת של גלילה מעבר למסגרת וקורא ל-postInvalidateOnAnimation() כדי להפעיל אימות מחדש בתצוגה.

// Edge effect/overscroll tracking objects.
private lateinit var edgeEffectTop: EdgeEffect
private lateinit var edgeEffectBottom: EdgeEffect
private lateinit var edgeEffectLeft: EdgeEffect
private lateinit var edgeEffectRight: EdgeEffect

private var edgeEffectTopActive: Boolean = false
private var edgeEffectBottomActive: Boolean = false
private var edgeEffectLeftActive: Boolean = false
private var edgeEffectRightActive: Boolean = false

override fun computeScroll() {
    super.computeScroll()

    var needsInvalidate = false

    // The scroller isn't finished, meaning a fling or
    // programmatic pan operation is active.
    if (scroller.computeScrollOffset()) {
        val surfaceSize: Point = computeScrollSurfaceSize()
        val currX: Int = scroller.currX
        val currY: Int = scroller.currY

        val (canScrollX: Boolean, canScrollY: Boolean) = currentViewport.run {
            (left > AXIS_X_MIN || right < AXIS_X_MAX) to (top > AXIS_Y_MIN || bottom < AXIS_Y_MAX)
        }

        /*
         * If you are zoomed in, currX or currY is
         * outside of bounds, and you aren't already
         * showing overscroll, then render the overscroll
         * glow edge effect.
         */
        if (canScrollX
                && currX < 0
                && edgeEffectLeft.isFinished
                && !edgeEffectLeftActive) {
            edgeEffectLeft.onAbsorb(scroller.currVelocity.toInt())
            edgeEffectLeftActive = true
            needsInvalidate = true
        } else if (canScrollX
                && currX > surfaceSize.x - contentRect.width()
                && edgeEffectRight.isFinished
                && !edgeEffectRightActive) {
            edgeEffectRight.onAbsorb(scroller.currVelocity.toInt())
            edgeEffectRightActive = true
            needsInvalidate = true
        }

        if (canScrollY
                && currY < 0
                && edgeEffectTop.isFinished
                && !edgeEffectTopActive) {
            edgeEffectTop.onAbsorb(scroller.currVelocity.toInt())
            edgeEffectTopActive = true
            needsInvalidate = true
        } else if (canScrollY
                && currY > surfaceSize.y - contentRect.height()
                && edgeEffectBottom.isFinished
                && !edgeEffectBottomActive) {
            edgeEffectBottom.onAbsorb(scroller.currVelocity.toInt())
            edgeEffectBottomActive = true
            needsInvalidate = true
        }
        ...
    }
}

// Edge effect/overscroll tracking objects.
private EdgeEffectCompat edgeEffectTop;
private EdgeEffectCompat edgeEffectBottom;
private EdgeEffectCompat edgeEffectLeft;
private EdgeEffectCompat edgeEffectRight;

private boolean edgeEffectTopActive;
private boolean edgeEffectBottomActive;
private boolean edgeEffectLeftActive;
private boolean edgeEffectRightActive;

@Override
public void computeScroll() {
    super.computeScroll();

    boolean needsInvalidate = false;

    // The scroller isn't finished, meaning a fling or
    // programmatic pan operation is active.
    if (scroller.computeScrollOffset()) {
        Point surfaceSize = computeScrollSurfaceSize();
        int currX = scroller.getCurrX();
        int currY = scroller.getCurrY();

        boolean canScrollX = (currentViewport.left > AXIS_X_MIN
                || currentViewport.right < AXIS_X_MAX);
        boolean canScrollY = (currentViewport.top > AXIS_Y_MIN
                || currentViewport.bottom < AXIS_Y_MAX);

        /*
         * If you are zoomed in, currX or currY is
         * outside of bounds, and you aren't already
         * showing overscroll, then render the overscroll
         * glow edge effect.
         */
        if (canScrollX
                && currX < 0
                && edgeEffectLeft.isFinished()
                && !edgeEffectLeftActive) {
            edgeEffectLeft.onAbsorb((int)mScroller.getCurrVelocity());
            edgeEffectLeftActive = true;
            needsInvalidate = true;
        } else if (canScrollX
                && currX > (surfaceSize.x - contentRect.width())
                && edgeEffectRight.isFinished()
                && !edgeEffectRightActive) {
            edgeEffectRight.onAbsorb((int)mScroller.getCurrVelocity());
            edgeEffectRightActive = true;
            needsInvalidate = true;
        }

        if (canScrollY
                && currY < 0
                && edgeEffectTop.isFinished()
                && !edgeEffectTopActive) {
            edgeEffectRight.onAbsorb((int)mScroller.getCurrVelocity());
            edgeEffectTopActive = true;
            needsInvalidate = true;
        } else if (canScrollY
                && currY > (surfaceSize.y - contentRect.height())
                && edgeEffectBottom.isFinished()
                && !edgeEffectBottomActive) {
            edgeEffectRight.onAbsorb((int)mScroller.getCurrVelocity());
            edgeEffectBottomActive = true;
            needsInvalidate = true;
        }
        ...
    }

זהו הקטע בקוד שמבצע את ההגדלה בפועל:

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

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

זוהי השיטה computeScrollSurfaceSize() שנקראת בקטע הקוד הקודם. הפונקציה מחשבת את גודל המשטח הנוכחי שאפשר לגלול בו בפיקסלים. לדוגמה, אם כל אזור התרשים גלוי, זהו הגודל הנוכחי של mContentRect. אם התרשים מוגדל ב-200% בשני הכיוונים, הגודל המוחזר גדול פי שניים אופקית ואנכית.

private fun computeScrollSurfaceSize(): Point {
    return Point(
            (contentRect.width() * (AXIS_X_MAX - AXIS_X_MIN) / currentViewport.width()).toInt(),
            (contentRect.height() * (AXIS_Y_MAX - AXIS_Y_MIN) / currentViewport.height()).toInt()
    )
}

private Point computeScrollSurfaceSize() {
    return new Point(
            (int) (contentRect.width() * (AXIS_X_MAX - AXIS_X_MIN)
                    / currentViewport.width()),
            (int) (contentRect.height() * (AXIS_Y_MAX - AXIS_Y_MIN)
                    / currentViewport.height()));
}

דוגמה נוספת לשימוש ב-scroller מופיעה בקוד המקור של הכיתה ViewPager. הוא גולל בתגובה לתנועות זריזות, ומשתמש בגלילת המסך כדי להטמיע את האנימציה 'הצמדה לדף'.

הטמעת אפקט הגלילה המורחבת

החל מ-Android 12, EdgeEffect מוסיף את ממשקי ה-API הבאים להטמעת אפקט ההמרה של גלילה מוגזמת:

• getDistance()
• onPullDistance()

כדי לספק את חוויית המשתמש הטובה ביותר עם גלילה מורחבת, צריך לבצע את הפעולות הבאות:

1. כשהאנימציה של התרחבות התמונה פועלת בזמן שהמשתמש נוגעים בתוכן, צריך לרשום את המגע כ'תפיסת'. המשתמש מפסיק את האנימציה ומתחיל שוב לשנות את הכיוון.
2. כשהמשתמש מזיז את האצבע בכיוון ההפוך מהכיוון שבו הוא מרחיב את המסך, צריך לשחרר את האחיזה עד שהמסך חוזר למצבו הרגיל ואז להתחיל לגלול.
3. כשהמשתמש מבצע תנועת משיכה במהלך מתיחה, הוא יכול לבצע תנועת משיכה ב-EdgeEffect כדי לשפר את אפקט המתיחה.

צפייה באנימציה

כשמשתמש תופס אנימציית מתיחה פעילה, הערך המוחזר על ידי EdgeEffect.getDistance() הוא 0. התנאי הזה מציין שצריך לשנות את המתיחה באמצעות תנועת המגע. ברוב הקונטיינרים, ה-catch מזוהה ב-onInterceptTouchEvent(), כפי שמוצג בקטע הקוד הבא:

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

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

בדוגמה הקודמת, הפונקציה onInterceptTouchEvent() מחזירה את הערך true כשהערך של mIsBeingDragged הוא true, כך שאפשר לצרוך את האירוע לפני שהאירוע יגיע לצאצא.

שחרור אפקט הגלילה החורגת

חשוב לבטל את אפקט ההמרת הגובה לפני הגלילה כדי למנוע את החלת ההמרה על התוכן שגלול. דוגמת הקוד הבאה מיישמת את השיטה המומלצת הזו:

override fun onTouchEvent(ev: MotionEvent): Boolean {
  val activePointerIndex = ev.actionIndex

  when (ev.getActionMasked()) {
    MotionEvent.ACTION_MOVE ->
      val x = ev.getX(activePointerIndex)
      val y = ev.getY(activePointerIndex)
      var deltaY = y - lastMotionY
      val pullDistance = deltaY / height
      val displacement = x / width

      if (deltaY < 0f && EdgeEffectCompat.getDistance(edgeEffectTop) > 0f) {
        deltaY -= height * EdgeEffectCompat.onPullDistance(edgeEffectTop,
            pullDistance, displacement);
      }
      if (deltaY > 0f && EdgeEffectCompat.getDistance(edgeEffectBottom) > 0f) {
        deltaY += height * EdgeEffectCompat.onPullDistance(edgeEffectBottom,
            -pullDistance, 1 - displacement);
      }
      ...
  }

@Override
public boolean onTouchEvent(MotionEvent ev) {

  final int actionMasked = ev.getActionMasked();

  switch (actionMasked) {
    case MotionEvent.ACTION_MOVE:
      final float x = ev.getX(activePointerIndex);
      final float y = ev.getY(activePointerIndex);
      float deltaY = y - lastMotionY;
      float pullDistance = deltaY / getHeight();
      float displacement = x / getWidth();

      if (deltaY < 0 && EdgeEffectCompat.getDistance(edgeEffectTop) > 0) {
        deltaY -= getHeight() * EdgeEffectCompat.onPullDistance(edgeEffectTop,
            pullDistance, displacement);
      }
      if (deltaY > 0 && EdgeEffectCompat.getDistance(edgeEffectBottom) > 0) {
        deltaY += getHeight() * EdgeEffectCompat.onPullDistance(edgeEffectBottom,
            -pullDistance, 1 - displacement);
      }
            ...

כשהמשתמש גורר, צריך להשתמש במרחק משיכה של EdgeEffect לפני שמעבירים את אירוע המגע לקונטיינר גלילה בתצוגת עץ או גוררים את הגלילה. בדוגמת הקוד שלמעלה, הפונקציה getDistance() מחזירה ערך חיובי כשמוצג אפקט קצה ואפשר לשחרר אותו באמצעות תנועה. כשאירוע המגע משחרר את התכונה 'מתיחה', היא נצרכת קודם על ידי EdgeEffect כדי שהיא תשתחרר לחלוטין לפני שמוצגים אפקטים אחרים, כמו גלילה בתצוגה בתצוגה. אפשר להשתמש ב-getDistance() כדי לבדוק כמה מרחק משיכה נדרש כדי לשחרר את האפקט הנוכחי.

בניגוד ל-onPull(), הפונקציה onPullDistance() מחזירה את הסכום שנצרך מהפרש (delta) שהוענק. החל מגרסה Android 12, אם מועברים ל-onPull() או ל-onPullDistance() ערכים שליליים של deltaDistance כש-getDistance() הוא 0, אפקט המתיחה לא משתנה. ב-Android 11 ואילך, onPull() מאפשר להציג אפקטים של זוהר כשהמרחק הכולל הוא שלילי.

ביטול ההסכמה לגלילה מעבר לקצה המסך

אפשר לבטל את האפשרות לגלילה מעבר לקצה הקטע בקובץ הפריסה או באופן פרוגרמטי.

כדי לבטל את ההסכמה בקובץ הפריסה, מגדירים את android:overScrollMode כפי שמתואר בדוגמה הבאה:

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

כדי לבטל את ההסכמה באופן פרוגרמטי, משתמשים בקוד כמו זה:

customView.overScrollMode = View.OVER_SCROLL_NEVER

customView.setOverScrollMode(View.OVER_SCROLL_NEVER);

מקורות מידע נוספים

כדאי לעיין במקורות המידע הבאים:

• סקירה כללית על אירועי קלט
• סקירה כללית בנושא חיישנים
• איך הופכים תצוגה מותאמת אישית לאינטראקטיבית