Chủ đề này hướng dẫn bạn cách thiết lập và làm việc với thành phần Điều hướng. Để tìm hiểu khái quát về thành phần Điều hướng, hãy xem Tổng quan về Điều hướng.
Thiết lập môi trường
Để đưa tính năng hỗ trợ Điều hướng vào dự án của bạn, hãy thêm các phần phụ thuộc sau
vào tệp build.gradle
trong ứng dụng:
Groovy
dependencies { def nav_version = "2.5.3" // Java language implementation implementation "androidx.navigation:navigation-fragment:$nav_version" implementation "androidx.navigation:navigation-ui:$nav_version" // Kotlin implementation "androidx.navigation:navigation-fragment-ktx:$nav_version" implementation "androidx.navigation:navigation-ui-ktx:$nav_version" // Feature module Support implementation "androidx.navigation:navigation-dynamic-features-fragment:$nav_version" // Testing Navigation androidTestImplementation "androidx.navigation:navigation-testing:$nav_version" // Jetpack Compose Integration implementation "androidx.navigation:navigation-compose:$nav_version" }
Kotlin
dependencies { val nav_version = "2.5.3" // Java language implementation implementation("androidx.navigation:navigation-fragment:$nav_version") implementation("androidx.navigation:navigation-ui:$nav_version") // Kotlin implementation("androidx.navigation:navigation-fragment-ktx:$nav_version") implementation("androidx.navigation:navigation-ui-ktx:$nav_version") // Feature module Support implementation("androidx.navigation:navigation-dynamic-features-fragment:$nav_version") // Testing Navigation androidTestImplementation("androidx.navigation:navigation-testing:$nav_version") // Jetpack Compose Integration implementation("androidx.navigation:navigation-compose:$nav_version") }
Để biết thông tin về việc thêm các thành phần cấu trúc khác vào dự án, hãy xem phần Thêm các thành phần vào dự án.
Tạo biểu đồ điều hướng
Hoạt động điều hướng diễn ra giữa các đích đến của ứng dụng, nghĩa là mọi nơi trong ứng dụng mà người dùng có thể di chuyển đến. Các đích đến này được kết nối thông qua hành động.
Biểu đồ điều hướng là một tệp tài nguyên chứa tất cả các đích đến và hành động. Biểu đồ thể hiện tất cả đường dẫn điều hướng trong ứng dụng của bạn.
Hình 1 cho thấy bản trình bày bằng hình ảnh của biểu đồ điều hướng cho một ứng dụng mẫu có chứa 6 đích đến được kết nối bằng 5 hành động. Mỗi đích đến được biểu thị bằng một hình thu nhỏ xem trước, các hành động kết nối được biểu thị bằng các mũi tên cho thấy cách người dùng di chuyển từ đích đến này sang đích đến khác.

- Đích đến là các khu vực nội dung khác nhau trong ứng dụng của bạn.
- Hành động là kết nối logic giữa các đích đến thể hiện những đường dẫn mà người dùng có thể chọn.
Để thêm biểu đồ điều hướng vào dự án, hãy làm như sau:
- Trong cửa sổ Project (Dự án), hãy nhấp chuột phải vào thư mục
res
rồi chọn New > Android Resource File (Mới > Tệp tài nguyên Android). Hộp thoại New Resource File (Tệp tài nguyên mới) xuất hiện. - Nhập một tên vào trường File name (Tên tệp), chẳng hạn như "nav_graph".
- Chọn Navigation (Điều hướng) từ danh sách thả xuống Resource type (Loại tài nguyên), sau đó nhấp vào OK.
Khi bạn thêm biểu đồ điều hướng đầu tiên, Android Studio sẽ tạo một thư mục tài nguyên navigation
trong thư mục res
. Thư mục này chứa
tệp tài nguyên của biểu đồ điều hướng (chẳng hạn như nav_graph.xml
).
Trình chỉnh sửa điều hướng
Sau khi thêm biểu đồ, Android Studio sẽ mở biểu đồ trong Navigation Editor (Trình chỉnh sửa điều hướng). Trong Navigation Editor (Trình chỉnh sửa điều hướng), bạn có thể chỉnh sửa biểu đồ điều hướng theo cách trực quan hoặc trực tiếp chỉnh sửa tệp XML cơ sở.

- Destinations panel (Bảng đích đến): Liệt kê máy chủ điều hướng và tất cả các đích đến hiện có trong Graph Editor (Trình chỉnh sửa biểu đồ).
- Graph Editor (Trình chỉnh sửa biểu đồ): Chứa bản trình bày bằng hình ảnh của biểu đồ điều hướng. Bạn có thể chuyển đổi giữa thành phần hiển thị Design (Thiết kế) và bản trình bày của tệp XML cơ sở trong thành phần hiển thị Text (Văn bản).
- Attributes (Thuộc tính): Hiển thị các thuộc tính cho mục đang được chọn trong biểu đồ điều hướng.
Nhấp vào thẻ Text (Văn bản) để xem tệp XML tương ứng, tệp này sẽ trông giống đoạn mã sau:
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/nav_graph">
</navigation>
Phần tử <navigation>
là phần tử gốc của biểu đồ điều hướng. Khi
thêm các đích đến và hành động kết nối vào biểu đồ, bạn có thể thấy
các phần tử <destination>
và <action>
tương ứng tại đây dưới dạng các phần tử con.
Nếu bạn có các
biểu đồ lồng nhau,
thì chúng sẽ xuất hiện dưới dạng các phần tử <navigation>
con.
Thêm NavHost vào một hoạt động
Máy chủ điều hướng là một trong những phần chính của thành phần Điều hướng. Máy chủ điều hướng là một vùng chứa trống, trong đó các đích đến được hoán đổi khi người dùng di chuyển trong ứng dụng của bạn.
Một máy chủ điều hướng phải bắt nguồn từ
NavHost
. Hoạt động triển khai
NavHost
mặc định của thành phần Điều hướng,
NavHostFragment
,
xử lý việc hoán đổi các đích đến của mảnh.
Thêm NavHostFragment thông qua XML
Ví dụ XML bên dưới cho thấy NavHostFragment
như một phần trong hoạt động chính
của một ứng dụng:
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <androidx.appcompat.widget.Toolbar .../> <androidx.fragment.app.FragmentContainerView android:id="@+id/nav_host_fragment" android:name="androidx.navigation.fragment.NavHostFragment" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:defaultNavHost="true" app:navGraph="@navigation/nav_graph" /> <com.google.android.material.bottomnavigation.BottomNavigationView .../> </androidx.constraintlayout.widget.ConstraintLayout>
Xin lưu ý những điều sau:
- Thuộc tính
android:name
chứa tên lớp của hoạt động triển khaiNavHost
. - Thuộc tính
app:navGraph
liên kếtNavHostFragment
với một biểu đồ điều hướng. Biểu đồ điều hướng chỉ định tất cả các đích đến trongNavHostFragment
này mà người dùng có thể di chuyển đến. - Thuộc tính
app:defaultNavHost="true"
đảm bảo rằngNavHostFragment
sẽ chặn nút Quay lại của hệ thống. Xin lưu ý rằng bạn chỉ có thể đặt mộtNavHost
là mặc định. Nếu có nhiều máy chủ trong cùng một bố cục (ví dụ: bố cục hai ngăn), hãy nhớ chỉ định mộtNavHost
mặc định duy nhất.
Bạn cũng có thể sử dụng Layout Editor để thêm
NavHostFragment
vào một hoạt động theo cách sau đây:
- Trong danh sách các tệp dự án, hãy nhấp đúp vào tệp XML bố cục của hoạt động để mở tệp đó trong Trình chỉnh sửa bố cục.
- Trong ngăn Palette (Bảng thành phần hiển thị), hãy chọn danh mục Containers (Vùng chứa) hoặc tìm "NavHostFragment".
- Kéo thành phần hiển thị
NavHostFragment
vào hoạt động của bạn. - Tiếp theo, trong hộp thoại Navigation Graphs (Biểu đồ điều hướng) hiển thị, hãy chọn
biểu đồ điều hướng tương ứng để liên kết với
NavHostFragment
này, sau đó nhấp vào OK.
Thêm đích đến vào biểu đồ điều hướng
Bạn có thể tạo đích đến từ một mảnh hoặc hoạt động hiện có. Bạn cũng có thể dùng Navigation Editor (Trình chỉnh sửa điều hướng) để tạo đích đến mới hoặc tạo phần giữ chỗ rồi sau này thay thế bằng một mảnh hoặc hoạt động.
Trong ví dụ này, hãy tạo một đích đến mới. Để thêm đích đến mới bằng Trình chỉnh sửa điều hướng, hãy làm như sau:
- Trong Navigation Editor (Trình chỉnh sửa điều hướng), hãy nhấp vào biểu tượng Đích đến mới
, sau đó nhấp vào Create new destination (Tạo đích đến mới).
- Tạo mảnh trong hộp thoại New Android Component (Thành phần Android mới). Để biết thêm thông tin về mảnh, hãy xem tài liệu về mảnh.
Quay lại Navigation Editor (Trình chỉnh sửa điều hướng), hãy lưu ý rằng Android Studio đã thêm đích đến này vào biểu đồ.
Hình 3 cho thấy ví dụ về một đích đến và một đích đến của phần giữ chỗ.

Để biết thêm các cách bổ sung đích đến vào biểu đồ điều hướng, hãy xem phần Tạo đích đến.
Phân tích các thành phần của một đích đến
Nhấp để chọn một đích đến, và hãy lưu ý các thuộc tính sau trong bảng Attributes (Thuộc tính):
- Trường Type (Loại) cho biết đích đến được triển khai dưới dạng mảnh, hoạt động hay lớp tuỳ chỉnh khác trong mã nguồn.
- Trường Label (Nhãn) chứa tên của đích đến mà người dùng có thể đọc được. Trường này
có thể hiển thị trên giao diện người dùng – ví dụ: nếu bạn kết nối
NavGraph
với mộtToolbar
bằngsetupWithNavController()
. Do đó, bạn nên sử dụng chuỗi tài nguyên cho giá trị này. - Trường ID (Mã) chứa mã của đích đến dùng để tham chiếu đến đích đến trong mã.
- Trình đơn thả xuống Class (Lớp) hiển thị tên của lớp đã liên kết với đích đến. Bạn có thể nhấp vào trình đơn thả xuống này để thay đổi lớp đã liên kết thành một loại đích đến khác.
Nhấp vào thẻ Text (Văn bản) để hiển thị thành phần hiển thị XML của biểu đồ điều hướng. XML chứa các thuộc tính id
, name
, label
và layout
giống nhau cho đích đến, như hiển thị dưới đây:
<?xml version="1.0" encoding="utf-8"?> <navigation xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android" app:startDestination="@id/blankFragment"> <fragment android:id="@+id/blankFragment" android:name="com.example.cashdog.cashdog.BlankFragment" android:label="@string/label_blank" tools:layout="@layout/fragment_blank" /> </navigation>
Chỉ định một màn hình làm đích đến bắt đầu
Đích bắt đầu là màn hình đầu tiên người dùng nhìn thấy khi mở ứng dụng và là màn hình cuối cùng mà người dùng nhìn thấy khi thoát ứng dụng. Navigation Editor (Trình chỉnh sửa điều hướng) sử dụng biểu tượng ngôi nhà để biểu thị đích bắt đầu.
Khi đã có tất cả các đích đến, bạn có thể chọn một đích đến bắt đầu theo cách sau đây:
Trong thẻ Design (Thiết kế), hãy nhấp để đánh dấu một đích đến.
Nhấp vào nút Assign start destination (Chỉ định đích đến bắt đầu)
. Hoặc, bạn có thể nhấp chuột phải vào đích đến và nhấp vào Set as Start Destination (Đặt làm đích đến bắt đầu).
Kết nối các đích đến
Hành động là kết nối logic giữa các đích đến. Hành động được biểu thị bằng mũi tên trong biểu đồ điều hướng. Hành động thường kết nối đích đến này với đích đến khác, mặc dù bạn cũng có thể tạo các hành động chung đưa bạn đến một đích đến cụ thể từ bất kỳ vị trí nào trong ứng dụng.
Bằng hành động, bạn đưa ra nhiều đường dẫn mà người dùng có thể chọn thông qua ứng dụng của bạn. Xin lưu ý rằng để thực sự di chuyển đến các đích đến, bạn vẫn cần viết mã để thực hiện điều hướng. Điều này sẽ được đề cập sau trong phần Chuyển đến một đích đến trong chủ đề này.
Bạn có thể sử dụng Trình chỉnh sửa điều hướng để kết nối hai đích đến theo cách sau đây:
Trong thẻ Design (Thiết kế), hãy di chuột qua phía bên phải của đích đến mà bạn muốn người dùng di chuyển từ đó. Một vòng tròn sẽ xuất hiện phía bên phải của đích đến, như trong hình 4.
Hình 4. Một đích đến có vòng kết nối hành động Nhấp và kéo con trỏ đến đích đến mà bạn muốn người dùng di chuyển đến rồi thả ra. Đường kẻ hình thành giữa hai đích đến biểu thị một hành động, như minh hoạ trong hình 5.
Hình 5. Kết nối các đích đến với một hành động Nhấp vào mũi tên để làm nổi bật hành động. Các thuộc tính sau xuất hiện trong bảng Attributes (Thuộc tính):
- Trường Type (Loại) chứa "Action" (Hành động).
- Trường ID (Mã) chứa mã cho hành động.
- Trường Destination (Đích đến) chứa mã cho mảnh hoặc hoạt động đích đến.
Nhấp vào thẻ Text (Văn bản) để chuyển sang khung hiển thị XML. Một phần tử hành động hiện đã được thêm vào đích đến nguồn. Hành động có một mã và một thuộc tính đích đến chứa mã đích đến tiếp theo, như trong ví dụ dưới đây:
<?xml version="1.0" encoding="utf-8"?> <navigation xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android" app:startDestination="@id/blankFragment"> <fragment android:id="@+id/blankFragment" android:name="com.example.cashdog.cashdog.BlankFragment" android:label="@string/label_blank" tools:layout="@layout/fragment_blank" > <action android:id="@+id/action_blankFragment_to_blankFragment2" app:destination="@id/blankFragment2" /> </fragment> <fragment android:id="@+id/blankFragment2" android:name="com.example.cashdog.cashdog.BlankFragment2" android:label="@string/label_blank_2" tools:layout="@layout/fragment_blank_fragment2" /> </navigation>
Trong biểu đồ điều hướng, các hành động được biểu thị bằng các phần tử <action>
. Ở mức
tối thiểu, một hành động sẽ chứa mã riêng và mã của đích đến mà người dùng sẽ được
chuyển đến.
Chuyển đến một đích đến
Việc chuyển đến một đích đến được thực hiện thông qua NavController
, một đối tượng quản lý hoạt động điều hướng ứng dụng trong một NavHost
. Mỗi NavHost
sẽ có NavController
tương ứng
riêng. Bạn có thể truy xuất một NavController
bằng một trong
các phương thức sau:
Kotlin:
Java:
NavHostFragment.findNavController(Fragment)
Navigation.findNavController(Activity, @IdRes int viewId)
Navigation.findNavController(View)
Khi bạn tạo NavHostFragment
bằng FragmentContainerView
hoặc nếu
thêm NavHostFragment
vào hoạt động theo cách thủ công qua một
FragmentTransaction
, việc thử truy xuất NavController
trong
onCreate()
của một Hoạt động thông qua
Navigation.findNavController(Activity, @IdRes int)
sẽ không thành công. Thay vào đó, bạn
nên truy xuất NavController
trực tiếp từ NavHostFragment
.
Kotlin
val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment val navController = navHostFragment.navController
Java
NavHostFragment navHostFragment = (NavHostFragment) getSupportFragmentManager().findFragmentById(R.id.nav_host_fragment); NavController navController = navHostFragment.getNavController();
Đảm bảo an toàn kiểu bằng Safe Args
Bạn nên di chuyển giữa các đích đến bằng trình bổ trợ Safe Args Gradle. Trình bổ trợ này tạo các lớp đối tượng và trình tạo đơn giản cho phép truyền đối số và điều hướng theo loại an toàn giữa các đích đến.
Để thêm Safe Args vào dự án, hãy đưa classpath
sau vào tệp build.gradle
cấp cao nhất của bạn:
Groovy
buildscript { repositories { google() } dependencies { def nav_version = "2.5.3" classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version" } }
Kotlin
buildscript { repositories { google() } dependencies { val nav_version = "2.5.3" classpath("androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version") } }
Bạn cũng phải áp dụng 1 trong 2 trình bổ trợ có sẵn.
Để tạo mã ngôn ngữ Java phù hợp với mô-đun Java và Kotlin, hãy thêm dòng này vào tệp build.gradle
của ứng dụng hoặc mô-đun:
Groovy
plugins { id 'androidx.navigation.safeargs' }
Kotlin
plugins { id("androidx.navigation.safeargs") }
Ngoài ra, để tạo mã Kotlin phù hợp với các mô-đun chỉ Kotlin, hãy thêm:
Groovy
plugins { id 'androidx.navigation.safeargs.kotlin' }
Kotlin
plugins { id("androidx.navigation.safeargs.kotlin") }
Bạn phải có android.useAndroidX=true
trong
tệp gradle.properties
theo hướng dẫn
Di chuyển sang AndroidX.
Sau khi bạn bật Safe Args, trình bổ trợ sẽ tạo mã chứa các lớp và
phương thức cho mỗi hành động bạn đã quy định. Đối với mỗi hành động, Safe Args cũng
tạo một lớp cho mỗi đích đến ban đầu, là đích đến
mà hành động xuất phát từ đó. Tên lớp được tạo là sự kết hợp giữa
tên lớp đích đến ban đầu và từ "Directions" (Đường đi). Ví dụ:
nếu đích đến có tên là SpecifyAmountFragment
, lớp được tạo sẽ có tên là
SpecifyAmountFragmentDirections
. Lớp được tạo chứa một phương thức tĩnh
cho mỗi hành động đã quy định trong đích đến ban đầu. Phương thức này
lấy mọi tham số hành động đã quy định làm đối số và trả về một đối tượng NavDirections
mà bạn có thể truyền đến navigate()
.
Ví dụ: giả sử chúng ta có biểu đồ điều hướng với một hành động
kết nối đích đến ban đầu là SpecifyAmountFragment
với
đích đến nhận là ConfirmationFragment
.
Safe Args tạo một lớp SpecifyAmountFragmentDirections
bằng một phương thức
duy nhất là actionSpecifyAmountFragmentToConfirmationFragment()
, phương thức này trả về
đối tượng NavDirections
. Sau đó, đối tượng NavDirections
được trả về này có thể
được truyền trực tiếp đến navigate()
, như trong ví dụ sau:
Kotlin
override fun onClick(view: View) { val action = SpecifyAmountFragmentDirections .actionSpecifyAmountFragmentToConfirmationFragment() view.findNavController().navigate(action) }
Java
@Override public void onClick(View view) { NavDirections action = SpecifyAmountFragmentDirections .actionSpecifyAmountFragmentToConfirmationFragment(); Navigation.findNavController(view).navigate(action); }
Để biết thêm thông tin về việc truyền dữ liệu giữa các đích đến bằng Safe Args, hãy xem phần Sử dụng Safe Args để truyền dữ liệu với an toàn kiểu.
Thông tin khác
- Tổng quan về điều hướng
- Tạo đích đến
- Chuyển đến một đích đến
- Cập nhật thành phần giao diện người dùng bằng NavigationUI
- Truyền dữ liệu giữa các đích đến
- Hành động chung
- Đích đến có điều kiện
- Các loại đích đến tuỳ chỉnh
- Android Jetpack: quản lý điều hướng giao diện người dùng bằng Bộ điều khiển điều hướng (Google I/O 2018)
- Di chuyển dự án hiện có sang Thành phần cấu trúc điều hướng
- Lớp học lập trình về điều hướng
Nếu gặp bất kỳ vấn đề nào với Điều hướng, hãy gửi phản hồi thông qua một trong những kênh sau:
- Báo cáo lỗi về Trình chỉnh sửa điều hướng
- Báo cáo lỗi về thư viện Điều hướng
- Gắn thẻ một vấn đề trên Stack Overflow
Để hiểu cách cung cấp các thông tin hữu ích nhất trong báo cáo lỗi hãy xem các đường liên kết sau: