Bergabunglah bersama kami di ⁠#Android11: The Beta Launch Show pada tanggal 3 Juni!

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 merancang 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 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 memindah layar judul dan pendaftaran ke dalam grafik bertingkat, seperti yang ditunjukkan pada gambar 2:

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

Saat layar pencocokan diluncurkan, Anda dapat memeriksa apakah ada pengguna yang 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.

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

Berdasarkan contoh game trivia kami, misalnya Anda ingin memisahkan bagian aplikasi yang berfokus pada game ke modul library yang terpisah sehingga Anda dapat menyertakan layar in_game, results_winner, dan game_over di berbagai aplikasi, seperti yang ditunjukkan pada contoh berikut:

<!-- App Module Navigation Graph -->
    <navigation xmlns:android="http://schemas.android.com/apk/res/android"
               xmlns:app="http://schemas.android.com/apk/res-auto"
               xmlns:tools="http://schemas.android.com/tools"
               app:startDestination="@id/match">

       <fragment android:id="@+id/match"
               android:name="com.example.android.navigationsample.Match"
               android:label="fragment_match">

           <!-- Launch into In Game Modules Navigation Graph -->
           <action android:id="@+id/action_match_to_in_game_nav_graph"
               app:destination="@id/in_game_nav_graph" />
       </fragment>

       <include app:graph="@navigation/in_game_navigation" />

    </navigation>
    
<!-- Game Module Navigation Graph -->
    <?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">

       <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" >

           <!-- 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" />

       </fragment>

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

          <!-- 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" />

     </fragment>

    </navigation>
    

Sebaiknya sertakan grafik tingkat atas dalam modul aplikasi utama dan buat Gradle mereferensikan setiap modul yang berisi navigasi yang perlu Anda referensikan.

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.