คุณสามารถสร้างภาพเคลื่อนไหวและการเปลี่ยนผ่านของพร็อพเพอร์ตี้ในแอปที่กำหนดเอง ภาพเคลื่อนไหวข้ามกิจกรรมที่กำหนดเอง และภาพเคลื่อนไหวข้าม Fragment ที่กำหนดเองด้วยท่าทางสัมผัสการย้อนกลับแบบคาดการณ์โดยใช้ Views หรือ Compose หากต้องการลองใช้ Compose โปรดดูเพิ่มการรองรับภาพเคลื่อนไหวของการย้อนกลับที่คาดการณ์ได้
เพิ่มทรานซิชันที่กำหนดเองโดยใช้ 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 ขึ้นไป
ใช้ Progress API กับการเปลี่ยนฉากของ AndroidX
คุณใช้ Progress API กับ AndroidX Transitions 1.5.0-alpha01 ขึ้นไป ใน Android 14 ขึ้นไปเพื่อสร้างการเปลี่ยนฉากการคาดการณ์การย้อนกลับได้
- ใช้
TransitionManager#controlDelayedTransitionแทนbeginDelayedTransitionเพื่อเล่นทรานซิชันเมื่อ ผู้ใช้ปัดกลับ - สร้างการเปลี่ยนผ่านภายใน
handleOnBackStarted - เล่นทรานซิชันด้วยเหตุการณ์ย้อนกลับภายใน
handleOnBackProgressedโดย เชื่อมโยงcurrentFractionกับBackEvent.progressซึ่งจะแสดงให้เห็นว่าผู้ใช้ปัดกลับไปไกลแค่ไหน - สิ้นสุดการเปลี่ยนผ่านหลังจากที่ผู้ใช้ใช้ท่าทางสัมผัสย้อนกลับใน
handleOnBackPressed - สุดท้าย ให้รีเซ็ตสถานะของการเปลี่ยนผ่านภายใน
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 ในอนาคต