ย้าย Jetpack การนำทางไปยัง Navigation Compose

Navigation Compose API ช่วยให้คุณไปยังส่วนต่างๆ ระหว่าง Composable ใน แอป Compose ได้ขณะที่ใช้ประโยชน์จากคอมโพเนนต์ โครงสร้างพื้นฐาน และฟีเจอร์ของ Jetpack Navigation

หน้านี้จะอธิบายวิธีย้ายข้อมูลจาก Jetpack Navigation ที่อิงตาม Fragment ไปยัง Navigation Compose ซึ่งเป็นส่วนหนึ่งของการย้ายข้อมูล UI ที่อิงตาม View ไปยัง Jetpack Compose ที่มีขนาดใหญ่กว่า

ข้อกำหนดเบื้องต้นในการย้ายข้อมูล

คุณสามารถย้ายข้อมูลไปยัง Navigation Compose ได้เมื่อแทนที่ Fragment ทั้งหมดด้วย Composable ของหน้าจอที่เกี่ยวข้องได้ Composable ของหน้าจออาจมีเนื้อหา Compose และ View ผสมกัน แต่ปลายทางการนำทางทั้งหมดต้องเป็น Composable เพื่อเปิดใช้การย้ายข้อมูล Navigation Compose ในระหว่างนี้ คุณควรใช้คอมโพเนนต์การนำทางที่อิงตาม Fragment ต่อไปใน View และฐานของโค้ด Compose ที่ทำงานร่วมกันได้ ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบเกี่ยวกับการทำงานร่วมกันของการนำทาง

ขั้นตอนการย้ายโปรเจ็กต์

ไม่ว่าคุณจะใช้กลยุทธ์การย้ายข้อมูลที่แนะนำหรือใช้วิธีอื่น คุณก็จะมาถึงจุดที่ปลายทางการนำทางทั้งหมดเป็น Composable ของหน้าจอ โดยที่ Fragment ทำหน้าที่เป็นเพียงคอนเทนเนอร์ Composable ในขั้นตอนนี้ คุณสามารถย้ายข้อมูลไปยัง Navigation Compose ได้

หากแอปของคุณใช้รูปแบบการออกแบบ UDF และคำแนะนำเกี่ยวกับ สถาปัตยกรรมอยู่แล้ว การย้ายข้อมูลไปยัง Jetpack Compose และ Navigation Compose ไม่ควร ต้องมีการปรับโครงสร้างเลเยอร์อื่นๆ ของแอปครั้งใหญ่ นอกเหนือจากเลเยอร์ UI

หากต้องการย้ายข้อมูลไปยัง Navigation Compose ให้ทำตามขั้นตอนต่อไปนี้

1. เพิ่มทรัพยากร Dependency ของ Navigation Compose ลงในแอป

2. สร้าง App-level Composable แล้วเพิ่มลงใน Activity เป็น จุดแรกเข้าของ Compose โดยแทนที่การตั้งค่าเลย์เอาต์ View ดังนี้

   class SampleActivity : ComponentActivity() {
   
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           // setContentView<ActivitySampleBinding>(this, R.layout.activity_sample)
           setContent {
               SampleApp(/* ... */)
           }
       }
   }
   MigrationCommonScenariosSnippets.kt

3. สร้างประเภทสำหรับปลายทางการนำทางแต่ละรายการ ใช้ data object สำหรับ ปลายทางที่ไม่ต้องใช้ข้อมูล และ data class หรือ class สำหรับ ปลายทางที่ต้องใช้ข้อมูล

   @Serializable data object First
   @Serializable data class Second(val id: String)
   @Serializable data object Third
   MigrationCommonScenariosSnippets.kt

4. ตั้งค่า NavController ในที่ที่ Composable ทั้งหมดที่ต้องอ้างอิงถึงมีสิทธิ์เข้าถึง (โดยปกติจะอยู่ภายใน App Composable) แนวทางนี้เป็นไปตามหลักการของการย้ายสถานะ และช่วยให้คุณใช้ NavController เป็นแหล่งข้อมูลที่ถูกต้องเพียงแหล่งเดียวสำหรับการนำทาง ระหว่างหน้าจอ Composable และรักษา Back Stack ไว้

   @Composable
   fun SampleApp() {
       val navController = rememberNavController()
       // ...
   }
   MigrationCommonScenariosSnippets.kt

