Thiết kế biểu đồ điều hướng

Thành phần điều hướng sử dụng một biểu đồ điều hướng để quản lý việc điều hướng trong ứng dụng của bạn. Biểu đồ điều hướng là một cấu trúc dữ liệu chứa từng đích đến trong ứng dụng và các kết nối giữa các đích đến đó.

Kiểu đích đến

Có 3 kiểu đích đến chung: đích đến được lưu trữ, đích đến của hộp thoại và đích đến của hoạt động. Bảng sau đây trình bày 3 kiểu đích đến này và mục đích tương ứng.

Loại	Nội dung mô tả	Trường hợp sử dụng
Được lưu trữ	Lấp đầy toàn bộ thành phần lưu trữ điều hướng. Tức là kích thước của một đích đến được lưu trữ sẽ giống với kích thước của thành phần lưu trữ điều hướng, đồng thời các đích đến trước đó sẽ không nhìn thấy được.	Màn hình chính và màn hình thông tin.
Hộp thoại	Trình bày lớp phủ thành phần giao diện người dùng. Giao diện người dùng này không liên kết với vị trí của thành phần lưu trữ điều hướng hoặc kích thước tương ứng. Các đích đến trước đó nhìn được bên dưới đích đến này.	Cảnh báo, lựa chọn, biểu mẫu.
Hoạt động	Đại diện cho các màn hình hoặc tính năng riêng biệt trong ứng dụng.	Đóng vai trò là điểm thoát cho biểu đồ điều hướng dùng để bắt đầu một hoạt động Android mới được quản lý riêng biệt với thành phần Điều hướng. Trong quy trình phát triển Android hiện đại, một ứng dụng chỉ chứa một hoạt động duy nhất. Do đó, tốt nhất là bạn hãy sử dụng đích đến của hoạt động khi tương tác với các hoạt động của bên thứ ba hoặc trong quá trình di chuyển.

Trong tài liệu này có các ví dụ về đích đến được lưu, đây là những đích đến cơ bản và phổ biến nhất. Hãy xem các hướng dẫn sau đây để biết thông tin về các đích đến khác:

• Đích đến của hộp thoại
• Đích đến của hoạt động

Khung

Mặc dù áp dụng quy trình công việc chung trong mọi trường hợp, nhưng việc bạn có tạo được biểu đồ điều hướng và thành phần lưu trữ điều hướng một cách chính xác hay không sẽ tuỳ thuộc vào khung giao diện người dùng mà bạn sử dụng.

• Compose: Sử dụng thành phần kết hợp NavHost. Tạo NavGraph cho thành phần kết hợp đó bằng cách sử dụng Kotlin DSL. Bạn có thể tạo biểu đồ theo hai cách:
  • Dưới dạng một phần của NavHost: Trực tiếp tạo biểu đồ điều hướng trong quá trình thêm NavHost.
  • Theo cách có lập trình: Sử dụng phương thức NavController.createGraph() để tạo NavGraph rồi truyền đến NavHost.
• Mảnh: Khi sử dụng các mảnh có khung giao diện người dùng của thành phần hiển thị, hãy dùng một NavHostFragment làm thành phần lưu trữ. Có một số cách tạo biểu đồ điều hướng:
  • Theo cách có lập trình: Sử dụng Kotlin DSL để tạo NavGraph và trực tiếp áp dụng giá trị đó trên NavHostFragment.
    • Hàm createGraph() dùng với DSL Kotlin đối với cả mảnh và Compose đều như nhau.
  • XML: Trực tiếp viết mã thành phần lưu trữ điều hướng và biểu đồ điều hướng ở định dạng XML.
  • Trình chỉnh sửa Android Studio: Sử dụng trình chỉnh sửa GUI trong Android Studio để tạo và điều chỉnh biểu đồ dưới dạng một tệp tài nguyên XML.

Compose

Trong Compose, hãy sử dụng thành phần kết hợp NavHost để tạo biểu đồ điều hướng. Hãy xem ví dụ sau đây:

val navController = rememberNavController()

NavHost(navController = navController, startDestination = "profile") {
    composable("profile") { Profile( /* ... */ ) }
    composable("friendslist") { FriendsList( /* ... */ ) }
    // Add more destinations similarly.
}

1. Lệnh gọi đến thành phần kết hợp NavHost sẽ truyền một NavController và một chuỗi route tương ứng với đích đến khởi đầu.
2. Rốt cuộc thì hàm lambda được truyền đến NavHost sẽ gọi NavController.creatGraph() và trả về một NavGraph.
3. Các lệnh gọi đến NavGraphBuilder.composable() sẽ thêm đích đến vào NavGraph thu được.
4. Trong trường hợp này, đích đến sẽ là các thành phần kết hợp Profile và FriendsList. Các chuỗi định tuyến "profile" và "friendslist" sẽ trở thành khoá xác định hai đích đến này.

Để hiểu rõ hơn về hàm lambda tạo ra NavGraph, nên biết rằng để tạo biểu đồ tương tự như trong đoạn mã trước, bạn có thể tạo NavGraph riêng bằng cách sử dụng NavController.createGraph() rồi truyền trực tiếp đến NavHost:

