Grafik navigasi bertingkat

Serangkaian tujuan dapat dikelompokkan menjadi satu grafik bertingkat dalam grafik navigasi induk yang disebut grafik root. Grafik bertingkat berguna untuk mengatur dan menggunakan kembali bagian UI aplikasi Anda, seperti alur login mandiri.

Grafik bertingkat merangkum tujuannya. Seperti grafik root, grafik bertingkat harus memiliki tujuan yang diidentifikasi sebagai tujuan awal. Tujuan di luar grafik bertingkat, seperti yang ada pada grafik root, mengakses grafik bertingkat hanya melalui tujuan awalnya.

Gambar 1 menunjukkan grafik navigasi untuk aplikasi transfer uang sederhana. Dari tujuan awal di sebelah kiri, grafik memiliki dua alur: satu di sepanjang bagian atas untuk mengirim uang dan satu lagi di sepanjang bagian bawah untuk melihat saldo rekening.

Gambar 1. Grafik navigasi transfer uang

Untuk mengelompokkan tujuan menjadi grafik bertingkat, lakukan langkah berikut:

  1. Dalam Navigation Editor, tekan dan tahan tombol Shift, lalu klik tujuan yang ingin dimasukkan dalam grafik bertingkat.

  2. Klik kanan untuk membuka menu konteks, lalu pilih Move to Nested Graph > New Graph. Tujuan dimasukkan dalam grafik bertingkat. Gambar 2 menunjukkan grafik bertingkat dalam Navigation Editor:

    Gambar 2. Grafik bertingkat dalam Graph Editor

  3. Klik grafik bertingkat. Atribut berikut muncul dalam panel Attributes:

    • Type, yang berisi "Grafik Bertingkat"
    • ID, yang berisi ID yang ditetapkan sistem untuk grafik bertingkat. ID ini digunakan untuk mereferensikan grafik bertingkat dari kode Anda.

  4. Klik dua kali pada grafik bertingkat untuk menampilkan tujuannya.

  5. Klik tab Text untuk beralih ke tampilan XML. Grafik navigasi bertingkat telah ditambahkan ke grafik. Grafik navigasi memiliki elemen navigation, dengan ID-nya sendiri dan atribut startDestination yang mengarah ke tujuan pertama dalam grafik bertingkat.

    <?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:startDestination="@id/mainFragment">
    <fragment
        android:id="@+id/mainFragment"
        android:name="com.example.cashdog.cashdog.MainFragment"
        android:label="fragment_main"
        tools:layout="@layout/fragment_main" >
        <action
            android:id="@+id/action_mainFragment_to_sendMoneyGraph"
            app:destination="@id/sendMoneyGraph" />
        <action
            android:id="@+id/action_mainFragment_to_viewBalanceFragment"
            app:destination="@id/viewBalanceFragment" />
    </fragment>
    <fragment
        android:id="@+id/viewBalanceFragment"
        android:name="com.example.cashdog.cashdog.ViewBalanceFragment"
        android:label="fragment_view_balance"
        tools:layout="@layout/fragment_view_balance" />
    <navigation android:id="@+id/sendMoneyGraph" app:startDestination="@id/chooseRecipient">
        <fragment
            android:id="@+id/chooseRecipient"
            android:name="com.example.cashdog.cashdog.ChooseRecipient"
            android:label="fragment_choose_recipient"
            tools:layout="@layout/fragment_choose_recipient">
            <action
                android:id="@+id/action_chooseRecipient_to_chooseAmountFragment"
                app:destination="@id/chooseAmountFragment" />
        </fragment>
        <fragment
            android:id="@+id/chooseAmountFragment"
            android:name="com.example.cashdog.cashdog.ChooseAmountFragment"
            android:label="fragment_choose_amount"
            tools:layout="@layout/fragment_choose_amount" />
    </navigation>
</navigation>

  6. Dalam kode Anda, teruskan ID resource tindakan yang menghubungkan grafik root ke grafik bertingkat.

    Kotlin

    view.findNavController().navigate(R.id.action_mainFragment_to_sendMoneyGraph)

    Java

    Navigation.findNavController(view).navigate(R.id.action_mainFragment_to_sendMoneyGraph);

  7. Dalam tab Design, Anda dapat kembali ke grafik root dengan mengklik Root.

Mereferensikan grafik navigasi lain dengan <include>

Dalam grafik navigasi, Anda dapat mereferensikan grafik lain menggunakan include. Meskipun secara fungsional sama dengan menggunakan grafik bertingkat, include memungkinkan Anda menggunakan grafik dari modul project lain atau project library, seperti yang ditunjukkan dalam contoh berikut:

<!-- (root) nav_graph.xml -->
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_graph"
    app:startDestination="@id/fragment">

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

    <fragment
        android:id="@+id/fragment"
        android:name="com.example.myapplication.BlankFragment"
        android:label="Fragment in Root Graph"
        tools:layout="@layout/fragment_blank">
        <action
            android:id="@+id/action_fragment_to_second_graph"
            app:destination="@id/second_graph" />
    </fragment>

    ...
</navigation>

<!-- included_graph.xml -->
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/second_graph"
    app:startDestination="@id/includedStart">

    <fragment
        android:id="@+id/includedStart"
        android:name="com.example.myapplication.IncludedStart"
        android:label="fragment_included_start"
        tools:layout="@layout/fragment_included_start" />
</navigation>

Resource lainnya

Untuk mempelajari navigasi lebih lanjut, lihat referensi tambahan berikut.

Contoh

Codelab

Video