เพิ่มการรองรับภาพเคลื่อนไหวย้อนกลับแบบคาดเดา

เมื่อใช้ API ของการย้อนกลับของระบบ คุณสามารถเลือกรับภาพเคลื่อนไหวในแอปและ รองรับการเปลี่ยนฉากที่กำหนดเองได้

หลังจากเลือกใช้แล้ว แอปจะแสดงภาพเคลื่อนไหวสำหรับการกลับไปหน้าแรก กิจกรรมข้ามแอป และงานข้ามแอป

นอกจากนี้ คุณยังอัปเกรดการอ้างอิงคอมโพเนนต์ Material เป็น v1.10.0 ของ MDC Android เพื่อรับภาพเคลื่อนไหวของคอมโพเนนต์ Material เช่น ภาพเคลื่อนไหวต่อไปนี้ได้ด้วย

• แผ่นงานด้านล่าง
• ชีตด้านข้าง
• ค้นหา

ดูข้อมูลเพิ่มเติมได้ที่คำแนะนำสำหรับนักพัฒนาซอฟต์แวร์เกี่ยวกับคอมโพเนนต์ Material ใน GitHub

วิดีโอแสดงตัวอย่างสั้นๆ ของภาพเคลื่อนไหวการย้อนกลับแบบคาดการณ์สำหรับ การข้ามกิจกรรมและการย้อนกลับไปหน้าแรกโดยใช้แอปการตั้งค่า Android

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีเพิ่มการรองรับท่าทางสัมผัสย้อนกลับแบบคาดการณ์

เพิ่มการเปลี่ยนภาพและภาพเคลื่อนไหวในแอปที่กำหนดเอง

คุณสามารถสร้างภาพเคลื่อนไหวและการเปลี่ยนพร็อพเพอร์ตี้ในแอปที่กำหนดเอง ภาพเคลื่อนไหวข้ามกิจกรรมที่กำหนดเอง และภาพเคลื่อนไหวข้าม Fragment ที่กำหนดเองด้วยท่าทางสัมผัสการย้อนกลับแบบคาดการณ์

เพิ่มทรานซิชันที่กำหนดเองโดยใช้ Progress API

เมื่อใช้ AndroidX Activity 1.8.0-alpha01 ขึ้นไป คุณจะใช้ Predictive Back Progress API เพื่อพัฒนาภาพเคลื่อนไหวที่กำหนดเองสำหรับ ท่าทางสัมผัสย้อนกลับแบบคาดการณ์ในแอปได้ Progress API มีประโยชน์ในการสร้างภาพเคลื่อนไหว ของมุมมอง แต่มีข้อจำกัดเมื่อสร้างภาพเคลื่อนไหวของการเปลี่ยนผ่านระหว่าง Fragment ภายใน OnBackPressedCallback เราได้เปิดตัววิธี handleOnBackProgressed handleOnBackCancelled และ handleOnBackStarted เพื่อเคลื่อนไหวออบเจ็กต์ขณะที่ผู้ใช้ปัดกลับ ใช้วิธีเหล่านี้หากคุณ ต้องการปรับแต่งมากกว่าภาพเคลื่อนไหวเริ่มต้นที่ระบบมีให้ หรือ ภาพเคลื่อนไหวของคอมโพเนนต์ Material

เราคาดว่าแอปส่วนใหญ่จะใช้ AndroidX API ที่เข้ากันได้แบบย้อนหลัง แต่ก็มี API ของแพลตฟอร์มที่คล้ายกันภายในอินเทอร์เฟซ OnBackAnimationCallback ซึ่งพร้อมให้ทดสอบใน Android 14 Developer Preview 1 ขึ้นไป

ใช้ Progress API กับการเปลี่ยนฉากของ AndroidX

คุณสามารถใช้ Progress API กับ AndroidX Transitions 1.5.0-alpha01 ขึ้นไป ใน Android 14 ขึ้นไปเพื่อสร้างภาพเคลื่อนไหวการเปลี่ยนหน้าจอแบบคาดการณ์ได้