val navGraph by remember(navController) {
  navController.createGraph(startDestination = "profile") {
    composable("profile") { Profile() }
    composable("friendslist") { FriendsList() }
  }
}
NavHost(navController, navGraph)

Ví dụ tối giản

Một ví dụ tối giản nhưng hoàn chỉnh về việc NavController và NavHost hoạt động cùng nhau:

// 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") }) }
  }
}

Như trong đoạn mã minh hoạ, thay vì truyền NavController đến các thành phần kết hợp, hãy hiện một sự kiện cho NavHost. Tức là các thành phần kết hợp của bạn phải có tham số thuộc kiểu () -> Unit để NavHost truyền một hàm lambda gọi NavController.navigate().

Mảnh

Như được trình bày trong các phần trước, khi sử dụng các mảnh, bạn có thể tạo một biểu đồ điều hướng theo phương pháp có lập trình bằng Kotlin DSL, XML hoặc trình chỉnh sửa Android Studio.

Các phần sau đây trình bày chi tiết về các phương pháp tiếp cận này.

Theo phương pháp có lập trình

Kotlin DSL cung cấp một phương pháp có lập trình để tạo biểu đồ điều hướng bằng các mảnh. Về nhiều khía cạnh, phương pháp này sẽ gọn gàng và hiện đại hơn so với việc sử dụng tệp tài nguyên XML.

Hãy xem xét ví dụ sau đây: triển khai một biểu đồ điều hướng hai màn hình.

Trước tiên, bạn cần tạo NavHostFragment (không chứa phần tử 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>

Tiếp theo, hãy truyền id của NavHostFragment cho NavController.findNavController(). Thao tác này sẽ liên kết NavController với NavHostFragment.

Sau đó, lệnh gọi đến NavController.createGraph() sẽ liên kết biểu đồ với NavController và do đó cũng liên kết với 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.
}

Việc sử dụng DSL theo cách này rất giống với quy trình công việc đã nêu trong phần trước trên Compose. Ví dụ: cả ở đây và ở đó, hàm NavController.createGraph() đều tạo ra NavGraph. Tương tự, trong khi NavGraphBuilder.composable() thêm các thành phần kết hợp đích đến vào biểu đồ, ở đây NavGraphBuilder.fragment() sẽ thêm một đích đến của mảnh.

Để biết thêm thông tin về cách sử dụng Kotlin DSL, hãy xem nội dung Tạo biểu đồ bằng NavGraphBuilder DSL.

XML

Bạn có thể trực tiếp tự viết tệp XML. Ví dụ sau phản ánh và tương đương với ví dụ về hai màn hình ở phần trước.

Trước tiên, hãy tạo một NavHostFragment. Mảnh này đóng vai trò là thành phần lưu trữ điều hướng chứa biểu đồ điều hướng thực tế.

Phương thức triển khai tối giản của 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 chứa thuộc tính app:navGraph. Sử dụng thuộc tính này để kết nối biểu đồ điều hướng với thành phần lưu trữ điều hướng. Sau đây là ví dụ về cách mà bạn có thể triển khai biểu đồ:

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

Bạn sẽ sử dụng các thao tác để xác định kết nối giữa các đích đến khác nhau. Trong ví dụ này, mảnh profile chứa một thao tác điều hướng đến friendslist. Để biết thêm thông tin, hãy xem nội dung Sử dụng các thao tác và mảnh điều hướng.

Trình chỉnh sửa

Bạn có thể quản lý biểu đồ điều hướng của ứng dụng bằng Trình chỉnh sửa điều hướng trong Android Studio. Về cơ bản, đây là một GUI (Giao diện người dùng đồ hoạ) mà bạn có thể sử dụng để tạo và chỉnh sửa tệp XML NavigationFragment, như đã thấy trong phần trước.

Để biết thêm thông tin, hãy xem nội dung Trình chỉnh sửa điều hướng.

Biểu đồ lồng ghép

Bạn cũng có thể sử dụng biểu đồ lồng ghép. Việc này liên quan đến việc sử dụng một biểu đồ làm đích đến điều hướng. Để biết thêm thông tin, hãy xem nội dung Biểu đồ lồng ghép.

Tài liệu đọc thêm

Để tìm hiểu thêm về các khái niệm quan trọng về điều hướng, hãy xem những hướng dẫn sau:

• Tổng quan: Đừng quên đọc thông tin tổng quan chung về thành phần Điều hướng.
• Đích đến của hoạt động: Ví dụ về cách triển khai đích đến sẽ đưa người dùng đến các hoạt động.
• Đích đến của hộp thoại: Ví dụ về cách tạo đích đến sẽ đưa người dùng đến hộp thoại.
• Điều hướng tới một đích đến: Hướng dẫn chi tiết về cách điều hướng từ đích đến này tới đích đến khác.
• Biểu đồ lồng ghép: Hướng dẫn chi tiết về cách lồng một biểu đồ điều hướng trong một biểu đồ điều hướng khác.