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

เมื่อใช้ 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

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

เพิ่มการรองรับการย้อนกลับที่คาดการณ์ได้ด้วย 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 ตารางแรกจะหมายถึงข้อกำหนดของโค้ด

หมวดหมู่	แอนิเมชัน	compileSdk	targetSdk	android:enableOnBackInvokedCallback	การขึ้นต่อกัน
ภาพเคลื่อนไหวของระบบ	กลับไปหน้าแรก	33	ช่วง	จริง	ไม่มี
	ข้ามกิจกรรม	34	ช่วง	จริง	ไม่มี
	ข้ามงาน	34	ช่วง	จริง	ไม่มี
แพลตฟอร์ม	ข้ามกิจกรรมที่กำหนดเอง	34	ช่วง	จริง	ไม่มี
	แพลตฟอร์ม Progress API	34	ช่วง	จริง	ไม่มี
คอมโพเนนต์เนื้อหา	Bottom Sheet	34	ช่วง	จริง	คอมโพเนนต์ Material 1.10.0
	ชีตด้านข้าง	34	ช่วง	จริง	คอมโพเนนต์ Material 1.10.0
	ลิ้นชักการนำทาง	34	ช่วง	จริง	คอมโพเนนต์ Material 1.10.0
	ค้นหา	34	ช่วง	จริง	คอมโพเนนต์ Material 1.10.0
ภาพเคลื่อนไหวของ Jetpack	ข้ามส่วนย่อยของ AndroidX ที่กำหนดเอง	34	ช่วง	จริง	AndroidX Fragment 1.7
	การเปลี่ยน AndroidX ที่กำหนดเอง	34	ช่วง	จริง	การเปลี่ยน AndroidX 1.5
	Progress API Jetpack	34	ช่วง	จริง	กิจกรรม AndroidX 1.8

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

หมวดหมู่	แอนิเมชัน	เปิดใช้ตัวเลือกสำหรับนักพัฒนาแอปแล้ว	เวอร์ชันของอุปกรณ์
ภาพเคลื่อนไหวของระบบ	กลับไปหน้าแรก	จริง	33
	ข้ามกิจกรรม	จริง	34
	ข้ามงาน	จริง	34
แพลตฟอร์ม	ข้ามกิจกรรมที่กำหนดเอง	จริง	34
	แพลตฟอร์ม Progress API	เท็จ	34
คอมโพเนนต์เนื้อหา	Bottom Sheet	เท็จ	34
	ชีตด้านข้าง	เท็จ	34
	ลิ้นชักการนำทาง	เท็จ	34
	ค้นหา	เท็จ	34
ภาพเคลื่อนไหวของ Jetpack	ข้ามส่วนย่อยของ AndroidX ที่กำหนดเอง	เท็จ	34
	การเปลี่ยน AndroidX ที่กำหนดเอง	เท็จ	34
	Progress API Jetpack	เท็จ	34

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

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