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:
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êmNavGraph
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ạoNavGraph
rồi truyền đếnNavHost
.
- 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
- 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ênNavHostFragment
.- Hàm
createGraph()
được dùng với Kotlin DSL cho cả hai Mảnh và Compose giống nhau.
- Hàm
- 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.
- Theo cách có lập trình: Sử dụng Kotlin DSL để tạo
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.
}
- Đối tượng được chuyển đổi tuần tự đại diện cho từng tuyến trong số 2 tuyến,
Profile
vàFriendsList
- Lệnh gọi đến thành phần kết hợp
NavHost
sẽ truyền mộtNavController
và một tuyến cho đích đến bắt đầu. - Rốt cuộc thì hàm lambda được truyền đến
NavHost
sẽ gọiNavController.createGraph()
và trả về mộtNavGraph
. - 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
. - 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.
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 đồ, trong đó"John Smith"
là đối số choname
. - 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 đếnProfileScreen
.
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.