Navigation Component — Nó là gì, NavHost và Navigation Graph

Tác giả: IT Sectr Đã đăng: 2026-02-22 Thời gian đọc: 7 phút

Navigation Component là thư viện Android Jetpack để triển khai điều hướng giữa các màn hình ứng dụng. Thành phần này tập trung hóa việc quản lý ngăn xếp fragment, liên kết sâu và truyền đối số. Nó là một phần của Jetpack từ năm 2018 và được Google khuyến nghị cho tất cả các dự án mới. Đọc thêm trong hướng dẫn chính thức của Google.

Những điểm chính

  • Navigation Component — thư viện Jetpack để điều hướng tập trung giữa các màn hình Android
  • NavGraph — tài nguyên XML mô tả tất cả các màn hình và kết nối giữa chúng
  • NavHostFragment — vùng chứa trong bố cục Activity hiển thị màn hình điều hướng hiện tại
  • NavController — đối tượng điều khiển điều hướng: navigate, popBackStack, navigateUp
  • Safe Args — plugin Gradle để truyền đối số an toàn kiểu giữa các màn hình

Navigation Component là gì?

Navigation Component là thư viện Android Jetpack (androidx.navigation) cung cấp API thống nhất cho điều hướng. Nó bao gồm ba yếu tố chính: Navigation Graph (đồ thị điều hướng), NavHostFragment (vùng chứa màn hình) và NavController (bộ điều khiển chuyển tiếp). Thành phần này tự động quản lý ngăn xếp quay lại và hỗ trợ liên kết sâu.

Trước Navigation Component, các nhà phát triển quản lý fragment thủ công qua FragmentManager. Điều này dẫn đến mã bị phân mảnh: mỗi màn hình có quy tắc điều hướng riêng, trạng thái ngăn xếp quay lại khác nhau và liên kết sâu yêu cầu triển khai riêng. Navigation Component đã thống nhất các kịch bản này. Theo Google (2026), thư viện được cài đặt trong 90% dự án Android mới.

Navigation Component tích hợp với các thư viện Jetpack khác: LiveData, ViewModel, Material Design. Nó hỗ trợ cả fragment XML và Jetpack Compose thông qua tiện ích mở rộng navigation-compose. Phiên bản ổn định — 2.8.x (2025), phiên bản Android tối thiểu — API 14.

NavGraph là tài nguyên XML (res/navigation/nav_graph.xml) xác định tất cả các màn hình ứng dụng và kết nối giữa chúng. Mỗi màn hình là một điểm đến (destination), có thể là Fragment, Activity hoặc Composable. Kết nối giữa các điểm đến là các hành động (action) xác định hướng chuyển tiếp.

xml

<navigation 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"
    app:startDestination="@+id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name=".HomeFragment"
        android:label="Trang chủ"
        tools:layout="@layout/fragment_home">
        <action
            android:id="@+id/action_home_to_detail"
            app:destination="@+id/detailFragment"
            app:enterAnim="@anim/slide_in_right"
            app:exitAnim="@anim/slide_out_left"
            app:popEnterAnim="@anim/slide_in_left"
            app:popExitAnim="@anim/slide_out_right" />
    </fragment>

    <fragment
        android:id="@+id/detailFragment"
        android:name=".DetailFragment"
        android:label="Chi tiết"
        tools:layout="@layout/fragment_detail">
        <argument android:name="itemId"
            app:argType="integer"
            android:defaultValue="0" />
    </fragment>
</navigation>

Thuộc tính startDestination đặt màn hình đầu tiên được hiển thị khi khởi động. Một hành động xác định điểm đến mục tiêu và hoạt ảnh tùy chọn. Đối số mô tả các tham số được truyền đến màn hình — kiểu và giá trị mặc định.

NavHostFragment là vùng chứa được đặt trong bố cục Activity và hiển thị màn hình điều hướng hiện tại. NavHostFragment tự động chuyển đổi fragment khi NavController.navigate() được gọi. NavController là đối tượng quản lý điều hướng: chuyển tiếp, quay lại và kiểm tra tuyến đường hiện tại.

kotlin
// Layout Activity: activity_main.xml
// <androidx.fragment.app.FragmentContainerView
//     android:id="@+id/nav_host_fragment"
//     android:name="androidx.navigation.fragment.NavHostFragment"
//     app:navGraph="@navigation/nav_graph"
//     app:defaultNavHost="true" />

class MainActivity : AppCompatActivity() {

    private val navController by lazy {
        (findViewById<NavHostFragment>(R.id.nav_host_fragment))
            .navController
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // NavigationUI liên kết NavController với AppBar
        setupActionBarWithNavController(navController)
    }