5. สร้าง NavHost ของแอปภายใน Composable App และส่ง navController:

   @Composable
   fun SampleApp() {
       val navController = rememberNavController()
   
       SampleNavHost(navController = navController)
   }
   
   @Composable
   fun SampleNavHost(
       navController: NavHostController
   ) {
       NavHost(navController = navController, startDestination = First) {
           // ...
       }
   }
   MigrationCommonScenariosSnippets.kt

6. เพิ่มcomposableปลายทางเพื่อสร้างกราฟการนำทาง หากก่อนหน้านี้ได้ย้ายข้อมูลแต่ละหน้าจอไปยัง Compose แล้ว ขั้นตอนนี้จะมีเพียงการ ดึงข้อมูล Composable ของหน้าจอเหล่านี้จาก Fragment ไปยัง composableปลายทาง

   class FirstFragment : Fragment() {
   
       override fun onCreateView(
           inflater: LayoutInflater,
           container: ViewGroup?,
           savedInstanceState: Bundle?
       ): View {
           return ComposeView(requireContext()).apply {
               setContent {
                   // FirstScreen(...) EXTRACT FROM HERE
               }
           }
       }
   }
   
   @Composable
   fun SampleNavHost(
       navController: NavHostController
   ) {
       NavHost(navController = navController, startDestination = First) {
           composable<First> {
               FirstScreen(/* ... */) // EXTRACT TO HERE
           }
           composable<Second> {
               SecondScreen(/* ... */)
           }
           // ...
       }
   }
   MigrationCommonScenariosSnippets.kt

7. หากคุณทำตามคำแนะนำเกี่ยวกับการออกแบบ UI ของ Compose โดยเฉพาะวิธีส่ง ViewModel และเหตุการณ์การนำทางไปยัง Composables ขั้นตอนถัดไปคือการเปลี่ยนวิธีระบุ ViewModel ให้กับ Composables ของแต่ละหน้าจอ คุณมักจะใช้การแทรก Hilt และจุดผสานรวมกับ Compose และ Navigation ผ่าน hiltViewModel ได้

   @Composable
   fun FirstScreen(
       // viewModel: FirstViewModel = viewModel(),
       viewModel: FirstViewModel = hiltViewModel(),
       onButtonClick: () -> Unit = {},
   ) {
       // ...
   }
   MigrationCommonScenariosSnippets.kt

8. แทนที่การเรียกใช้การนำทาง findNavController() ทั้งหมดด้วยการเรียกใช้ navController และส่งการเรียกใช้เหล่านี้เป็นเหตุการณ์การนำทางไปยังแต่ละหน้าจอ Composable แทนที่จะส่ง navController ทั้งหมด แนวทางนี้เป็นไปตามแนวทางปฏิบัติแนะนำในการแสดงเหตุการณ์จากฟังก์ชันที่ประกอบกันได้ต่อ Caller และ ทำให้ navController เป็นแหล่งข้อมูลที่เชื่อถือได้เพียงแหล่งเดียว

   คุณส่งข้อมูลไปยังปลายทางได้โดยการสร้างอินสแตนซ์ของคลาสเส้นทาง ที่กำหนดไว้สำหรับปลายทางนั้น จากนั้นคุณจะรับค่าได้โดยตรงจากรายการใน Back Stack ที่ปลายทาง หรือจาก ViewModel โดยใช้ SavedStateHandle.toRoute()

   @Composable
   fun SampleNavHost(
       navController: NavHostController
   ) {
       NavHost(navController = navController, startDestination = First) {
           composable<First> {
               FirstScreen(
                   onButtonClick = {
                       // findNavController().navigate(firstScreenToSecondScreenAction)
                       navController.navigate(Second(id = "ABC"))
                   }
               )
           }
           composable<Second> { backStackEntry ->
               val secondRoute = backStackEntry.toRoute<Second>()
               SecondScreen(
                   id = secondRoute.id,
                   onIconClick = {
                       // findNavController().navigate(secondScreenToThirdScreenAction)
                       navController.navigate(Third)
                   }
               )
           }
           // ...
       }
   }
   MigrationCommonScenariosSnippets.kt

