Mendesain grafik navigasi

Komponen Navigasi menggunakan grafik navigasi untuk mengelola navigasi aplikasi. Grafik navigasi adalah file resource yang berisi semua tujuan aplikasi beserta koneksi logis, atau tindakan, yang dapat digunakan pengguna untuk bernavigasi dari satu tujuan ke tujuan lain. Anda dapat mengelola grafik navigasi aplikasi menggunakan Navigation Editor di Android Studio.

Topik ini berisi praktik terbaik dan rekomendasi untuk mendesain grafik navigasi aplikasi Anda.

Grafik navigasi tingkat atas

Grafik navigasi tingkat atas Anda harus dimulai dengan tujuan awal yang dilihat pengguna saat meluncurkan aplikasi dan harus menyertakan tujuan yang dilihat pengguna saat berpindah-pindah dalam aplikasi Anda.

Gambar 1. Grafik navigasi tingkat atas.

Grafik bertingkat

Alur login, wizard, atau sub-alur lainnya dalam aplikasi biasanya direpresentasikan dengan baik sebagai grafik navigasi bertingkat. Dengan memberi tingkat alur subnavigasi mandiri dengan cara ini, alur utama UI aplikasi dapat dipahami dan dikelola dengan lebih mudah. Selain itu, grafik bertingkat dapat digunakan kembali. Grafik tersebut juga menyediakan tingkat enkapsulasi—tujuan di luar grafik bertingkat tidak memiliki akses langsung ke tujuan mana pun dalam grafik bertingkat. Sebaliknya, grafik akan navigate() ke grafik bertingkat itu sendiri, di mana logika internal dapat diubah tanpa memengaruhi grafik lain.

Dengan menggunakan grafik navigasi tingkat atas dari gambar 1 sebagai contoh, Anda ingin meminta pengguna untuk melihat title_screen dan layar register hanya saat aplikasi diluncurkan pertama kali. Setelah itu, informasi pengguna akan disimpan, dan pada peluncuran aplikasi berikutnya, sebaiknya Anda membawanya langsung ke layar match. Sebagai praktik terbaik, Anda harus menetapkan layar match sebagai tujuan awal grafik navigasi tingkat atas dan memindahkan layar judul dan daftar ke dalam grafik bertingkat, seperti yang ditunjukkan pada gambar 2:

Gambar 2. Grafik navigasi tingkat atas kini berisi grafik bertingkat.

Saat layar pencocokan (match) diluncurkan, Anda dapat memeriksa apakah ada pengguna terdaftar. Jika pengguna tidak terdaftar, Anda dapat mengarahkan pengguna ke layar pendaftaran. Untuk informasi selengkapnya tentang skenario navigasi bersyarat, lihat Navigasi bersyarat.

Cara lain untuk memodularisasi struktur grafik Anda adalah menyertakan satu grafik dalam grafik lain melalui elemen <include> di grafik navigasi induk. Hal ini memungkinkan grafik yang disertakan ditentukan dalam modul yang terpisah atau satu project utuh, yang dapat digunakan kembali secara maksimal.

Navigasi di semua modul library

Jika aplikasi Anda bergantung pada modul library, yang memiliki grafik navigasi di dalamnya, Anda dapat mereferensikan grafik navigasi ini menggunakan elemen <include>.

Untuk informasi selengkapnya, lihat Praktik terbaik navigasi untuk project multi-modul.

Tindakan global

Setiap tujuan di aplikasi Anda yang dapat dijangkau melalui lebih dari satu jalur akan memiliki tindakan global terkait yang ditentukan untuk menavigasi ke tujuan tersebut. Tindakan global dapat digunakan untuk menavigasi ke tujuan dari mana saja.

Mari terapkan ini ke contoh modul library kami, yang memiliki tindakan yang sama yang ditentukan dalam tujuan win dan game over. Sebaiknya ekstrak tindakan umum ini ke satu tindakan global dan referensikan semuanya dari dua tujuan, seperti yang ditunjukkan pada contoh berikut:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/in_game_nav_graph"
   app:startDestination="@id/in_game">

   <!-- Action back to destination which launched into this in_game_nav_graph-->
   <action android:id="@+id/action_pop_out_of_game"
                       app:popUpTo="@id/in_game_nav_graph"
                       app:popUpToInclusive="true" />

   <fragment
       android:id="@+id/in_game"
       android:name="com.example.android.gamemodule.InGame"
       android:label="Game">
       <action
           android:id="@+id/action_in_game_to_resultsWinner"
           app:destination="@id/results_winner" />
       <action
           android:id="@+id/action_in_game_to_gameOver"
           app:destination="@id/game_over" />
   </fragment>

   <fragment
       android:id="@+id/results_winner"
       android:name="com.example.android.gamemodule.ResultsWinner" />

   <fragment
       android:id="@+id/game_over"
       android:name="com.example.android.gamemodule.GameOver"
       android:label="fragment_game_over"
       tools:layout="@layout/fragment_game_over" />

</navigation>

Lihat Tindakan global di dokumen navigasi untuk mempelajari lebih lanjut dan contoh cara menggunakan tindakan global dalam fragmen Anda.