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

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

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

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

• Bottom Sheet
• แผงด้านข้าง
• ค้นหา

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เรามี 2 วิธีในการสร้างการย้อนกลับที่คาดการณ์ด้วย Fragment

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

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

และคำนึงถึงปัจจัยต่อไปนี้

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

ใช้เครื่องหมายไขว้ย้อนกลับแบบคาดการณ์ในสถานการณ์ต่อไปนี้

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

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

ใช้ Callback

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

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

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

ข้อกำหนด

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

ตารางต่อไปนี้หมายถึงข้อกำหนดที่อนุญาตให้ผู้ใช้ดูภาพเคลื่อนไหวได้

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

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