9. นำ Fragment, เลย์เอาต์ XML ที่เกี่ยวข้อง, การนำทางที่ไม่จำเป็น และทรัพยากรอื่นๆ รวมถึง Fragment ที่ล้าสมัยและทรัพยากร Dependency ของ Jetpack Navigation ออกทั้งหมด

คุณดูขั้นตอนเดียวกันพร้อมรายละเอียดเพิ่มเติมที่เกี่ยวข้องกับ Navigation Compose ได้ในเอกสารประกอบการตั้งค่า

กรณีการใช้งานทั่วไป

ไม่ว่าคุณจะใช้คอมโพเนนต์การนำทางใด หลักการเดียวกันของการนำทางจะใช้ได้

กรณีการใช้งานทั่วไปเมื่อย้ายข้อมูลมีดังนี้

• ไปยัง Composable
• ไปยังส่วนต่างๆ ด้วยอาร์กิวเมนต์
• Deep Link
• การนำทางแบบซ้อน
• การผสานรวมกับแถบนำทางด้านล่าง
• การผสานรวมกับคอมโพเนนต์การนำทางที่กำหนดเอง

ดูข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับกรณีการใช้งานเหล่านี้ได้ที่การไปยังส่วนต่างๆ ด้วย Compose

ดึงข้อมูลที่ซับซ้อนเมื่อนำทาง

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

หาก Fragment ส่งออบเจ็กต์ที่ซับซ้อนเป็นอาร์กิวเมนต์ ให้ลองรีแฟกเตอร์โค้ดก่อนในลักษณะที่อนุญาตให้จัดเก็บและดึงข้อมูลออบเจ็กต์เหล่านี้จากชั้นข้อมูล ดูตัวอย่างได้ในที่เก็บ Now in Android

ข้อจำกัด

ส่วนนี้อธิบายข้อจำกัดปัจจุบันของ Navigation Compose

การย้ายข้อมูลไปยัง Navigation Compose แบบทีละขั้น

ปัจจุบันคุณยังใช้ Navigation Compose ไม่ได้ในขณะที่ยังใช้ Fragment เป็น ปลายทางในโค้ด หากต้องการเริ่มใช้ Navigation Compose ปลายทางทั้งหมดของคุณต้องเป็น Composable คุณติดตามคำขอฟีเจอร์นี้ได้ใน Issue Tracker

ภาพเคลื่อนไหวการเปลี่ยน

ตั้งแต่ Navigation 2.7.0-alpha01 เป็นต้นไป NavHost จะรองรับการตั้งค่าภาพเคลื่อนไหวที่กำหนดเองโดยตรง ซึ่งก่อนหน้านี้รองรับจาก AnimatedNavHost อ่านบันทึกประจำรุ่นเพื่อดูข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับการย้ายข้อมูลไปยัง Navigation Compose ได้ที่แหล่งข้อมูลต่อไปนี้

• Codelab การนำทางด้วย Compose: เรียนรู้พื้นฐานของการนำทางด้วย Compose ด้วย Codelab เชิงปฏิบัติ
• ที่เก็บ Now in Android: แอป Android ที่ทำงานได้อย่างเต็มรูปแบบ สร้างขึ้นด้วย Kotlin และ Jetpack Compose ทั้งหมด ซึ่งเป็นไปตามการออกแบบของ Android และแนวทางปฏิบัติแนะนำในการพัฒนา รวมถึงมี Navigation Compose
• การย้ายข้อมูล Sunflower ไปยัง Jetpack Compose: บล็อกโพสต์ที่ บันทึกเส้นทางการย้ายข้อมูลของแอปตัวอย่าง Sunflower จาก View ไปยัง Compose ซึ่งรวมถึงการย้ายข้อมูลไปยัง Navigation Compose ด้วย
• Jetnews สำหรับทุกหน้าจอ: บล็อกโพสต์ที่บันทึกการ รีแฟกเตอร์และการย้ายข้อมูลตัวอย่าง Jetnews เพื่อรองรับทุกหน้าจอด้วย Jetpack Compose และ Navigation Compose

แนะนำสำหรับคุณ

• หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
• การไปยังส่วนต่างๆ ด้วย Compose
• Compose และไลบรารีอื่นๆ
• ข้อควรพิจารณาอื่นๆ