1. ใช้ TransitionManager#controlDelayedTransition แทน beginDelayedTransition เพื่อเล่นทรานซิชันเมื่อ ผู้ใช้ปัดกลับ
2. สร้างการเปลี่ยนผ่านภายใน handleOnBackStarted
3. เล่นทรานซิชันด้วยเหตุการณ์ย้อนกลับภายใน handleOnBackProgressed โดย เชื่อมโยง currentFraction กับ BackEvent.progress ซึ่งจะแสดงให้เห็นว่าผู้ใช้ปัดกลับไปไกลแค่ไหน
4. สิ้นสุดการเปลี่ยนผ่านหลังจากที่ผู้ใช้ใช้ท่าทางสัมผัสย้อนกลับใน handleOnBackPressed
5. สุดท้าย ให้รีเซ็ตสถานะของการเปลี่ยนผ่านภายใน handleOnBackCancelled

วิดีโอ โค้ด Kotlin และ XML ต่อไปนี้แสดงให้เห็นภาพเคลื่อนไหวที่กำหนดเอง ระหว่างกล่อง 2 กล่องที่ใช้ OnBackPressedCallback

    class MyFragment : Fragment() {

    val transitionSet = TransitionSet().apply {
        addTransition(Fade(Fade.MODE_OUT))
        addTransition(ChangeBounds())
        addTransition(Fade(Fade.MODE_IN))
    }
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val callback = object : OnBackPressedCallback(enabled = false) {

            var controller: TransitionSeekController? = null

            @RequiresApi(34)
            override fun handleOnBackStarted(backEvent: BackEvent) {
                // Create the transition
                controller = TransitionManager.controlDelayedTransition(
                    binding.card,
                    transitionSet
                )
                changeTextVisibility(ShowText.SHORT)
            }

            @RequiresApi(34)
            override fun handleOnBackProgressed(backEvent: BackEvent) {
                // Play the transition as the user swipes back
                if (controller?.isReady == true) {
                    controller?.currentFraction = backEvent.progress
                }
            }

            override fun handleOnBackPressed() {
                // Finish playing the transition when the user commits back
                controller?.animateToEnd()
                this.isEnabled = false
            }

            @RequiresApi(34)
            override fun handleOnBackCancelled() {
                // If the user cancels the back gesture, reset the state
                transition(ShowText.LONG)
            }
        }

        binding.shortText.setOnClickListener {
            transition(ShowText.LONG)
            callback.isEnabled = true
        }

        this.requireActivity().onBackPressedDispatcher.addCallback(callback)
    }

    private fun transition(showText: ShowText) {
        TransitionManager.beginDelayedTransition(
            binding.card,
            transitionSet
        )
        changeTextVisibility(showText)
    }

    enum class ShowText { SHORT, LONG }
    private fun changeTextVisibility(showText: ShowText) {
        when (showText) {
            ShowText.SHORT -> {
                binding.shortText.isVisible = true
                binding.longText.isVisible = false
            }
            ShowText.LONG -> {
                binding.shortText.isVisible = false
                binding.longText.isVisible = true
            }
        }
    }
}
  

<?xml version="1.0" encoding="utf-8"?>
...
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...>

        <TextView
            android:id="@+id/short_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            ... />

        <TextView
            android:id="@+id/long_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            .../>

    </androidx.constraintlayout.widget.ConstraintLayout>

เมื่อทำงานกับการเปลี่ยนผ่านการย้อนกลับแบบคาดการณ์ โปรดคำนึงถึงสิ่งต่อไปนี้