    // Điều hướng đến màn hình chi tiết
    fun openDetail(itemId: Long) {
        val bundle = Bundle().apply {
            putLong("itemId", itemId)
        }
        navController.navigate(R.id.action_home_to_detail, bundle)
    }

    override fun onSupportNavigateUp() = 
        navController.navigateUp() || super.onSupportNavigateUp()
}

app:defaultNavHost="true" là thuộc tính quan trọng: nó chặn nút Quay lại của hệ thống và chuyển quyền điều khiển cho NavController. NavigationUI là tiện ích để liên kết NavController với AppBar, BottomNavigationView, NavigationDrawer. setupActionBarWithNavController kích hoạt mũi tên Quay lại trên các màn hình lồng nhau.

Navigation Component hỗ trợ hoạt ảnh chuyển tiếp tùy chỉnh, được đặt trong hành động hoặc theo chương trình. Hoạt ảnh được xác định bởi bốn thuộc tính: enterAnim (xuất hiện màn hình mới), exitAnim (biến mất màn hình hiện tại), popEnterAnim (xuất hiện khi quay lại) và popExitAnim (biến mất khi quay lại).

xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="100%"
        android:toXDelta="0%"
        android:duration="300" />
</set>

// Chuyển tiếp lập trình với hoạt ảnh
val navOptions = NavOptions.Builder()
    .setEnterAnim(R.anim.slide_in_right)
    .setExitAnim(R.anim.slide_out_left)
    .setPopEnterAnim(R.anim.slide_in_left)
    .setPopExitAnim(R.anim.slide_out_right)
    .build()

navController.navigate(R.id.detailFragment, args, navOptions)

Hoạt ảnh hoạt động với Fragment ở cấp FragmentTransaction. Đối với Jetpack Compose, hoạt ảnh được đặt qua NavOptionsCompat sử dụng Compose Animation. Navigation Component không áp đặt hạn chế về loại hoạt ảnh — translate, scale, alpha và kết hợp của chúng được hỗ trợ.

Safe Args: đối số an toàn kiểu

Safe Args là plugin Gradle để truyền dữ liệu an toàn kiểu giữa các màn hình. Plugin phân tích NavGraph, tạo các lớp Directions và Args với các kiểu trường cụ thể. Việc khớp kiểu được kiểm tra tại thời điểm biên dịch — MissingArgumentException được phát hiện trước khi ứng dụng chạy.

kotlin
// build.gradle (module)
plugins {
    id 'androidx.navigation.safeargs.kotlin'
}

// Safe Args tạo: DetailFragmentArgs, HomeFragmentDirections
// Sử dụng trong HomeFragment:
val action = HomeFragmentDirections
    .actionHomeToDetail(itemId = 42L)
findNavController().navigate(action)

// Sử dụng trong DetailFragment:
private val args: DetailFragmentArgs by navArgs()
// args.itemId có kiểu Long, không thể truyền null

override fun onViewCreated(...) {
    super.onViewCreated(...)
    loadItem(args.itemId)
}

navArgs() là đại biểu Kotlin để lấy đối số trong Fragment hoặc Activity. Plugin hỗ trợ kiểu nguyên thủy, chuỗi, Parcelable, Serializable, Enum và mảng. Đối với các đối tượng phức tạp, hãy truyền ID và tải từ ViewModel hoặc cơ sở dữ liệu.

Deep Link là liên kết bên ngoài mở một màn hình cụ thể của ứng dụng. Navigation Component xử lý liên kết sâu thông qua thuộc tính app:deepLink trong NavGraph. Hệ thống tạo PendingIntent khôi phục ngăn xếp điều hướng đến màn hình mục tiêu hoặc tạo ngăn xếp mới nếu ứng dụng không chạy.

xml

<fragment android:id="@+id/profileFragment"
    android:name=".ProfileFragment">
    <deepLink
        app:uri="https://example.com/profile/{userId}" />
    <argument
        android:name="userId"
        app:argType="string" />
</fragment>

// Tạo Deep Link theo chương trình
val pendingIntent = NavDeepLinkBuilder(context)
    .setGraph(R.navigation.nav_graph)
    .setDestination(R.id.profileFragment)
    .setArguments(Bundle().apply {
        putString("userId", "user_123")
    })
    .createPendingIntent()

Liên kết sâu hỗ trợ mẫu URI với đường dẫn và tham số truy vấn, intent action và loại mime. Trình giữ chỗ ({userId}) tự động ánh xạ đến đối số điểm đến. Navigation Component cũng xử lý liên kết sâu ngầm qua AndroidManifest — chỉ cần thêm intent-filter vào Activity có NavHostFragment.

