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

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

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.

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. Thêm NavGraph vào 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 một đối tượng hoặc lớp có thể chuyển đổi tuần tự để xác định tuyến. Tuyến đường mô tả cách đến một đích đến và chứa tất cả thông tin mà đích đến yêu cầu.

Sử dụng chú thích @Serializable để tự động tạo các phương thức chuyển đổi tuần tự và huỷ chuyển đổi tuần tự cần thiết cho các loại tuyến của bạn. Chú thích này do trình bổ trợ Chuyển đổi tuần tự Kotlin cung cấp. Làm theo các hướng dẫn sau để thêm trình bổ trợ này.

Sau khi xác định các tuyến đường, 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.
}

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

Tìm hiểu về 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 đường bằng một lớp có các thông 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 đều tạo một thực thể của lớp tuyến đường, truyền các đối số đến hàm khởi tạo lớp.

Đối với các đối số không bắt buộc, hãy tạo các trường có thể có giá trị rỗng với giá trị mặc định.

@Serializable
data class Profile(val nickname: String? = null)

Lấy thực thể tuyến

Bạn có thể lấy thực thể tuyến bằng NavBackStackEntry.toRoute() hoặc SavedStateHandle.toRoute(). Khi bạn tạo một đích đến bằng composable(), NavBackStackEntry sẽ có sẵ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) }
}

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

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

Ví dụ tối giản

Ví dụ đầy đủ về việc 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 (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:

@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 đồ lồng nhau: 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.