สร้างภาพเคลื่อนไหวการเลื่อนสัมผัส

ลองใช้วิธีการเขียน

Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีใช้การแตะและการป้อนข้อมูลในการเขียน

การเลื่อน →

ใน 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 และใช้แถบเลื่อน ออบเจ็กต์
• การแพน: เลื่อนไปพร้อมกันตาม x และ แกน y เรียกว่าการแพนกล้อง

เป็นเรื่องปกติที่จะใช้วัตถุตัวเลื่อนร่วมกับท่าทางสัมผัสการสะบัด แต่ คุณสามารถใช้ส่วนขยายประเภทนี้ได้ในทุกบริบทที่คุณต้องการให้ UI แสดงการเลื่อนดู การตอบสนองต่อกิจกรรมการสัมผัส เช่น คุณสามารถลบล้าง 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% ทั้ง 2 ด้าน ของคุณ ขนาดการแสดงผลจะมีขนาดใหญ่เป็น 2 เท่าในแนวนอนและแนวตั้ง

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

อีกตัวอย่างหนึ่งของการใช้แถบเลื่อน โปรดดูที่ ซอร์สโค้ด สำหรับชั้นเรียน ViewPager โดยจะเลื่อนตามการสะบัดและการใช้ การเลื่อนเพื่อใช้ "snap-to-page" ภาพเคลื่อนไหว

ใช้เอฟเฟกต์การเลื่อนไปจนสุด

ตั้งแต่ Android 12 เป็นต้นไป EdgeEffect จะเพิ่ม API ต่อไปนี้สําหรับการใช้เอฟเฟกต์การเลื่อนเกินระยะยืด

• getDistance()
• onPullDistance()

หากต้องการให้ผู้ใช้ได้รับประสบการณ์ที่ดีที่สุดด้วยการเลื่อนแบบยืดได้ ให้ทำดังนี้ ดังต่อไปนี้:

1. เมื่อภาพเคลื่อนไหวแบบยืดมีผลเมื่อผู้ใช้แตะ เนื้อหา ให้ลงทะเบียนการสัมผัสเป็น "catch" ผู้ใช้หยุดภาพเคลื่อนไหวและ ก็เริ่มชักนำการยืดออกอีกครั้ง
2. เมื่อผู้ใช้เลื่อนนิ้วไปในทิศทางตรงกันข้ามกับการยืด ปล่อยการยืดจนกว่าจะยืดออกจนสุด จากนั้นจึงเริ่มเลื่อน
3. เมื่อผู้ใช้ยืดเส้นยืดสาย ให้สะบัด EdgeEffect เพื่อเพิ่มเอฟเฟกต์การยืด

จับภาพเคลื่อนไหว

เมื่อผู้ใช้จับภาพเคลื่อนไหวแบบยืดที่ขยายอยู่ EdgeEffect.getDistance() แสดงผล 0 เงื่อนไขนี้ ระบุว่าการยืดนั้นต้องมีการดัดแปลงด้วยการเคลื่อนไหวด้วยการแตะ ส่วนใหญ่ ของคอนเทนเนอร์ ตรวจพบใน 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() จะแสดงผล ปริมาณเดลต้าที่ส่งผ่านปริมาณที่ใช้ไป เริ่มตั้งแต่ 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);

แหล่งข้อมูลเพิ่มเติม

โปรดดูแหล่งข้อมูลที่เกี่ยวข้องต่อไปนี้

• ภาพรวมของเหตุการณ์การป้อนข้อมูล
• ภาพรวมเซ็นเซอร์
• ทำให้มุมมองที่กำหนดเองเป็นแบบอินเทอร์แอกทีฟ