Navigation Compose (androidx.navigation:navigation-compose) là tiện ích mở rộng của Navigation Component cho Jetpack Compose. API bảo tồn khái niệm NavController và NavHost, nhưng màn hình là các hàm Composable thay vì Fragment. NavHost chấp nhận lambda composable cho mỗi tuyến đường.

kotlin
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {
                val navController = rememberNavController()
                NavHost(
                    navController = navController,
                    startDestination = "home"
                ) {
                    composable("home") {
                        HomeScreen(
                            onItemClick = { id ->
                                navController.navigate("detail/$id")
                            }
                        )
                    }
                    composable(
                        route = "detail/{itemId}",
                        arguments = listOf(
                            navArgument("itemId") {
                                type = NavType.LongType
                            }
                        )
                    ) { backStackEntry ->
                        val itemId = backStackEntry
                            .arguments?.getLong("itemId") ?: 0L
                        DetailScreen(itemId = itemId)
                    }
                }
            }
        }
    }
}

Navigation Compose sử dụng tuyến đường chuỗi thay vì id. Tham số được truyền qua mẫu tuyến đường ("detail/{itemId}") và được trích xuất từ backStackEntry. rememberNavController() bảo tồn NavController qua các lần tái tổ hợp. Để an toàn kiểu trong Compose, mô-đun navigation-compose-type-safety (thử nghiệm) được khuyến nghị.

Câu hỏi thường gặp

NavHost trong Navigation Component là gì?

NavHost là vùng chứa để hiển thị các màn hình điều hướng. Nó được triển khai qua NavHostFragment trong bố cục XML. NavHost theo dõi màn hình hiện tại trong NavGraph và quản lý các chuyển tiếp. Mỗi Activity chứa một NavHostFragment.

Safe Args tốt hơn Bundle như thế nào?

Safe Args là plugin Gradle tạo ra các lớp đối số an toàn kiểu. Bundle yêu cầu chỉ định thủ công khóa và kiểu, dẫn đến lỗi thời gian chạy. Safe Args kiểm tra kiểu tại thời điểm biên dịch và tự động tuần tự hóa dữ liệu.

Làm thế nào để truyền đối tượng phức tạp qua Navigation Component?

Các đối tượng phức tạp được truyền qua ViewModel (chia sẻ giữa các màn hình) hoặc qua cơ sở dữ liệu bằng cách truyền ID. Safe Args chỉ hỗ trợ kiểu nguyên thủy, chuỗi và Parcelable. Google khuyến nghị tránh truyền các đối tượng lớn qua đối số điều hướng.

Liên kết sâu trong Navigation Component hoạt động như thế nào?

Deep Link được cấu hình trong NavGraph qua thuộc tính app:deepLink. Navigation Component tự động xử lý các liên kết đến, tạo PendingIntent qua NavDeepLinkBuilder và khôi phục ngăn xếp điều hướng đến màn hình mục tiêu. Hỗ trợ URI, intent action và loại mime.

Có thể sử dụng Navigation Component với Jetpack Compose không?

Có. Navigation Compose (androidx.navigation:navigation-compose) cung cấp NavHost cho Compose. API tương tự như phiên bản XML, nhưng màn hình là các hàm Composable. NavController được sử dụng giống nhau ở cả hai phiên bản. Google khuyến nghị Navigation Compose cho các dự án Compose mới.

Tổng kết

  • Navigation Component — thư viện Android Jetpack để điều hướng tập trung với NavController, NavHost và NavGraph
  • NavGraph — đồ thị XML mô tả tất cả các màn hình (điểm đến) và kết nối (hành động) giữa chúng
  • NavHostFragment — vùng chứa trong bố cục Activity hỗ trợ thuộc tính defaultNavHost cho nút Quay lại
  • Safe Args — plugin Gradle để truyền đối số an toàn kiểu với kiểm tra kiểu tại thời điểm biên dịch
  • Liên kết sâu hỗ trợ URI, intent action và loại mime với khôi phục tự động ngăn xếp điều hướng
  • Navigation Compose — tiện ích mở rộng cho Jetpack Compose với tuyến đường chuỗi và màn hình composable
  • Navigation Component là phương pháp điều hướng duy nhất được Google khuyến nghị cho các dự án Android mới

Chúng tôi sẽ phát triển ứng dụng di động chìa khóa trao tay

IT Sectr tạo các ứng dụng iOS và Android cho các công ty khởi nghiệp và doanh nghiệp từ năm 2017. Chúng tôi sẽ tư vấn và đề xuất giải pháp tốt nhất cho bạn.

Thảo luận dự án

Đọc thêm