Komponen Navigation menggunakan grafik navigasi untuk mengelola navigasi aplikasi. Grafik navigasi adalah struktur data yang berisi setiap tujuan dalam aplikasi Anda dan hubungan antar-tujuan tersebut.
Jenis tujuan
Ada tiga jenis tujuan umum: dihosting, dialog, dan aktivitas. Tabel berikut menguraikan ketiga jenis tujuan ini dan tujuannya.
Jenis |
Deskripsi |
Kasus penggunaan |
---|---|---|
Dihosting |
Mengisi seluruh host navigasi. Artinya, ukuran tujuan yang dihosting sama dengan ukuran host navigasi dan tujuan sebelumnya tidak terlihat. |
Layar utama dan detail. |
Dialog |
Menampilkan komponen UI overlay. UI ini tidak terikat dengan lokasi host navigasi atau ukurannya. Tujuan sebelumnya terlihat di bawah tujuan. |
Pemberitahuan, pilihan, formulir. |
Aktivitas |
Menampilkan layar atau fitur unik dalam aplikasi. |
Berfungsi sebagai titik keluar ke grafik navigasi yang memulai aktivitas Android baru yang dikelola secara terpisah dari komponen Navigation. Dalam Modern Android Development, aplikasi terdiri dari satu aktivitas. Oleh karena itu, tujuan aktivitas paling tepat digunakan saat berinteraksi dengan aktivitas pihak ketiga atau sebagai bagian dari proses migrasi. |
Dokumen ini berisi contoh tujuan yang dihosting, yang merupakan tujuan paling umum dan mendasar. Lihat panduan berikut untuk mendapatkan informasi tentang tujuan lainnya:
Framework
Meskipun alur kerja umum yang sama berlaku dalam setiap kasus, cara pembuatan grafik dan host navigasi bergantung pada framework UI yang Anda gunakan.
- Compose: Gunakan composable
NavHost
. TambahkanNavGraph
ke dalamnya menggunakan DSL Kotlin. Anda dapat membuat grafik dengan dua cara:- Sebagai bagian dari NavHost: Buat grafik navigasi secara langsung sebagai
bagian dari penambahan
NavHost
. - Secara terprogram: Gunakan metode
NavController.createGraph()
untuk membuatNavGraph
dan teruskan keNavHost
secara langsung.
- Sebagai bagian dari NavHost: Buat grafik navigasi secara langsung sebagai
bagian dari penambahan
- Fragmen: Saat menggunakan fragmen dengan framework UI tampilan, gunakan
NavHostFragment
sebagai host. Ada beberapa cara untuk membuat navigasi {i>graphic<i}:- Secara terprogram: Gunakan DSL Kotlin untuk membuat
NavGraph
dan menerapkannya langsung diNavHostFragment
.- Fungsi
createGraph()
yang digunakan dengan DSL Kotlin untuk keduanya fragmen dan Compose sama.
- Fungsi
- XML: Tulis grafik dan host navigasi secara langsung dalam XML.
- Editor Android Studio: Gunakan editor GUI di Android Studio untuk membuat dan menyesuaikan grafik sebagai file resource XML.
- Secara terprogram: Gunakan DSL Kotlin untuk membuat
Compose
Di Compose, gunakan objek atau class yang dapat diserialisasi untuk menentukan rute. Rute
menjelaskan cara menuju ke tujuan, dan berisi semua informasi yang
tujuan iklan. Setelah menentukan rute, gunakan NavHost
composable untuk membuat grafik navigasi. Perhatikan contoh berikut:
@Serializable
object Profile
@Serializable
object FriendsList
val navController = rememberNavController()
NavHost(navController = navController, startDestination = Profile) {
composable<Profile> { ProfileScreen( /* ... */ ) }
composable<FriendsList> { FriendsListScreen( /* ... */ ) }
// Add more destinations similarly.
}
- Objek yang dapat diserialisasi mewakili masing-masing dari dua rute,
Profile
danFriendsList
. - Panggilan ke composable
NavHost
akan meneruskanNavController
dan rute untuk tujuan awal. - Lambda yang diteruskan ke
NavHost
pada akhirnya memanggilNavController.createGraph()
dan menampilkanNavGraph
. - Setiap rute disediakan sebagai argumen jenis untuk
NavGraphBuilder.composable<T>()
yang menambahkan tujuan keNavGraph
yang dihasilkan. - Lambda yang diteruskan ke
composable
adalah yang ditampilkan olehNavHost
untuknya tujuan.
Memahami lambda
Untuk lebih memahami lambda yang membuat NavGraph
, pertimbangkan bahwa untuk
membangun grafik yang sama seperti dalam cuplikan sebelumnya, Anda dapat membuat
NavGraph
secara terpisah menggunakan NavController.createGraph()
dan meneruskannya ke
NavHost
secara langsung:
val navGraph by remember(navController) {
navController.createGraph(startDestination = Profile)) {
composable<Profile> { ProfileScreen( /* ... */ ) }
composable<FriendsList> { FriendsListScreen( /* ... */ ) }
}
}
NavHost(navController, navGraph)
Meneruskan argumen
Jika Anda perlu meneruskan data ke tujuan, tentukan rute dengan class yang
memiliki parameter. Misalnya, rute Profile
adalah class data dengan name
.
@Serializable
data class Profile(val name: String)
Setiap kali Anda perlu meneruskan argumen ke tujuan tersebut, Anda akan membuat instance dari class rute Anda, dengan meneruskan argumen ke konstruktor class.
Mendapatkan instance rute
Anda bisa mendapatkan instance rute dengan NavBackStackEntry.toRoute()
atau
SavedStateHandle.toRoute()
. Saat Anda membuat tujuan menggunakan
composable()
, NavBackStackEntry
tersedia sebagai parameter.
@Serializable
data class Profile(val name: String)
val navController = rememberNavController()
NavHost(navController = navController, startDestination = Profile(name="John Smith")) {
composable<Profile> { backStackEntry ->
val profile: Profile = backStackEntry.toRoute()
ProfileScreen(name = profile.name) }
}
Perhatikan hal-hal berikut dalam cuplikan ini:
- Rute
Profile
menentukan tujuan awal dalam navigasi grafik, dengan"John Smith"
sebagai argumen untukname
. - Tujuannya sendiri adalah blok
composable<Profile>{}
. - Composable
ProfileScreen
mengambil nilaiprofile.name
untuk miliknya sendiri Argumenname
. - Dengan demikian, nilai
"John Smith"
akan diteruskan keProfileScreen
.
Contoh minimal
Contoh lengkap NavController
dan NavHost
yang bekerja sama:
@Serializable
data class Profile(val name: String)
@Serializable
object FriendsList
// Define the ProfileScreen composable.
@Composable
fun ProfileScreen(
profile: Profile
onNavigateToFriendsList: () -> Unit,
) {
Text("Profile for ${profile.name}")
Button(onClick = { onNavigateToFriendsList() }) {
Text("Go to Friends List")
}
}
// Define the FriendsListScreen composable.
@Composable
fun FriendsListScreen(onNavigateToProfile: () -> Unit) {
Text("Friends List")
Button(onClick = { onNavigateToProfile() }) {
Text("Go to Profile")
}
}
// Define the MyApp composable, including the `NavController` and `NavHost`.
@Composable
fun MyApp() {
val navController = rememberNavController()
NavHost(navController, startDestination = Profile(name = "John Smith")) {
composable<Profile> { backStackEntry ->
val profile: Profile = backStackEntry.toRoute()
ProfileScreen(
profile = profile,
onNavigateToFriendsList = {
navController.navigate(route = FriendsList)
}
)
}
composable<FriendsList> {
FriendsListScreen(
onNavigateToProfile = {
navController.navigate(
route = Profile(name = "Aisha Devi")
)
}
)
}
}
}
Seperti yang ditunjukkan cuplikan, ekspos peristiwa ke NavHost
, bukan meneruskan NavController
ke
composable Anda. Artinya, composable Anda harus
memiliki parameter jenis () -> Unit
yang NavHost
-nya akan meneruskan lambda
yang memanggil NavController.navigate()
.
Fragmen
Seperti diuraikan di bagian sebelumnya, saat menggunakan fragmen, Anda memiliki opsi untuk membuat grafik navigasi secara terprogram menggunakan DSL Kotlin, XML, atau editor Android Studio.
Bagian berikut menjelaskan berbagai pendekatan tersebut.
Secara terprogram
DSL Kotlin menyediakan cara terprogram untuk membuat grafik navigasi dengan fragmen. Dalam banyak hal, cara ini lebih rapi dan lebih modern daripada menggunakan file resource XML.
Pertimbangkan contoh berikut, yang menerapkan grafik navigasi dua layar.
Pertama, Anda harus membuat NavHostFragment
, yang tidak boleh menyertakan
elemen app:navGraph
:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.fragment.app.FragmentContainerView
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
Selanjutnya, teruskan id
dari NavHostFragment
ke
NavController.findNavController
. Tindakan ini mengaitkan NavController dengan
NavHostFragment
.
Selanjutnya, panggilan ke NavController.createGraph()
menautkan grafik ke
NavController
dan akibatnya juga pada NavHostFragment
:
@Serializable
data class Profile(val name: String)
@Serializable
object FriendsList
// Retrieve the NavController.
val navController = findNavController(R.id.nav_host_fragment)
// Add the graph to the NavController with `createGraph()`.
navController.graph = navController.createGraph(
startDestination = Profile(name = "John Smith")
) {
// Associate each destination with one of the route constants.
fragment<ProfileFragment, Profile> {
label = "Profile"
}
fragment<FriendsListFragment, FriendsList>() {
label = "Friends List"
}
// Add other fragment destinations similarly.
}
Menggunakan DSL dengan cara ini sangat mirip dengan alur kerja yang diuraikan di
bagian sebelumnya di Compose. Misalnya, di sana maupun di sini,
fungsi NavController.createGraph()
menghasilkan NavGraph
. Demikian pula, meskipun
NavGraphBuilder.composable()
menambahkan tujuan composable ke grafik, di sini
NavGraphBuilder.fragment()
menambahkan tujuan fragmen.
Untuk informasi selengkapnya tentang cara menggunakan DSL Kotlin, lihat Membangun grafik dengan DSL NavGraphBuilder.
XML
Anda dapat langsung menulis XML sendiri. Contoh berikut mencerminkan dan setara dengan contoh dua layar dari bagian sebelumnya.
Pertama, buat NavHostFragment
. Fragmen ini berfungsi sebagai host navigasi yang
berisi grafik navigasi yang sebenarnya.
Implementasi minimal dari NavHostFragment
:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.fragment.app.FragmentContainerView
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:navGraph="@navigation/nav_graph" />
</FrameLayout>
NavHostFragment
berisi atribut app:navGraph
. Gunakan atribut ini
untuk menghubungkan grafik navigasi ke host navigasi. Berikut ini
contoh cara menerapkan grafik:
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/nav_graph"
app:startDestination="@id/profile">
<fragment
android:id="@+id/profile"
android:name="com.example.ProfileFragment"
android:label="Profile">
<!-- Action to navigate from Profile to Friends List. -->
<action
android:id="@+id/action_profile_to_friendslist"
app:destination="@id/friendslist" />
</fragment>
<fragment
android:id="@+id/friendslist"
android:name="com.example.FriendsListFragment"
android:label="Friends List" />
<!-- Add other fragment destinations similarly. -->
</navigation>
Anda menggunakan tindakan untuk menentukan hubungan antara berbagai tujuan. Dalam
contoh ini, fragmen profile
berisi tindakan yang menavigasi ke
friendslist
. Untuk informasi selengkapnya, lihat Menggunakan tindakan dan
fragmen Navigation.
Editor
Anda dapat mengelola grafik navigasi aplikasi menggunakan Navigation Editor di
Android Studio. Pada dasarnya, ini adalah GUI yang dapat Anda gunakan untuk membuat dan mengedit
XML NavigationFragment
, seperti terlihat di bagian sebelumnya.
Untuk mengetahui informasi selengkapnya, lihat Navigation Editor.
Grafik bertingkat
Anda juga dapat menggunakan grafik bertingkat. Hal ini melibatkan penggunaan grafik sebagai tujuan navigasi. Untuk informasi selengkapnya, lihat Grafik bertingkat.
Bacaan Lebih Lanjut
Untuk konsep navigasi inti lainnya, lihat panduan berikut:
- Ringkasan: Pastikan Anda membaca ringkasan umum tentang komponen Navigation.
- Tujuan aktivitas: Contoh cara menerapkan tujuan yang mengarahkan pengguna ke aktivitas.
- Tujuan dialog: Contoh cara membuat tujuan yang mengarahkan pengguna ke dialog.
- Menavigasi ke tujuan: Panduan mendetail yang mencakup cara menavigasi dari satu tujuan ke tujuan lainnya.
- Grafik bertingkat: Panduan mendalam tentang cara menyusun bertingkat satu navigasi dengan grafik lain.