การย้อนกลับที่คาดการณ์ได้ในเครื่องมือเขียน

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

รูปที่ 1 ภาพเคลื่อนไหวของปุ่มกลับไปยังหน้าแรกในแอปตัวอย่าง SociaLite

คู่มือนี้จะอธิบายวิธีดำเนินการต่อไปนี้ด้วยการกดย้อนกลับแบบคาดคะเน

  • เลือกใช้ท่าทางสัมผัสการย้อนกลับที่คาดการณ์ได้
  • เปิดใช้ภาพเคลื่อนไหวเริ่มต้นของระบบ
  • เปิดใช้การย้อนกลับแบบคาดเดาด้วย Navigation Compose
  • ผสานรวมกับองค์ประกอบแบบใช้ร่วมกันในการเปลี่ยนภาพ
  • รองรับการกดกลับแบบคาดการณ์ด้วยคอมโพเนนต์ Material Compose
  • เข้าถึงความคืบหน้าด้วยตนเองด้วย PredictiveBackHandler
  • ทดสอบภาพเคลื่อนไหวของท่าทางสัมผัสการย้อนกลับแบบคาดเดา

เลือกใช้ท่าทางสัมผัสการย้อนกลับที่คาดการณ์ได้

หากต้องการเปิดใช้การเคลื่อนไหวย้อนกลับแบบคาดเดา คุณต้องเลือกใช้เพื่อรองรับท่าทางสัมผัสย้อนกลับแบบคาดเดา หากต้องการเลือกใช้ ให้เพิ่ม android:enableOnBackInvokedCallback="true" ลงในแท็ก <application> หรือแท็ก <activity> แต่ละรายการในไฟล์ AndroidManifest.xml

เปิดใช้ภาพเคลื่อนไหวเริ่มต้นของระบบ

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

  • กลับไปที่หน้าจอหลัก: นำผู้ใช้กลับไปยังหน้าจอหลัก
  • ข้ามกิจกรรม: การเปลี่ยนระหว่างกิจกรรมภายในแอป
  • ข้ามงาน: การเปลี่ยนผ่านระหว่างงาน

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

หากต้องการใช้ภาพเคลื่อนไหวของระบบ ให้อัปเดตActivity Dependency ของ AndroidX เป็น 1.6.0 ขึ้นไป

เปิดใช้การย้อนกลับแบบคาดเดาด้วย Navigation Compose

หากต้องการใช้การคาดคะเนการย้อนกลับใน Navigation Compose โปรดตรวจสอบว่าคุณใช้ไลบรารี navigation-compose 2.8.0 ขึ้นไป

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

รูปที่ 2 ภาพเคลื่อนไหวแบบตัดต่อในแอปเริ่มต้นใน SociaLite

เมื่อไปยังส่วนต่างๆ คุณสามารถสร้างทรานซิชันที่กำหนดเองได้โดยใช้ 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,
)
PredictiveBackSnippets.kt

โค้ดนี้จะแสดงผลลัพธ์ต่อไปนี้

รูปที่ 3 ภาพเคลื่อนไหวในแอปที่กําหนดเองใน SociaLite

popEnterTransition และ popExitTransition จะควบคุมภาพเคลื่อนไหวโดยเฉพาะเมื่อแสดงกองซ้อนที่ย้อนกลับ เช่น เมื่อใช้ท่าทางสัมผัสการย้อนกลับ นอกจากนี้ คุณยังใช้ enterTransition และ exitTransition เพื่อกำหนดภาพเคลื่อนไหวสำหรับการเข้าและออกจากคอมโพสิเบิลโดยทั่วไปได้ ไม่ใช่แค่สำหรับการกลับไปยังหน้าก่อนหน้าแบบคาดคะเน หากคุณตั้งค่าเพียง enterTransition และ exitTransition ระบบจะใช้ทั้ง 2 รายการนี้สําหรับทั้งการนําทางปกติและการป๊อปสแต็กย้อนกลับ แต่การใช้ popEnterTransition และ popExitTransition จะช่วยให้คุณสร้างภาพเคลื่อนไหวที่แตกต่างกันสำหรับการไปยังส่วนหลังได้

ผสานรวมกับองค์ประกอบแบบใช้ร่วมกันในการเปลี่ยนภาพ

การเปลี่ยนองค์ประกอบที่แชร์จะสร้างการเชื่อมต่อภาพอย่างราบรื่นระหว่างคอมโพสิเบิลที่มีเนื้อหาที่แชร์ ซึ่งมักใช้เพื่อการนําทาง

รูปที่ 4 การเปลี่ยนองค์ประกอบที่ใช้ร่วมกันด้วยการย้อนกลับแบบคาดการณ์ใน Navigation Compose