• ใช้ isSeekingSupported เพื่อตรวจสอบว่าการเปลี่ยนภาพรองรับการย้อนกลับแบบคาดการณ์หรือไม่
• ลบล้าง isSeekingSupported เพื่อให้แสดงค่าเป็นจริงสำหรับการเปลี่ยนฉากที่กำหนดเอง
• สร้างตัวควบคุม 1 ตัวต่อภาพเคลื่อนไหว 1 รายการ
• การเปลี่ยนกลับแบบคาดการณ์รองรับการเปลี่ยน AndroidX แต่ไม่รองรับการเปลี่ยนเฟรมเวิร์ก ย้ายข้อมูลออกจากเฟรมเวิร์ก การเปลี่ยนฉาก และใช้ Animator และการเปลี่ยนฉาก AndroidX แทน
• การเปลี่ยนภาพย้อนกลับแบบคาดการณ์ใช้ได้ในอุปกรณ์ที่ใช้ Android 14 ขึ้นไป และไม่สามารถใช้งานร่วมกับเวอร์ชันก่อนหน้าได้
• นอกจากนี้ยังรองรับการเปลี่ยนฉากที่สร้างด้วยฉาก XML ด้วย ใน handleOnBackStarted ให้ตั้งค่า TransitionSeekController เป็นผลลัพธ์ ของ TransitionManager.createSeekController แทนผลลัพธ์ของ controlDelayedTransition

เพิ่มการเปลี่ยนกิจกรรมที่กำหนดเองใน Android 14 ขึ้นไป

หากต้องการให้การเปลี่ยนกิจกรรมที่กำหนดเองรองรับการย้อนกลับแบบคาดการณ์ใน Android 14 ขึ้นไป คุณสามารถใช้ overrideActivityTransition แทน overridePendingTransition ได้ ซึ่งหมายความว่าภาพเคลื่อนไหวของการเปลี่ยนจะเล่นเมื่อผู้ใช้ปัดกลับ

เพื่อแสดงตัวอย่างวิธีการทำงานนี้ ลองนึกถึงสถานการณ์ที่กิจกรรม B อยู่ด้านบนกิจกรรม A ใน Back Stack คุณจะจัดการภาพเคลื่อนไหวของกิจกรรมที่กำหนดเองได้ดังนี้

• เรียกการเปลี่ยนฉากเปิดหรือปิดภายในonCreate เมธอดของกิจกรรม B
• เมื่อผู้ใช้ไปยังกิจกรรม ข ให้ใช้ OVERRIDE_TRANSITION_OPEN เมื่อผู้ใช้ปัดเพื่อกลับไปที่กิจกรรม ก. ให้ใช้ OVERRIDE_TRANSITION_CLOSE

• เมื่อระบุ OVERRIDE_TRANSITION_CLOSE enterAnim จะเป็นภาพเคลื่อนไหวตอนเข้าของกิจกรรม A และ exitAnim จะเป็นภาพเคลื่อนไหวตอนออกของกิจกรรม B

เพิ่มการรองรับการย้อนกลับที่คาดการณ์ได้ด้วย Fragment

เมื่อใช้การย้อนกลับที่คาดการณ์ได้กับ Fragment จะมี 2 แนวทาง

ใช้ API ที่มีอยู่

เราขอแนะนำให้คุณใช้ API ที่มีอยู่ API เหล่านี้ช่วยให้คุณปัดจาก ขอบของหน้าจอเพื่อจัดการ Animator หรือการเปลี่ยน Androidx ด้วย ท่าทางสัมผัสได้ การเลื่อนท่าทางสัมผัสผ่านเกณฑ์จะเป็นตัวกำหนดว่าท่าทางสัมผัสจะ เสร็จสมบูรณ์และคุณจะกลับไปยัง Fragment ก่อนหน้า หรือจะถูกยกเลิกและคุณจะ ยังคงอยู่ใน Fragment ปัจจุบัน ดูข้อมูลเพิ่มเติมได้ที่ ไปยังส่วนต่างๆ โดยใช้ภาพเคลื่อนไหว

โปรดคำนึงถึงปัจจัยต่อไปนี้

