Komponen Navigasi menggunakan grafik navigasi untuk mengelola navigasi aplikasi. Grafik navigasi adalah struktur data yang berisi setiap tujuan dalam aplikasi Anda dan koneksi di antara 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. |
Notifikasi, 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 Navigasi. Dalam pengembangan Android modern, aplikasi terdiri dari satu aktivitas. Oleh karena itu, tujuan aktivitas paling baik digunakan saat berinteraksi dengan aktivitas pihak ketiga atau sebagai bagian dari proses migrasi. |
Dokumen ini berisi contoh tujuan yang dihosting, yang merupakan tujuan yang paling umum dan mendasar. Lihat panduan berikut untuk mendapatkan informasi tentang tujuan lainnya:
Kerangka kerja
Meskipun alur kerja umum yang sama berlaku dalam setiap kasus, cara sebenarnya Anda membuat host dan grafik navigasi bergantung pada framework UI yang Anda gunakan.
- Compose: Menggunakan composable
NavHost
. BuatNavGraph
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 grafik navigasi:- Secara terprogram: Gunakan DSL Kotlin untuk membuat
NavGraph
dan langsung menerapkannya diNavHostFragment
.- Fungsi
createGraph()
yang digunakan dengan DSL Kotlin untuk fragmen dan Compose sama.
- Fungsi
- XML: Tulis host navigasi dan grafik 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 composable NavHost
untuk membuat grafik navigasi.
Perhatikan contoh berikut:
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "profile") {
composable("profile") { Profile( /* ... */ ) }
composable("friendslist") { FriendsList( /* ... */ ) }
// Add more destinations similarly.
}
- Panggilan ke composable
NavHost
akan meneruskan stringNavController
danroute
yang sesuai dengan tujuan awal. - Lambda yang diteruskan ke
NavHost
pada akhirnya memanggilNavController.creatGraph()
dan menampilkanNavGraph
. - Panggilan ke
NavGraphBuilder.composable()
akan menambahkan tujuan keNavGraph
yang dihasilkan. - Dalam hal ini, tujuannya adalah composable
Profile
danFriendsList
. String rute"profile"
dan"friendslist"
menjadi kunci yang mengidentifikasi dua tujuan.
Untuk lebih memahami lambda yang membuat NavGraph
, pertimbangkan untuk
membuat 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") { Profile() }
composable("friendslist") { FriendsList() }
}
}
NavHost(navController, navGraph)
Contoh minimal
Contoh minimal tetapi lengkap dari NavController
dan NavHost
yang bekerja
bersama:
// Define the Profile composable.
@Composable
fun Profile(onNavigateToFriendsList: () -> Unit) {
Text("Profile")
Button(onClick = { onNavigateToFriendsList() }) {
Text("Go to Friends List")
}
}
// Define the FriendsList composable.
@Composable
fun FriendsList(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") {
composable("profile") { Profile(onNavigateToFriendsList = { navController.navigate("friendslist") }) }
composable("friendslist") { FriendsList(onNavigateToProfile = { navController.navigate("profile") }) }
}
}
Seperti yang ditunjukkan dalam cuplikan, ekspos peristiwa ke NavHost
, bukan meneruskan NavController
ke composable Anda. Artinya, composable Anda harus
memiliki parameter jenis () -> Unit
yang NavHost
-nya meneruskan lambda
yang memanggil NavController.navigate()
.
Fragmen
Seperti yang 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 pendekatan yang berbeda tersebut.
Lewat program
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 mengimplementasikan grafik navigasi dua layar.
Pertama, Anda perlu 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 akan mengaitkan NavController
dengan NavHostFragment
.
Selanjutnya, panggilan ke NavController.createGraph()
akan menautkan
grafik ke NavController
dan juga ke NavHostFragment
:
// 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"
) {
// 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, baik di sana maupun di sini, fungsi NavController.createGraph()
akan menghasilkan NavGraph
. Demikian pula, saat
NavGraphBuilder.composable()
menambahkan tujuan composable ke grafik, di sini
NavGraphBuilder.fragment()
menambahkan tujuan fragmen.
Untuk informasi selengkapnya tentang cara menggunakan DSL Kotlin, lihat Membuat grafik dengan NavGraphBuilder DSL.
XML
Anda dapat langsung menulis XML sendiri. Contoh berikut mencerminkan dan setara dengan contoh dua layar dari bagian sebelumnya.
Pertama, buat NavHostFragment
. 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 adalah
contoh cara mengimplementasikan 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 koneksi di antara tujuan yang berbeda. Dalam
contoh ini, fragmen profile
berisi tindakan yang membuka
friendslist
. Untuk informasi selengkapnya, lihat Menggunakan tindakan dan
fragmen Navigasi.
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 yang terlihat di bagian sebelumnya.
Untuk mengetahui informasi selengkapnya, lihat Editor navigasi.
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 komponen Navigasi.
- 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 membahas cara menavigasi dari satu tujuan ke tujuan lainnya.
- Grafik bertingkat: Panduan mendalam tentang cara menyusun bertingkat satu grafik navigasi dalam grafik navigasi yang lain.