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.

Kiểu	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. Thêm NavGraph vào 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 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 NavHostFragment làm người tổ chức. Có một số cách để tạo điều hướng biểu đồ:
  • Theo cách có lập trình: Sử dụng Kotlin DSL để tạo NavGraph và hãy áp dụng trực tiếp trên NavHostFragment.
    • Hàm createGraph() được dùng với Kotlin DSL cho cả hai Mảnh và Compose giống 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 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 A mô tả cách để tới một đích đến và chứa tất cả thông tin mà đích đến. Sau khi xác định các tuyến, hãy sử dụng NavHost thành phần kết hợp để 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. Đối tượng có thể chuyển đổi tuần tự đại diện cho từng tuyến trong số 2 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 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 một đối số loại cho NavGraphBuilder.composable<T>() thêm đích đến vào kết quả NavGraph.
5. Hàm lambda được truyền đến composable là nội dung mà NavHost hiển thị cho điều đó đích.

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ó name .

@Serializable
data class Profile(val name: String)

Mỗi khi cần truyền đối số đến đích đó, bạn sẽ tạo một thực thể của lớp định tuyến, 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ể rỗng bằng giá trị mặc định.

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

Nhận bản sao tuyến đường

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

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

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

Ví dụ tối giản

Một ví dụ hoàn chỉnh 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 và không được bao gồm 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 dẫn đến 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 ghép: Hướng dẫn chi tiết về cách lồng một mục điều hướng trong một biểu đồ khác.