شروحات اندرويد ستوديو : شرح انشاء Navigation component والتعامل مع التعامل مع Fragment Graph داخل Android Studio

Ahmed Mahmoud

اخر تحديث :

شرح Navigation component بالعربي داخل برنامج اندرويد ستوديو Android Studio بالعربي

في الدروس السابقة من شروحات الفراجمنت Fragment بالعربي تعرفنا على كيفية انشاء fragment من داخل برنامج الاندرويد استوديو - Android Studio وكيفية ربطها ببعضها البعض وتمرير البيانات بينهم والانتقال من فراجمنت الى فراجمنت اخرى وتقريبا شرحنا كل شيء حول هذه القضية ولكن في هذه المقالة سوف نقدم لك fragment ولكن بصوره مختلفه وبشكل احدث حيث سوف نقوم بعمل وانشاء اكثر من فراجمنت وربطهم ببعض عن طريق Graph وهذه الطريقة تعد اسهل وابسط من الطرق التي قدمناها سابقا ولكن لا يصح ان نقدم لكم السهل ثم الصعب نحن نريد ان نشرح لكم جميع الطرق لكي تفهم الالية التي تعمل بها هذه الخاصية المهمة داخل برنامج الاندرويد استوديو Android Studio ويعد Graph احدث الطرق المستخدمة حاليا في Fragment وكثير من الناس يحبها ويفضلها ولكن البعض لا يحبها ويفضل الطريقة العادية والتي شرحناها لكم في الدروس السابق حيث في هذه المقالة سوف نشرح لكم كيفية انشاء graph يحتوي على فراجمنت وربطهم ببعضها البعض و كيفيه الانتقال من فراجمنت الى فراجمنت أخرى بكل بساطة وفي الدرس القادم بإذن الله تعالى سوف نتعرف على كيفية نقل البيانات من فراجمنت الى فراجمنت اخرى بطريقه سهله وبسيطه لذلك تابع الشرح الى النهايه .

ماهو برنامج اندرويد ستوديو Android Studio وكيف يعمل

يعتبر برنامج الاندرويد استوديو Android Studio واحد من اقوى البرامج المتخصصة في تصميم وتطوير تطبيقات الاندرويد وهو من تطوير العملاق جوجل google حيث يعمل البرنامج في بيئة sdk وهو برنامج مجاني ومتوفر على الموقع الرسمي للاندرويد ستوديو Free يمكنك تحميله و تثبيته بشكل مجاني ولكن يجب عليك تثبيت حزمه jdk حتى يعمل البرنامج معك ,

نظام كتابة الاكواد داخل الاندرويد ستوديو يكون اما بلغه الجافا او الكوتلن ولكن في هذه الدروس المقدمة حاليا نشرح لكم بالجافا ولكن في الدروس المقبلة إن شاء الله سوف نقدم لكم شروحات داخل لغة الكوتلن يمكنك إنشاء تطبيقاتك عن طريق استخدام احدى اللغتين السابقتين وايضا يوجد فلتر وهو يعمل بلغة تدعي " دارت " حيث يتم كتابة الكود البرمجي بداخله ويعمل على مختلف الأنظمة مثل الاندرويد والايفون والويب وغيرها وسوف نتناول في الأيام المقبلة باذن الله الشروحات حول الفلاتر ولكن هذا ليس درسنا اليوم و اذا كنت مبتدئ في البرمجة فانصحك تعلم لغة جافا وقد سبق ان قدمنا لكم فيها دروس على موقعنا انصحك بالتوجه اليها ولا ننصحك بالاستعانة بالبرامج التي تساعدك في انشاء تطبيقاتك بدون لغه برمجه فهي لن تحسن من مستواك في البرمجة و سوف تصبح مقيد في تصميم وتنفيذ مجموعه محدده من التطبيقات ولكن بتعلمك لغات البرمجة سوف تستطيع باذن الله ان شاء مشاريع وتطبيقات بجميع الافكار التي تريدها ويمكنك ايضا وضع اعلانات في التطبيق والربح من خلاله .

خطوات اضافة Navigation component داخل ألاندرويد ستوديو

اولا توجة الى build gradle وقم بإضافة التالي

dependencies {
    def nav_version = "2.3.4"
    implementation "androidx.navigation:navigation-fragment:$nav_version"
    implementation "androidx.navigation:navigation-ui:$nav_version"
}

وايضا لا تنسى ان تضيف التالي

