Navigation Component — що це, NavHost і Navigation Graph

Автор: IT Sectr Опубліковано: 2026-02-22 Час читання: 7 хв

Navigation Component — бібліотека Android Jetpack для реалізації навігації між екранами додатку. Компонент централізує управління стеком фрагментів, глибокими посиланнями та передачею аргументів. Входить до складу Jetpack з 2018 року та рекомендований Google для всіх нових проектів. Детальніше читайте в офіційному керівництві Google.

Головне

  • Navigation Component — бібліотека Jetpack для централізованої навігації між екранами Android
  • NavGraph — XML-ресурс, що описує всі екрани та зв'язки між ними
  • NavHostFragment — контейнер у layout Activity, що відображає поточний екран навігації
  • NavController — об'єкт управління навігацією: navigate, popBackStack, navigateUp
  • Safe Args — Gradle плагін для типобезпечної передачі аргументів між екранами

Що таке Navigation Component?

Navigation Component — бібліотека Android Jetpack (androidx.navigation), що надає єдиний API для навігації. Включає три ключові елементи: Navigation Graph (граф навігації), NavHostFragment (контейнер для екранів) та NavController (контролер переходів). Компонент автоматично управляє back stack та підтримує deep links.

До Navigation Component розробники керували фрагментами вручну через FragmentManager. Це призводило до фрагментованого коду: кожен екран мав свої правила навігації, стани back stack відрізнялися, deep links вимагали окремої реалізації. Navigation Component уніфікував ці сценарії. За даними Google (2026), бібліотека встановлена в 90% нових Android-проектів.

Navigation Component інтегрується з іншими бібліотеками Jetpack: LiveData, ViewModel, Material Design. Підтримує як XML-фрагменти, так і Jetpack Compose через розширення navigation-compose. Стабільний реліз — 2.8.x (2025), мінімальна версія Android — API 14.

NavGraph — XML-ресурс (res/navigation/nav_graph.xml), що визначає всі екрани додатку та зв'язки між ними. Кожен екран — це вузол (destination), який може бути Fragment, Activity або Composable. Зв'язки між вузлами — action, які задають напрямок переходу.

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="Головна"
        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="Деталі"
        tools:layout="@layout/fragment_detail">
        <argument android:name="itemId"
            app:argType="integer"
            android:defaultValue="0" />
    </fragment>
</navigation>

Атрибут startDestination задає перший екран, який відображається при запуску. Action визначає цільовий destination та опціональні анімації. Аргументи (argument) описують параметри, що передаються на екран — тип та значення за замовчуванням.

NavHostFragment — контейнер, який розміщується в layout Activity та відображає поточний екран навігації. NavHostFragment автоматично перемикає фрагменти при виклику NavController.navigate(). NavController — об'єкт, що управляє навігацією: перехід, повернення, перевірка поточного маршруту.

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 зв'язує NavController з AppBar
        setupActionBarWithNavController(navController)
    }

    // Перехід на екран деталей
    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" — важливий атрибут: він перехоплює системну кнопку «Назад» і передає управління NavController. NavigationUI — утиліта для зв'язування NavController з AppBar, BottomNavigationView, NavigationDrawer. setupActionBarWithNavController включає стрілку «Вгору» на вкладених екранах.

Navigation Component підтримує кастомні анімації переходів, що задаються в action або програмно. Анімації визначаються чотирма атрибутами: enterAnim (поява нового екрану), exitAnim (зникнення поточного), popEnterAnim (поява при поверненні) та popExitAnim (зникнення при поверненні).

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>

// Програмний перехід з анімацією
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)

Анімації працюють з Fragment на рівні FragmentTransaction. Для Jetpack Compose анімації задаються через NavOptionsCompat з використанням Compose Animation. Navigation Component не накладає обмежень на тип анімації — підтримуються translate, scale, alpha та їх комбінації.

Safe Args: типобезпечні аргументи

Safe Args — Gradle плагін для типобезпечної передачі даних між екранами. Плагін аналізує NavGraph, генерує класи Directions та Args з конкретними типами полів. На етапі компіляції перевіряється відповідність типів — помилка MissingArgumentException виявляється до запуску додатку.

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

// Safe Args генерує: DetailFragmentArgs, HomeFragmentDirections
// Використання в HomeFragment:
val action = HomeFragmentDirections
    .actionHomeToDetail(itemId = 42L)
