การนำทาง

การนำทางหมายถึงการโต้ตอบที่ช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ของเนื้อหาภายในแอปได้

คอมโพเนนต์การนำทางของ Android Jetpack ประกอบด้วยไลบรารีการนำทาง ปลั๊กอิน Safe Args Gradle และเครื่องมือที่จะช่วยคุณใช้การนำทางในแอป คอมโพเนนต์การนำทางรองรับกรณีการใช้งานการนำทางที่หลากหลาย ตั้งแต่การคลิกปุ่มง่ายๆ ไปจนถึงรูปแบบที่ซับซ้อนมากขึ้น เช่น แถบแอปและลิ้นชักการนำทาง

หัวข้อสำคัญ

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

แนวคิด

วัตถุประสงค์

ประเภท

โฮสต์

องค์ประกอบ UI ที่มีปลายทางการนำทางปัจจุบัน กล่าวคือ เมื่อผู้ใช้ไปยังส่วนต่างๆ ของแอป แอปจะสลับปลายทางเข้าและออกจากโฮสต์การนำทาง

กราฟ

โครงสร้างข้อมูลที่กำหนดปลายทางการนำทางทั้งหมดภายในแอปและวิธีเชื่อมต่อปลายทางเหล่านั้นเข้าด้วยกัน

NavGraph

ตัวควบคุม

ผู้ประสานงานส่วนกลางสำหรับการจัดการการนำทางระหว่างปลายทาง ตัวควบคุมมีเมธอดสำหรับการนำทางระหว่างปลายทาง การจัดการ Deep Link การจัดการ Back Stack และอื่นๆ

NavController

ปลายทาง

โหนดในกราฟการนำทาง เมื่อผู้ใช้นำทางไปยังโหนดนี้ โฮสต์จะแสดงเนื้อหาของโหนด

NavDestination

โดยปกติจะสร้างขึ้นเมื่อสร้างกราฟการนำทาง

เส้นทาง

ระบุปลายทางและข้อมูลที่ปลายทางนั้นต้องการแบบไม่ซ้ำ

คุณสามารถนำทางโดยใช้เส้นทาง เส้นทางจะนำคุณไปยังปลายทาง

ประเภทข้อมูลที่ทำให้เป็นอนุกรมได้

สิทธิประโยชน์และฟีเจอร์

คอมโพเนนต์การนำทางมีสิทธิประโยชน์และฟีเจอร์อื่นๆ อีกมากมาย ซึ่งรวมถึงสิ่งต่อไปนี้

  • ภาพเคลื่อนไหวและการเปลี่ยนภาพ: มีทรัพยากรมาตรฐานสำหรับภาพเคลื่อนไหวและการเปลี่ยนภาพ
  • Deep Link: ใช้และจัดการ Deep Link ที่นำผู้ใช้ไปยังปลายทางโดยตรง
  • รูปแบบ UI: รองรับรูปแบบต่างๆ เช่น ลิ้นชักการนำทางและการนำทางด้านล่าง โดยใช้ความพยายามเพิ่มเติมเพียงเล็กน้อย
  • ความปลอดภัยในการกำหนดประเภท: มีการรองรับการส่งข้อมูลระหว่างปลายทางด้วย ความปลอดภัยในการกำหนดประเภท
  • การรองรับ ViewModel: ช่วยให้สามารถกำหนดขอบเขต ViewModel ให้กับกราฟการนำทางเพื่อแชร์ข้อมูลที่เกี่ยวข้องกับ UI ระหว่างปลายทางของกราฟ
  • ธุรกรรม Fragment: รองรับและจัดการธุรกรรม Fragment อย่างเต็มรูปแบบ
  • ย้อนกลับและขึ้น: จัดการการดำเนินการย้อนกลับและขึ้นอย่างถูกต้องโดยค่าเริ่มต้น

ตัวเลือกเฟรมเวิร์ก

คอมโพเนนต์การนำทางรองรับเฟรมเวิร์กหลัก 2 รายการสำหรับการใช้กราฟการนำทาง ทั้งนี้ขึ้นอยู่กับสถาปัตยกรรม UI ของแอป

  • Compose: หากแอปสร้างขึ้นด้วย Jetpack Compose ทั้งหมด ให้ใช้ Navigation Compose ปลายทางในกราฟจะเป็น Composables
  • Fragments: หากแอปใช้ View หรือใช้ทั้ง View และ Compose ให้ใช้ คอมโพเนนต์การนำทางแบบ Fragment ปลายทางในกราฟจะเป็น Fragment ที่โฮสต์ View มาตรฐาน เนื้อหา Compose หรือทั้ง 2 อย่างรวมกันได้

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

ตั้งค่าสภาพแวดล้อม

หากต้องการรวมการรองรับการนำทางไว้ในโปรเจ็กต์ ให้เพิ่มทรัพยากร Dependency ต่อไปนี้ลงในไฟล์ build.gradle ของแอป

Groovy

plugins {
  // Kotlin serialization plugin for type safe routes and navigation arguments
  id 'org.jetbrains.kotlin.plugin.serialization' version '2.0.21'
}
  
dependencies {
  def nav_version = "2.9.8"

  // Jetpack Compose Integration
  implementation "androidx.navigation:navigation-compose:$nav_version"

  // Views/Fragments Integration
  implementation "androidx.navigation:navigation-fragment:$nav_version"
  implementation "androidx.navigation:navigation-ui:$nav_version"

  // Feature module support for Fragments
  implementation "androidx.navigation:navigation-dynamic-features-fragment:$nav_version"

  // Testing Navigation
  androidTestImplementation "androidx.navigation:navigation-testing:$nav_version"

  // JSON serialization library, works with the Kotlin serialization plugin.
  implementation "org.jetbrains.kotlinx:kotlinx-serialization-json:1.7.3"
}

Kotlin

plugins {
  // Kotlin serialization plugin for type safe routes and navigation arguments
  kotlin("plugin.serialization") version "2.0.21"
}

dependencies {
  val nav_version = "2.9.8"

  // Jetpack Compose integration
  implementation("androidx.navigation:navigation-compose:$nav_version")

  // Views/Fragments integration
  implementation("androidx.navigation:navigation-fragment:$nav_version")
  implementation("androidx.navigation:navigation-ui:$nav_version")

  // Feature module support for Fragments
  implementation("androidx.navigation:navigation-dynamic-features-fragment:$nav_version")

  // Testing Navigation
  androidTestImplementation("androidx.navigation:navigation-testing:$nav_version")

  // JSON serialization library, works with the Kotlin serialization plugin
  implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.7.3")
}

ดูข้อมูลเกี่ยวกับการเพิ่มคอมโพเนนต์สถาปัตยกรรมอื่นๆ ลงในโปรเจ็กต์ได้ที่ เพิ่มคอมโพเนนต์ลงในโปรเจ็กต์

ขั้นตอนถัดไป

ดูเอกสารประกอบและแหล่งข้อมูลเพิ่มเติมที่เกี่ยวข้องกับคอมโพเนนต์การนำทางได้ที่แหล่งข้อมูลต่อไปนี้

คู่มือโดยละเอียด

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้โฮสต์การนำทางและ NavController รวมถึงรายละเอียดเกี่ยวกับวิธีที่โฮสต์การนำทางและ NavController โต้ตอบกับ Compose และเฟรมเวิร์ก UI อื่นๆ ได้ที่คู่มือต่อไปนี้

Codelab

วิดีโอ

ตัวอย่าง