Trang này được dịch bởi Cloud Translation API.

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.

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:

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. Thêm NavGraph vào đó bằng cách sử dụng DSL Kotlin. 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 chế độ xem, hãy dùng NavHostFragment làm máy chủ lưu trữ. Có một số cách tạo biểu đồ điều hướng:
- Lập trình: Sử dụng Kotlin DSL để tạo NavGraph và trực tiếp áp dụng mã này trên NavHostFragment.
  - Hàm createGraph() dùng với Kotlin DSL cho cả mảnh và Compose là 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 một đối tượng hoặc lớp có thể chuyển đổi tuần tự để xác định tuyến (route). Tuyến mô tả cách tới một đích đến và chứa mọi thông tin mà đích đến yêu cầu. Sau khi bạn xác định các tuyến, 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:

@Serializable
object Profile
@Serializable
object FriendsList

val navController = rememberNavController()

NavHost(navController = navController, startDestination = Profile) {
    composable<Profile> { ProfileScreen( /* ... */ ) }
    composable<FriendsList> { FriendsListScreen( /* ... */ ) }
    // Add more destinations similarly.
}

Một đối tượng chuyển đổi tuần tự đại diện cho từng tuyến trong hai tuyến, Profile và FriendsList.
Lệnh gọi đến thành phần kết hợp NavHost truyền NavController và một tuyến cho đích bắt đầu.
Rốt cuộc thì hàm lambda được truyền đến NavHost sẽ gọi NavController.createGraph() và trả về một NavGraph.
Mỗi tuyến được cung cấp dưới dạng một đối số loại cho NavGraphBuilder.composable<T>(), đối số này sẽ thêm đích đến vào NavGraph thu được.
Hàm lambda được truyền đến composable là nội dung mà NavHost hiển thị cho đích đến đó.

Tìm hiểu về hàm lambda

Để 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> { ProfileScreen( /* ... */ ) }
    composable<FriendsList> { FriendsListScreen( /* ... */ ) }
  }
}
NavHost(navController, navGraph)

Truyền đối số

Nếu bạn cần truyền dữ liệu đến một đích đến, hãy xác định tuyến bằng một lớp có tham số. Ví dụ: tuyến Profile là một lớp dữ liệu có tham số name.

@Serializable
data class Profile(val name: String)

Bất cứ khi nào cần truyền đối số đến đích đến đó, bạn sẽ tạo một bản sao của lớp tuyến đường, truyền các đối số đó đến hàm khởi tạo của lớp.

Nhận thực thể tuyến đường

Bạn có thể lấy thực thể tuyến bằng NavBackStackEntry.toRoute() hoặc SavedStateHandle.toRoute(). Khi tạo một đích đến bằng composable(), NavBackStackEntry sẽ xuất hiện dưới dạng tham số.

@Serializable
data class Profile(val name: String)

val navController = rememberNavController()

NavHost(navController = navController, startDestination = Profile(name="John Smith")) {
    composable<Profile> { backStackEntry ->
        val profile: Profile = backStackEntry.toRoute()
        ProfileScreen(name = profile.name) }
}

Hãy lưu ý những điều sau trong đoạn mã này:

Tuyến Profile chỉ định điểm bắt đầu trong biểu đồ điều hướng, với "John Smith" là đối số cho name.
Đích đến là khối composable<Profile>{}.
Thành phần kết hợp ProfileScreen nhận giá trị của profile.name cho đối số name của riêng nó.
Do đó, giá trị "John Smith" chuyển sang ProfileScreen.

Ví dụ tối giản

Dưới đây là một ví dụ hoàn chỉnh về trường hợp NavController và NavHost hoạt động cùng nhau:

@Serializable
data class Profile(val name: String)

@Serializable
object FriendsList

// Define the ProfileScreen composable.
@Composable
fun ProfileScreen(
    profile: Profile
    onNavigateToFriendsList: () -> Unit,
  ) {
  Text("Profile for ${profile.name}")
  Button(onClick = { onNavigateToFriendsList() }) {
    Text("Go to Friends List")
  }
}

// Define the FriendsListScreen composable.
@Composable
fun FriendsListScreen(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(name = "John Smith")) {
    composable<Profile> { backStackEntry ->
        val profile: Profile = backStackEntry.toRoute()
        ProfileScreen(
            profile = profile,
            onNavigateToFriendsList = {
                navController.navigate(route = FriendsList)
            }
        )
    }
    composable<FriendsList> {
      FriendsListScreen(
        onNavigateToProfile = {
          navController.navigate(
            route = Profile(name = "Aisha Devi")
          )
        }
      )
    }
  }
}

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. Phần tử này không được 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. Việc này 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:

@Serializable
data class Profile(val name: String)

@Serializable
object FriendsList

// 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(name = "John Smith")
) {
    // 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.

Người 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 đồ điều hướng lồng nhau: Hướng dẫn chuyên sâu về cách lồng một biểu đồ điều hướng vào một biểu đồ điều hướng khác.