Navigation Component — این چیست، NavHost و Navigation Graph

نویسنده: IT Sectr منتشر شده: 2026-02-22 زمان مطالعه: 7 دقیقه

Navigation Component — کتابخانه Android Jetpack برای پیاده‌سازی ناوبری بین صفحات برنامه. این مؤلفه مدیریت پشته فرگمنت‌ها، لینک‌های عمیق و انتقال آرگومان‌ها را متمرکز می‌کند. از سال 2018 بخشی از Jetpack است و توسط 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 (کنترل‌کننده انتقال‌ها). این مؤلفه به طور خودکار پشته بازگشت را مدیریت کرده و از deep links پشتیبانی می‌کند.

پیش از Navigation Component، توسعه‌دهندگان فرگمنت‌ها را به صورت دستی از طریق FragmentManager مدیریت می‌کردند. این امر منجر به کد تکه‌تکه می‌شد: هر صفحه قوانین ناوبری خود را داشت، وضعیت‌های پشته بازگشت متفاوت بود و 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)

انیمیشن‌ها در سطح FragmentTransaction با Fragment کار می‌کنند. برای 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 پشتیبانی می‌کند. جایگذار ({userId}) به طور خودکار با آرگومان destination مطابقت داده می‌شود. Navigation Component همچنین deep links ضمنی را از طریق AndroidManifest مدیریت می‌کند — کافی است intent-filter به Activity حاوی NavHostFragment اضافه کنید.

Navigation Compose (androidx.navigation:navigation-compose) — افزونه Navigation Component برای Jetpack Compose. API مفهوم NavController و NavHost را حفظ می‌کند، اما صفحات به جای Fragment توابع Composable هستند. 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 در layout XML پیاده‌سازی می‌شود. 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 به طور خودکار لینک‌های ورودی را مدیریت می‌کند، از طریق NavDeepLinkBuilder یک PendingIntent ایجاد کرده و پشته ناوبری را تا صفحه مقصد بازمی‌گرداند. از 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 از سال 2017 برنامه‌های iOS و Android را برای استارتاپ‌ها و کسب‌وکارها ایجاد می‌کند. ما به شما مشاوره می‌دهیم و بهترین راه‌حل را پیشنهاد خواهیم کرد.

بحث درباره پروژه

همچنین بخوانید