• นำเข้า Transitions 1.5.0 ขึ้นไปและ Fragments 1.7.0 ขึ้นไป การรองรับการย้อนกลับแบบคาดการณ์ส่วนใหญ่ภายใน Fragment จะขึ้นอยู่กับ การเปลี่ยนฉากที่สามารถค้นหาภาพเคลื่อนไหวได้ ซึ่งจะทำได้เฉพาะใน การเปลี่ยนฉากเวอร์ชัน 1.5.0 ขึ้นไปเท่านั้น
• ใช้ Fragment กับ FragmentManager หรือ คอมโพเนนต์การนำทางเพื่อจัดการสแต็กย้อนกลับ ระบบไม่รองรับการคาดการณ์การย้อนกลับหากคุณจัดการสแต็กย้อนกลับด้วยตนเอง ย้ายออกจากสแต็กย้อนกลับที่ FragmentManager ไม่รู้จัก
• ไลบรารีบางรายการรองรับการคาดการณ์การย้อนกลับ โปรดอ่านเอกสารประกอบเพื่อ ความแน่ใจ
• ระบบรองรับคลาส Animator และไลบรารี AndroidX Transition
• ระบบไม่รองรับคลาส Animation และไลบรารีเฟรมเวิร์ก Transition
• ภาพเคลื่อนไหวแบบคาดการณ์จะใช้ได้เฉพาะในอุปกรณ์ที่ใช้ Android 14 ขึ้นไปเท่านั้น

ใช้การย้อนกลับแบบคาดการณ์ในสถานการณ์ต่อไปนี้

• ทำให้คอมโพเนนต์การนำทางเคลื่อนไหว
• สร้างภาพเคลื่อนไหวด้วย setCustomAnimations
• สร้างภาพเคลื่อนไหวของการเปลี่ยนผ่านเข้าและออกด้วย setEnterTransition setExitTransition setReenterTransition และ setReturnTransition
• สร้างภาพเคลื่อนไหวให้องค์ประกอบแบบใช้ร่วมกันในการเปลี่ยนภาพด้วย setSharedElementEnterTransition และ setSharedElementReturnTransition

การเคลื่อนไหวของ Material บางอย่าง รองรับการย้อนกลับแบบคาดการณ์ตั้งแต่ 1.12.02-alpha02 ขึ้นไป ซึ่งรวมถึง MaterialFadeThrough, MaterialSharedAxis และ MaterialFade โปรดทราบว่า MaterialContainerTransform ไม่รองรับการคาดการณ์ ย้อนกลับ

ใช้การโทรกลับ

คุณสร้างการเปลี่ยนฉากข้าม Fragment ได้โดยใช้การเรียกกลับ แต่มีข้อจำกัดที่ทราบแล้วเมื่อใช้การเรียกกลับ ซึ่งผู้ใช้จะมองไม่เห็น Fragment ก่อนหน้าเมื่อปัดกลับ หากต้องการสร้างภาพเคลื่อนไหวขององค์ประกอบที่ใช้ร่วมกันระหว่าง Fragment ที่สอดคล้องกับคำแนะนำด้านการออกแบบสำหรับการย้อนกลับแบบคาดการณ์ ให้ทำดังนี้

สร้าง OnBackPressedCallback ภายใน handleOnBackProgressed ให้ปรับขนาดและ เลื่อนชิ้นส่วน จากนั้นก็ป๊อปจากสแต็กด้านหลัง จากนั้นเรียกใช้การเปลี่ยนองค์ประกอบที่แชร์ โดยใช้ setSharedElementReturnTransition นอกการเรียกกลับ

ดูข้อมูลเพิ่มเติมได้ที่ตัวอย่างโค้ดใน GitHub

ข้อกำหนด

ใช้ตารางต่อไปนี้เพื่อทำความเข้าใจสิ่งที่ควบคุมโดยtargetSdkVersion และ compileSdkVersion, เวอร์ชันอุปกรณ์, การอ้างอิง, แฟล็กไฟล์ Manifest และแฟล็ก Fragment ตารางนี้อ้างอิงถึงข้อกำหนดของโค้ด

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

• ตัวอย่างโค้ดการคาดคะเนการย้อนกลับ
• ข้อมูลพื้นฐานสำหรับวิดีโอการย้อนกลับของระบบ
• การสร้างสรรค์สิ่งใหม่ๆ สำหรับวิดีโอบน Android ในอนาคต