Một chuỗi (series) các đích đến có thể được nhóm thành một biểu đồ lồng nhau (nested graph) trong một biểu đồ điều hướng cha có tên là biểu đồ gốc (root graph). Biểu đồ lồng nhau giúp bạn sắp xếp và tái sử dụng các phần trong giao diện người dùng của ứng dụng, chẳng hạn như quy trình đăng nhập độc lập.
Biểu đồ lồng nhau sẽ đóng gói các đích đến của biểu đồ đó. Giống như biểu đồ gốc, biểu đồ lồng nhau phải có một đích đến được xác định là đích bắt đầu. Các đích đến bên ngoài biểu đồ lồng nhau, chẳng hạn như các đích đến trên biểu đồ gốc, chỉ truy cập biểu đồ lồng nhau này thông qua đích bắt đầu của biểu đồ lồng nhau đó.
Hình 1 cho thấy một biểu đồ điều hướng cho một ứng dụng chuyển tiền đơn giản. Từ đích bắt đầu ở bên trái, biểu đồ này có 2 luồng: một luồng nằm ở trên cùng dùng để gửi tiền và luồng còn lại ở phía dưới dùng để xem số dư tài khoản.
Để nhóm các đích đến vào một biểu đồ lồng nhau, hãy làm như sau:
- Trong Navigation Editor (Trình chỉnh sửa điều hướng), nhấn và giữ phím Shift, sau đó nhấp vào các đích đến mà bạn muốn đưa vào biểu đồ lồng nhau đó.
Nhấp chuột phải để mở trình đơn ngữ cảnh và chọn Move to Nested Graph (Di chuyển đến Biểu đồ lồng nhau) >New Graph (Biểu đồ mới). Các đích đến này sẽ được chứa trong một biểu đồ lồng nhau. Hình 2 cho thấy một biểu đồ lồng trong Navigation Editor (Trình chỉnh sửa điều hướng):
Hình 2. Biểu đồ lồng ghép trong Graph Editor (Trình chỉnh sửa biểu đồ) Nhấp vào biểu đồ lồng nhau. Các thuộc tính sau sẽ xuất hiện trong ngăn Attributes (Thuộc tính):
- Type (Loại), chứa "Biểu đồ lồng nhau"
- ID (Mã nhận dạng) chứa mã định dạng do hệ thống chỉ định cho biểu đồ lồng nhau. Mã nhận dạng này dùng để tham chiếu đến biểu đồ lồng nhau từ mã của bạn.
Nhấp đúp vào biểu đồ lồng nhau để hiện ra các đích đến của biểu đồ này.
Nhấp vào thẻ Text (Văn bản) để chuyển sang chế độ xem XML. Một biểu đồ điều hướng lồng nhau đã được thêm vào biểu đồ. Biểu đồ điều hướng này có các phần tử
navigationriêng, cùng với mã nhận dạng riêng và thuộc tínhstartDestinationtrỏ đến đích đến đầu tiên trong biểu đồ lồng nhau:<?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>Trong mã của bạn, hãy chuyển mã nhận dạng tài nguyên của thao tác kết nối biểu đồ gốc với biểu đồ lồng nhau:
Kotlin
view.findNavController().navigate(R.id.action_mainFragment_to_sendMoneyGraph)
Java
Navigation.findNavController(view).navigate(R.id.action_mainFragment_to_sendMoneyGraph);
Quay lại thẻ Design (Thiết kế), bạn có thể quay lại biểu đồ gốc bằng cách nhấp vào Root (Gốc).
Tham chiếu các biểu đồ điều hướng khác bằng <included>
Trong biểu đồ điều hướng, bạn có thể tham chiếu các biểu đồ khác bằng cách sử dụng include.
Chức năng này tương tự như cách sử dụng một biểu đồ lồng nhau, nhưng include cho phép bạn sử dụng các biểu đồ trong những mô-đun dự án khác hoặc trong các dự án thư viện, như minh họa trong ví dụ dưới đây:
<!-- (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>
Tài nguyên khác
Để tìm hiểu thêm về cách điều hướng, hãy tham khảo thêm những tài nguyên sau đây.