การนำทาง

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

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

หัวข้อสำคัญ

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

แนวคิด

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

ประเภท

เป็นเจ้าภาพ

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

กราฟ

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

NavGraph

ตัวควบคุม

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

NavController

ปลายทาง

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

NavDestination

โดยทั่วไปสร้างขึ้นเมื่อสร้างกราฟการนําทาง

เส้นทาง

ระบุปลายทางและข้อมูลที่จำเป็นสำหรับปลายทางนั้นโดยไม่ซ้ำกัน

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

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

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

คอมโพเนนต์การนําทางมีประโยชน์และฟีเจอร์อื่นๆ อีกมากมาย ดังนี้

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

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

หากต้องการรวมการรองรับการนําทางไว้ในโปรเจ็กต์ ให้เพิ่มการพึ่งพาต่อไปนี้ลงในไฟล์ 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.5"

  // 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.5"

  // 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 รวมถึงรายละเอียดเกี่ยวกับวิธีโต้ตอบกับ Compose และเฟรมเวิร์ก UI อื่นๆ ได้ที่คู่มือต่อไปนี้

Codelab

วิดีโอ

ตัวอย่าง