Navigasi

Navigasi adalah interaksi yang memungkinkan pengguna melakukan navigasi di, ke dalam, dan ke luar dari berbagai bagian konten dalam aplikasi Anda.

Komponen Navigation Android Jetpack mencakup library Navigation, plugin Safe Args Gradle, dan alat untuk membantu Anda menerapkan navigasi aplikasi. Komponen Navigation menangani beragam kasus penggunaan navigasi, dari klik tombol yang sederhana hingga pola yang lebih kompleks, seperti panel aplikasi dan panel navigasi.

Konsep utama

Tabel berikut memberikan ringkasan tentang konsep utama dalam navigasi dan jenis utama yang Anda gunakan untuk menerapkannya.

Konsep

Tujuan

Jenis

Host

Elemen UI yang berisi tujuan navigasi saat ini. Artinya, saat pengguna menavigasi aplikasi, aplikasi pada dasarnya menukar tujuan masuk dan keluar dari host navigasi.

Grafik

Struktur data yang mendefinisikan semua tujuan navigasi dalam aplikasi dan cara tujuan tersebut terhubung.

NavGraph

Pengontrol

Koordinator pusat untuk mengelola navigasi antar-tujuan. Pengontrol memberikan metode untuk bernavigasi antar-tujuan, menangani deep link, mengelola data sebelumnya, dan banyak lagi.

NavController

Halaman tujuan

Node dalam grafik navigasi. Saat pengguna membuka node ini, host akan menampilkan kontennya.

NavDestination

Biasanya dibuat saat membuat grafik navigasi.

Rute

Mengidentifikasi tujuan dan data apa pun yang diperlukan secara unik.

Anda dapat menavigasi menggunakan rute. Rute akan membawa Anda ke tujuan.

Jenis data apa pun yang dapat diserialisasi.

Manfaat dan fitur

Komponen Navigation memberikan sejumlah manfaat dan fitur lainnya, termasuk yang berikut:

  • Animasi dan transisi: Menyediakan resource standar untuk animasi dan transisi.
  • Deep linking: Menerapkan dan menangani deep link yang mengarahkan pengguna langsung ke tujuan.
  • Pola UI: Mendukung pola seperti panel navigasi dan navigasi bawah dengan tugas tambahan minimal.
  • Keamanan jenis: Mencakup dukungan untuk meneruskan data antar-tujuan dengan keamanan jenis.
  • Dukungan ViewModel: Memungkinkan pencakupan ViewModel ke grafik navigasi untuk membagikan data terkait UI antar-tujuan grafik.
  • Transaksi fragmen: Mendukung dan menangani transaksi fragmen sepenuhnya.
  • Kembali dan ke atas: Menangani tindakan kembali dan ke atas dengan benar secara default.

Menyiapkan lingkungan

Untuk menyertakan dukungan navigasi dalam project Anda, tambahkan dependensi berikut ke file build.gradle aplikasi Anda:

GroovyKotlin
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.8.9"

  // 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"
}
 
plugins {
  // Kotlin serialization plugin for type safe routes and navigation arguments
  kotlin("plugin.serialization") version "2.0.21"
}

dependencies {
  val nav_version = "2.8.9"

  // 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")
}

Untuk informasi tentang menambahkan komponen arsitektur lainnya ke project Anda, lihat Menambahkan komponen ke project Anda.

Langkah berikutnya

Untuk dokumentasi dan referensi lain terkait dengan komponen Navigation, lihat referensi berikut ini.

Panduan mendetail

Untuk informasi selengkapnya tentang cara menerapkan host navigasi dan NavController, serta detail cara berinteraksi dengan Compose dan framework UI lainnya, lihat panduan berikut:

Codelab

Video

Contoh

Jetsnack sample

Jetsnack is a sample snack ordering app built with Jetpack Compose. To try out this sample app, use the latest stable version of Android Studio. You can clone this repository or import the project from Android Studio following the steps here. This

Jetcaster sample 🎙️

Jetcaster is a sample podcast app, built with Jetpack Compose. The goal of the sample is to showcase building with Compose across multiple form factors (mobile, TV, and Wear) and full featured architecture. To try out this sample app, use the latest

Jetchat sample

Jetchat is a sample chat app built with Jetpack Compose. To try out this sample app, use the latest stable version of Android Studio. You can clone this repository or import the project from Android Studio following the steps here. This sample