Mendesain grafik navigasi

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. Buat NavGraph 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 membuat NavGraph dan teruskan ke NavHost secara langsung.
  • 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 di NavHostFragment.
      • Fungsi createGraph() yang digunakan dengan DSL Kotlin untuk fragmen dan Compose sama.
    • 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.

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.
}
  1. Panggilan ke composable NavHost akan meneruskan string NavController dan route yang sesuai dengan tujuan awal.
  2. Lambda yang diteruskan ke NavHost pada akhirnya memanggil NavController.creatGraph() dan menampilkan NavGraph.
  3. Panggilan ke NavGraphBuilder.composable() akan menambahkan tujuan ke NavGraph yang dihasilkan.
  4. Dalam hal ini, tujuannya adalah composable Profile dan FriendsList. 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.