plugins {
    id 'androidx.navigation.safeargs'
}

الان توجة الى build gradle ولكن project وقم بإضافة التالي

dependencies {
def nav_version = "2.3.4"
classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
 }

الان تم الانتهاء من اضافة البيانات لا تنسى الضغط على sync now بعد الاضافة لكي يتم التثبيت .

الان توجة الى ملف res وقم بالنقر كلك يمين ومن ثم اختيار New Resource Directory ومنه اختر navigation ومن ثم النقر على موافق كما بالصورة .

الان من ملف navigation كلك يمين ايضا واختيار New Resource File وبعدها قم بكتابة الاسم الذي سوف يظهر به المخطط او Fragment Graph وهنا قمت بتسميتة بي main_graph

قم الان بإنشاء 3 انواع من Fragment على سبيل التجربة " يمكنك ان تجرب على 2 فقط او اكثر " وهنا قمت بتسميتهم بي AFragment و BFragment و CFragment كما بالصورة .

الان كل فراجمنت منهم تحتوي على نص وهو مرحبا فراجمنت واسم Fragment نفسها سواء A , B , C كما بالصورة ولكن فراجمنت A تختلف قليلا لانها تحتوي على زرين واحد للانتقال الى الفراجمنت B و الاخر للانتقال الى Fragment C كما بالصورة .

توجة الان الى Main Activity وهي الاكتفتي التي سوف يتم عرض بها الفراجمنت حيث اننا نريد عرض اول فراجمنت وهي Fragment A لذلك توجة الى Palette ومنها اختر Containers ومن NavHostFragment وقم بسحبه الى المنتصف وبعدها حدد اسم navigation وهنا كان اسمه main_graph بعدها انقر على ok, ولكن تأكد انك تستخدم constraintlayout وليس LinearLayout وتأكد ان الطول والعرض match_parent لكي تظهر جميع محتويات الفراجمنت الاولى

هذة الخطوة يجب القيام بها وهي تعني ان في activity main xml اول ما يعمل يقوم بتغشيل fragment واول fragment يعمل هو ال home في main grap .

الان توجة الى main_graph وقم بإضافة جميع الاكتفتي التي تريدها ولكن تذكر ان اول اضافة سوف تكون الرئيسيه والتي سوف تظهر في Main Activity وهنا سوف اسحب Fargment A في البداية والباقي بعدها .

الان بعد اضافتك للفراجمنت انقر على اي واحده منهم وسوف تشاهد ظهور نقطة في النهايه كل ما عليك هو النقر عليها وسحبها لاي فراجمنت اخرى وهي تعني ان هذة الفراجمنت يمكنها ان تنتقل الى الفراجمنت الاخرى التي سوف ترسل السهم لها , في هذة الحالة جعلت Fragment A يتصل بي B و C وهذا يعني ان فراجمنت A يمكن ان تذهب الى B و C ولكن B لا يمكنها التوجة الى C لاني لم اسحب بينهم سهم .

الان توجة الى الكود الخاص بي فراجمنت A , قم بتعريف Button و NavController وهي المسؤولة عن عملية الانتقال كما بالصورة , وعمل لهم setOnClickListener وبعدها قمنا بعمل switch بين الازرار حيث وهما fragment_b و fragment_c فإذا نقر المستخدم على btn_fragment_b سوف تكتب بعدها navController.navigate وبعدها تقوم بكتابة R.id وبعدها اسم id الخاص بسهم الانتقال والذي يمكنك الحصول عليه من خلال التوجة الى main_graph مره اخرى والنقر على السهم وسوف يظهر لك اي دي السهم كل ما عليك هو كتابة وهنا كررت العملية مرتين مره مع CFragment والاخرى مع BFragment فقط هذا كل ما في الامر يمكنك عمل run والتجربة .

عندما يتوجه المستخدم من فراجمنت الى فراجمنت اخرى وضغط على زر العودة سوف يقوم بإرجاعه الى الفراجمنت السابقة ولكن اذا كانت تحتوي على تسجيل دخول او غيره فالحل بكل بساطة لكي تمنع الرجوع واذا قام بالرجوع يخرج من التطبيق ان تتوجة الى main_graph ومن ثم تحدد السهم وتأتي من قائمة pop behavior اختر popUpTo ومنها حدد اسم الجراف كما بالصورة , الان اذا انتقل المستخدم الى CFragment وقرر الرجوع الى الخلف سوف يغلق التطبيق .