مكون Navigation Component في Kotlin: دليل شامل مع أمثلة

ما هو Navigation Component وما أهميته؟

Navigation Component هي مكتبة من Google لنظام Android، مصممة لتبسيط عملية التنقل بين الشاشات (Fragments، Activities، الحوارات) في تطبيقات Kotlin و Java. وهي جزء من Android Jetpack، وتوفر طريقة موحدة وموثوقة لإدارة الانتقالات ومعالجة الوسائط والتعامل مع زر "الرجوع".

لماذا نحتاج إليها؟ بدون Navigation Component، كان المطورون يكتبون الكثير من الكود المتكرر: إنشاء FragmentManager، معالجة BackStack، نقل البيانات عبر Bundle، ومراقبة حالة الانتقالات. تحل المكتبة هذه المشاكل من خلال تقديم:

• محرر تنقل مرئي — رسم بياني للانتقالات في XML.
• نقل آمن للوسائط عبر Safe Args (إضافة Gradle).
• إدارة تلقائية لـ BackStack — يعمل زر "الرجوع" بشكل صحيح.
• روابط عميقة (Deep Links) — انتقالات من الإشعارات أو الروابط الخارجية.
• رسوم متحركة للانتقالات — إعدادات بسيطة في XML.

تثبيت Navigation Component

بما أن Navigation Component هي مكتبة لنظام Android، يتم التثبيت عبر نظام بناء Gradle، وليس عبر pip أو npm. أضف التبعيات إلى ملف build.gradle (مستوى الوحدة، عادةً app/build.gradle):

// build.gradle (Module: app)
plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
    id 'androidx.navigation.safeargs.kotlin' // لـ Safe Args
}

android {
    // ... الإعدادات القياسية
}

dependencies {
    implementation 'androidx.navigation:navigation-fragment-ktx:2.7.7'
    implementation 'androidx.navigation:navigation-ui-ktx:2.7.7'
    // للعمل مع الميزات الديناميكية (Feature Modules)
    implementation 'androidx.navigation:navigation-dynamic-features-fragment:2.7.7'
}

تأكد أيضًا من إضافة إضافة Safe Args في ملف build.gradle الرئيسي:

// build.gradle (Project level)
plugins {
    id 'androidx.navigation.safeargs.kotlin' version '2.7.7' apply false
}

بعد مزامنة Gradle، تصبح المكتبة جاهزة للاستخدام.

بداية سريعة مع مثال عملي

لننشئ تطبيقًا بسيطًا بشاشتين: HomeFragment و DetailFragment. يضغط المستخدم على زر في الشاشة الأولى لينتقل إلى الثانية، مع تمرير نص.

الخطوة 1: إنشاء ملف التنقل

في المجلد res/navigation، أنشئ ملفًا باسم nav_graph.xml:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_graph"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.app.HomeFragment"
        android:label="الرئيسية"
        tools:layout="@layout/fragment_home">
        <action
            android:id="@+id/action_homeFragment_to_detailFragment"
            app:destination="@id/detailFragment" />
    </fragment>

    <fragment
        android:id="@+id/detailFragment"
        android:name="com.example.app.DetailFragment"
        android:label="التفاصيل"
        tools:layout="@layout/fragment_detail">
        <argument
            android:name="message"
            app:argType="string" />
    </fragment>
</navigation>

الخطوة 2: إعداد Activity

في ملف activity_main.xml، أضف NavHostFragment:

<?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"
    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:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />
</androidx.constraintlayout.widget.ConstraintLayout>

الخطوة 3: التنقل بين الشاشات

في HomeFragment، استخدم الكود التالي للتنقل عند الضغط على زر:

// داخل HomeFragment.kt
val button = view.findViewById<Button>(R.id.navigate_button)
button.setOnClickListener {
    val action = HomeFragmentDirections.actionHomeFragmentToDetailFragment("مرحباً من الشاشة الرئيسية!")
    findNavController().navigate(action)
}

في DetailFragment، استقبل الوسيطة:

// داخل DetailFragment.kt
val args: DetailFragmentArgs by navArgs()
val message = args.message
// استخدم المتغير message في واجهة المستخدم

الطرق الأساسية في Navigation Component

إليك أهم الطرق التي ستستخدمها يوميًا:

1. التنقل باستخدام NavController

findNavController().navigate(R.id.action_id) — الطريقة الأساسية للتنقل. يمكنك استخدام معرف الإجراء (action) أو معرف الوجهة (destination).

2. تمرير الوسائط بأمان (Safe Args)

باستخدام إضافة Safe Args، يتم إنشاء فئات Directions و Args تلقائيًا. هذا يمنع أخطاء وقت التشغيل الناتجة عن أنواع الوسائط غير الصحيحة.

3. إدارة BackStack

navigateUp() — للعودة إلى الشاشة السابقة. popBackStack() — للعودة إلى وجهة محددة مع إزالة الوجهات الوسيطة.

4. التعامل مع Deep Links

أضف روابط عميقة في ملف التنقل لفتح تطبيقك من الإشعارات أو الروابط الخارجية:

<deepLink app:uri="myapp://detail/{message}" />

نصائح إضافية للمطورين العرب

عند العمل مع Navigation Component، تأكد من استخدام أحدث إصدار متاح (حاليًا 2.7.7). يمكنك متابعة التحديثات عبر الموقع الرسمي للمطورين. أيضًا، استخدم Android Studio للحصول على الدعم البصري لتحرير الرسوم البيانية للتنقل.