findNavController().navigate(action)

// Використання в DetailFragment:
private val args: DetailFragmentArgs by navArgs()
// args.itemId має тип Long, null не може бути переданий

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

navArgs() — Kotlin делегат для отримання аргументів у Fragment або Activity. Плагін підтримує примітиви, рядки, Parcelable, Serializable, Enum та масиви. Для складних об'єктів використовуйте передачу ID із завантаженням з ViewModel або бази даних.

Deep Link — зовнішнє посилання, що відкриває конкретний екран додатку. Navigation Component обробляє deep links через атрибут app:deepLink в NavGraph. Система створює PendingIntent, який відновлює стек навігації до цільового екрану, або створює новий стек, якщо додаток не запущено.

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>

// Програмне створення Deep Link
val pendingIntent = NavDeepLinkBuilder(context)
    .setGraph(R.navigation.nav_graph)
    .setDestination(R.id.profileFragment)
    .setArguments(Bundle().apply {
        putString("userId", "user_123")
    })
    .createPendingIntent()

Deep Links підтримують шаблони URI з шляхами та query-параметрами, intent action та mime type. Placeholder ({userId}) автоматично зіставляється з аргументом destination. Navigation Component також обробляє implicit deep links через AndroidManifest — достатньо додати intent-filter до Activity з NavHostFragment.

Navigation Compose (androidx.navigation:navigation-compose) — розширення Navigation Component для Jetpack Compose. API зберігає концепцію NavController та NavHost, але екрани — Composable функції замість Fragment. NavHost приймає composable лямбду для кожного маршруту.

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 використовує рядкові маршрути замість id. Параметри передаються через шаблон route ("detail/{itemId}") та витягуються з backStackEntry. rememberNavController() зберігає NavController при рекомпозиції. Для Type Safety в Compose рекомендується модуль navigation-compose-type-safety (експериментальний).

Часто задавані питання

Що таке NavHost в Navigation Component?

NavHost — контейнер для відображення екранів навігації. Реалізується через NavHostFragment в XML layout. NavHost відстежує поточний екран в NavGraph та керує переходами. Кожне Activity містить один NavHostFragment.

Чим Safe Args кращий за Bundle?

Safe Args — Gradle плагін, що генерує типобезпечні класи аргументів. Bundle вимагає ручного вказання ключів та типів, що призводить до помилок часу виконання. Safe Args перевіряє типи на етапі компіляції та автоматично серіалізує дані.

Як передати складні об'єкти через Navigation Component?

Складні об'єкти передаються через ViewModel (спільну для екранів) або через базу даних з передачею ID. Safe Args підтримує тільки примітиви, рядки та Parcelable. Google рекомендує уникати передачі великих об'єктів через аргументи навігації.

Як працює Deep Link в Navigation Component?

Deep Link налаштовується в NavGraph через атрибут app:deepLink. Navigation Component автоматично обробляє вхідні посилання, створює PendingIntent через NavDeepLinkBuilder та відновлює стек навігації до цільового екрану. Підтримує URI, intent action та mime type.

Чи можна використовувати Navigation Component з Jetpack Compose?

Так. Navigation Compose (androidx.navigation:navigation-compose) надає NavHost для Compose. API аналогічний XML-версії, але екрани — Composable функції. NavController використовується однаково в обох версіях. Google рекомендує Navigation Compose для нових проектів на Compose.

Підсумки

  • Navigation Component — бібліотека Android Jetpack для централізованої навігації з NavController, NavHost та NavGraph
  • NavGraph — XML-граф, що описує всі екрани (destination) та зв'язки (action) між ними
  • NavHostFragment — контейнер в layout Activity, що підтримує атрибут defaultNavHost для кнопки «Назад»
  • Safe Args — Gradle плагін для типобезпечної передачі аргументів з перевіркою типів на етапі компіляції
  • Deep Links підтримують URI, intent action та mime type з автоматичним відновленням стеку навігації
  • Navigation Compose — розширення для Jetpack Compose з рядковими маршрутами та composable екранами
  • Navigation Component — єдиний рекомендований Google спосіб навігації в нових Android-проектах

Ми розробимо мобільний застосунок під ключ

IT Sectr створює застосунки для iOS та Android для стартапів і бізнесу з 2017 року. Ми проконсультуємо вас і запропонуємо найкраще рішення.

Обговорити проект

Читайте також