หากต้องการใช้องค์ประกอบที่แชร์กับ Navigation Compose โปรดดูหัวข้อการย้อนกลับแบบคาดคะเนด้วยองค์ประกอบที่แชร์

รองรับการกดย้อนกลับแบบคาดการณ์ด้วยคอมโพเนนต์ Material Compose

คอมโพเนนต์หลายรายการในไลบรารี Material Compose ออกแบบมาเพื่อให้ทำงานร่วมกับท่าทางสัมผัสเพื่อย้อนกลับแบบคาดการณ์ได้อย่างราบรื่น หากต้องการเปิดใช้ภาพเคลื่อนไหวย้อนกลับแบบคาดการณ์ในคอมโพเนนต์เหล่านี้ ให้รวมข้อกําหนดของ Material3 เวอร์ชันล่าสุด (androidx.compose.material3:material3-*:1.3.0 ขึ้นไป) ไว้ในโปรเจ็กต์

คอมโพเนนต์ Material ที่รองรับการเคลื่อนไหวย้อนกลับแบบคาดเดา ได้แก่

SearchBar และ ModalBottomSheet จะเคลื่อนไหวโดยอัตโนมัติด้วยท่าทางสัมผัสการย้อนกลับที่คาดการณ์ได้ ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet และ DismissibleNavigationDrawer กำหนดให้คุณส่ง drawerState ไปยังคอมโพสิชันเนื้อหาชีตที่เกี่ยวข้อง

เข้าถึงความคืบหน้าด้วยตนเองด้วย PredictiveBackHandler

คอมโพสิชัน PredictiveBackHandler[5] ใน Jetpack Compose ช่วยให้คุณรับมือกับท่าทางสัมผัส "กลับ" และเข้าถึงความคืบหน้าของท่าทางสัมผัสดังกล่าวได้ คุณสามารถตอบสนองต่อท่าทางสัมผัสของผู้ใช้เพื่อกลับไปยังหน้าแรกแบบเรียลไทม์ โดยสร้างภาพเคลื่อนไหวหรือลักษณะการทำงานที่กําหนดเองตามระยะการปัดของผู้ใช้

หากต้องการใช้ PredictiveBackHandler โปรดตรวจสอบว่าคุณใช้ androidx.activity:activity:1.6.0 ขึ้นไป

PredictiveBackHandler มี Flow<BackEventCompat> ที่ส่งเหตุการณ์ซึ่งแสดงถึงความคืบหน้าของท่าทางสัมผัสเพื่อย้อนกลับ แต่ละเหตุการณ์จะมีข้อมูลต่อไปนี้

  • progress: ค่าแบบลอยระหว่าง 0 ถึง 1 ที่ระบุความคืบหน้าของท่าทางสัมผัสย้อนกลับ (0 = เริ่มท่าทางสัมผัส 1 = ท่าทางสัมผัสเสร็จสมบูรณ์)
  • touchX และ touchY: พิกัด X และ Y ของเหตุการณ์การสัมผัส

ข้อมูลโค้ดต่อไปนี้แสดงการใช้งานพื้นฐานของ PredictiveBackHandler

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}
PredictiveBackSnippets.kt

ตัวอย่าง: ผสานรวมกับลิ้นชักการนำทาง

ตัวอย่างนี้แสดงวิธีใช้ภาพเคลื่อนไหวในแอปที่กําหนดเองโดยใช้ PredictiveBackHandler เพื่อสร้างการโต้ตอบที่ราบรื่นกับลิ้นชักการนําทางเพื่อตอบสนองต่อท่าทางสัมผัส "กลับ" ใน JetLagged

รูปที่ 5 ลิ้นชักการนำทางที่รองรับการย้อนกลับที่คาดการณ์

ในตัวอย่างนี้ PredictiveBackHandler ใช้เพื่อดำเนินการต่อไปนี้

  • ติดตามความคืบหน้าของท่าทางสัมผัสการย้อนกลับ
  • อัปเดต translationX ของลิ้นชักตามความคืบหน้าของท่าทางสัมผัส
  • ใช้ velocityTracker เพื่อเปิดหรือปิดลิ้นชักอย่างราบรื่นตามความเร็วของท่าทางสัมผัสเมื่อท่าทางสัมผัสเสร็จสมบูรณ์หรือถูกยกเลิก

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

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

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

  1. ในอุปกรณ์ ให้ไปที่การตั้งค่า > ระบบ > ตัวเลือกสำหรับนักพัฒนาแอป
  2. เลือกการเคลื่อนไหวย้อนกลับแบบคาดเดา
  3. เปิดแอปที่อัปเดตแล้ว และใช้ท่าทางสัมผัสเพื่อดูการทํางาน

ใน Android 15 ขึ้นไป ฟีเจอร์นี้จะเปิดใช้โดยค่าเริ่มต้น

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