การย้อนกลับที่คาดการณ์ได้และการเคลื่อนไหวของระบบจะเปิดใช้อยู่โดยค่าเริ่มต้น หากแอปของคุณขัดจังหวะเหตุการณ์ย้อนกลับและคุณยังไม่ได้ย้ายข้อมูลไปยังการย้อนกลับที่คาดการณ์ได้ ให้อัปเดตแอปเพื่อใช้ API การนำทางย้อนกลับที่รองรับ
เปิดใช้ภาพเคลื่อนไหวเริ่มต้นของระบบ
ภาพเคลื่อนไหวของระบบแบบกลับไปที่หน้าแรก ข้ามกิจกรรม และข้ามงานพร้อมใช้งานในอุปกรณ์ Android 15 ขึ้นไปสำหรับแอปที่ย้ายข้อมูลไปยัง API การจัดการการย้อนกลับที่รองรับ
- กลับไปที่หน้าจอหลัก: นำผู้ใช้กลับไปที่หน้าจอหลัก
- ข้ามกิจกรรม: การเปลี่ยนระหว่างกิจกรรมภายในแอป
- ข้ามงาน: การเปลี่ยนระหว่างงาน
ภาพเคลื่อนไหวเหล่านี้จะเปิดใช้โดยค่าเริ่มต้นใน Android 15 ขึ้นไป ในอุปกรณ์ที่ใช้ Android 13 หรือ 14 ผู้ใช้สามารถเปิดใช้ฟีเจอร์เหล่านี้ได้ผ่านตัวเลือกสำหรับนักพัฒนาแอป
หากต้องการใช้ภาพเคลื่อนไหวของระบบ ให้อัปเดตทรัพยากร Dependency ของ AndroidX Activity เป็น 1.6.0 ขึ้นไป
เปิดใช้การย้อนกลับที่คาดการณ์ได้ด้วย Navigation Compose
หากต้องการใช้การย้อนกลับที่คาดการณ์ได้ใน Navigation Compose ให้ตรวจสอบว่าคุณใช้ไลบรารี navigation-compose 2.8.0 ขึ้นไป
Navigation Compose จะทำครอสเฟดระหว่างหน้าจอโดยอัตโนมัติเมื่อผู้ใช้ปัดเพื่อย้อนกลับ
เมื่อไปยังส่วนต่างๆ คุณสามารถสร้างการเปลี่ยนที่กำหนดเองด้วย popEnterTransition และ popExitTransition เมื่อใช้กับNavHost ตัวแก้ไขเหล่านี้จะช่วยให้คุณกำหนดวิธีที่หน้าจอเข้าและออกจะเคลื่อนไหวได้ คุณสามารถใช้คีย์เฟรมเพื่อสร้างเอฟเฟกต์ต่างๆ เช่น การปรับขนาด การจาง หรือการเลื่อน
ในตัวอย่างนี้ ระบบจะใช้ scaleOut ภายใน popExitTransition เพื่อลดขนาดหน้าจอที่ออกเมื่อผู้ใช้ไปยังหน้าจอก่อนหน้า นอกจากนี้ พารามิเตอร์ transformOrigin จะกำหนดจุดที่เกิดภาพเคลื่อนไหวของการปรับขนาด โดยค่าเริ่มต้นจะเป็นกึ่งกลางของหน้าจอ (0.5f, 0.5f)
คุณสามารถปรับค่านี้เพื่อให้การปรับขนาดเริ่มต้นจากจุดอื่นได้
NavHost( navController = navController, startDestination = Home, popExitTransition = { scaleOut( targetScale = 0.9f, transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f) ) }, popEnterTransition = { EnterTransition.None }, modifier = modifier, )
โค้ดนี้จะให้ผลลัพธ์ต่อไปนี้
popEnterTransition และ popExitTransition จะควบคุมภาพเคลื่อนไหวโดยเฉพาะเมื่อแสดง Back Stack เช่น ด้วยท่าทางสัมผัสการย้อนกลับ นอกจากนี้ คุณยังใช้ enterTransition และ exitTransition เพื่อกำหนดภาพเคลื่อนไหวสำหรับการเข้าและออกจาก Composable โดยทั่วไปได้ด้วย ไม่ใช่เฉพาะสำหรับการย้อนกลับที่คาดการณ์ได้เท่านั้น หากคุณตั้งค่าเฉพาะ enterTransition และ exitTransition ระบบจะใช้ทั้ง 2 รายการนี้สำหรับการนำทางปกติและการแสดง Back Stack อย่างไรก็ตาม การใช้ popEnterTransition และ popExitTransition จะช่วยให้คุณสร้างภาพเคลื่อนไหวที่แตกต่างกันสำหรับการนำทางย้อนกลับได้
ผสานรวมกับการเปลี่ยนภาพองค์ประกอบที่ใช้ร่วมกัน
การเปลี่ยนองค์ประกอบที่ใช้ร่วมกันช่วยให้การเชื่อมต่อภาพระหว่าง Composable ที่มีเนื้อหาที่ใช้ร่วมกันเป็นไปอย่างราบรื่น ซึ่งมักใช้สำหรับการนำทาง
หากต้องการใช้องค์ประกอบที่ใช้ร่วมกันกับ Navigation Compose โปรดดูการย้อนกลับที่คาดการณ์ได้ด้วยองค์ประกอบที่ใช้ร่วมกัน
รองรับการย้อนกลับที่คาดการณ์ได้ด้วยคอมโพเนนต์ Material Compose
คอมโพเนนต์หลายรายการในไลบรารี Material Compose ออกแบบมาให้ทำงานร่วมกับท่าทางสัมผัสการย้อนกลับที่คาดการณ์ได้อย่างราบรื่น หากต้องการเปิดใช้ภาพเคลื่อนไหวการย้อนกลับที่คาดการณ์ได้ในคอมโพเนนต์เหล่านี้ ให้รวมทรัพยากร Dependency ของ Material3 เวอร์ชันล่าสุด (androidx.compose.material3:material3-*:1.3.0 ขึ้นไป) ไว้ในโปรเจ็กต์
คอมโพเนนต์ Material ที่รองรับภาพเคลื่อนไหวของการย้อนกลับที่คาดการณ์ได้มีดังนี้
SearchBarModalBottomSheetModalDrawerSheet/DismissibleDrawerSheetModalNavigationDrawer/DismissibleNavigationDrawer
SearchBar และ ModalBottomSheet จะเคลื่อนไหวโดยอัตโนมัติด้วยท่าทางสัมผัสการย้อนกลับที่คาดการณ์ได้ ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet และ DismissibleNavigationDrawer กำหนดให้คุณต้องส่ง drawerState ไปยัง Composable ของเนื้อหาชีตที่เกี่ยวข้อง
ทดสอบภาพเคลื่อนไหวของท่าทางสัมผัสการย้อนกลับที่คาดการณ์ได้
หากยังใช้ Android 13 หรือ Android 14 คุณสามารถทดสอบภาพเคลื่อนไหวการกลับไปที่หน้าแรกได้
หากต้องการทดสอบภาพเคลื่อนไหวนี้ ให้ทำตามขั้นตอนต่อไปนี้
- ในอุปกรณ์ ให้ไปที่การตั้งค่า > ระบบ > ตัวเลือกสำหรับนักพัฒนาแอป
- เลือกภาพเคลื่อนไหวของการย้อนกลับที่คาดการณ์ได้
- เปิดแอปที่อัปเดตแล้ว และใช้ท่าทางสัมผัสการย้อนกลับเพื่อดูการทำงาน
ใน Android 15 ขึ้นไป ฟีเจอร์นี้จะเปิดใช้อยู่โดยค่าเริ่มต้น
แหล่งข้อมูลเพิ่มเติม
- Codelab สำหรับการเพิ่มภาพเคลื่อนไหวของการย้อนกลับที่คาดการณ์ได้
- วิดีโอเกี่ยวกับภาพเคลื่อนไหวที่ใช้เลย์เอาต์ขั้นสูงใน Compose