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

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

วิดีโอ 1: ภาพเคลื่อนไหวย้อนกลับแบบคาดการณ์

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

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

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

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

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

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

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

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

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

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

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

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

หมายเหตุ: ดูวิธีออกแบบทรานซิชันและภาพเคลื่อนไหวในแอปที่กำหนดเอง

ใช้ Progress API กับ AndroidX Transitions

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

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

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

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

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

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

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

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

การใช้การกดย้อนกลับแบบคาดการณ์กับข้อมูลโค้ดมี 2 วิธี

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

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

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

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

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

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

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

ใช้การเรียกกลับ

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

สร้าง OnBackPressedCallback ปรับขนาดและย้ายตำแหน่งของข้อมูลภายใน handleOnBackProgressed จากนั้นให้ดึงออกจากกองด้านหลัง จากนั้นเรียกใช้การเปลี่ยนองค์ประกอบที่แชร์โดยใช้ setSharedElementReturnTransition นอกการเรียกกลับ

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

ข้อกำหนด

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

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

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

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

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