المحتوى

• ما هو مكون هندسة الملاحة؟
• إضافة محرر التنقل إلى Android Studio
• تبعيات المشروع: جزء التنقل والملاحة واجهة المستخدم
• احصل على نظرة عامة مرئية حول التنقل في تطبيقك
• نشر الرسم البياني للملاحة: إضافة وجهات
• تحديث تخطيطات الجزء الخاص بك
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• ربط وجهاتك مع الإجراءات
• استضافة الرسم البياني للملاحة
• تحريك التحولات مع NavController
• إضافة المزيد من التنقل
• إنشاء الرسوم المتحركة الانتقالية المخصصة
• تغليف

خلال مؤتمر I / O لعام 2018 ، أعلنت Google عن نهج جديد لتطوير تطبيقات Android.

تتمثل توصية Google الرسمية في إنشاء نشاط واحد يكون بمثابة نقطة الدخول الرئيسية للتطبيق ، ثم تسليم بقية محتوى التطبيق الخاص بك على شكل أجزاء.

في حين أن التفكير في التعامل مع كل تلك المعاملات المختلفة ودورات الحياة قد يبدو وكأنه كابوس ، فقد أطلقت Google في I / O 2018 أيضًا Navigation Architecture Component الذي تم تصميمه لمساعدتك في اعتماد هذا النوع من بنية النشاط الفردية.

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

ما هو مكون هندسة الملاحة؟

جزءًا من Android JetPack ، يساعدك Navigation Architecture Component على تصور الطرق المختلفة من خلال التطبيق الخاص بك ويبسط عملية تنفيذ هذه المسارات ، لا سيما عندما يتعلق الأمر بإدارة معاملات التجزئة.

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

يتكون رسم التنقل من:

• الأماكن: الشاشات الفردية التي يمكن للمستخدم الانتقال إليها
• أفعال: الطرق التي يمكن للمستخدم اتباعها بين وجهات تطبيقك

يمكنك عرض تمثيل مرئي لمخطط التنقل في مشروعك في محرر التنقل في Android Studio. أدناه ، ستجد رسم بياني للملاحة يتكون من ثلاث وجهات وثلاثة إجراءات كما يظهر في محرر التنقل.

تم تصميم مكون التنقل لمساعدتك في تنفيذ بنية التطبيق الجديدة الموصى بها من Google ، حيث يستضيف نشاط واحد رسم التنقل ، ويتم تنفيذ جميع وجهاتك على شكل أجزاء. في هذه المقالة ، سنتبع هذا النهج الموصى به وننشئ تطبيقًا يتكون من MainActivity وثلاث وجهات شظية.

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

إضافة محرر التنقل إلى Android Studio

لمساعدتك في الحصول على أقصى استفادة من مكون التنقل ، يتميز Android Studio 3.2 Canary والإصدارات الأحدث بمحرك تنقل جديد.

لتمكين هذا المحرر:

• حدد "Android Studio> تفضيلات ..." من شريط قائمة Android Studio.
• في القائمة اليسرى ، اختر "تجريبي".
• إذا لم تكن محددة بالفعل ، فحدد مربع الاختيار "تمكين محرر التنقل".

• انقر فوق موافق."
• أعد تشغيل Android Studio.

تبعيات المشروع: جزء التنقل والملاحة واجهة المستخدم

قم بإنشاء مشروع جديد بالإعدادات التي تختارها ، ثم افتح ملف build.gradle الخاص به وقم بإضافة جزء التنقل و uI للملاحة كتبعيات للمشروع:

تبعيات {application fileTree (dir: libs ، include:) ، com com.android.support:appcompat-v7:28.0.0 application com.android.support.constraint: constraint-layout: 1.1.3 // إضافة التطبيق // التالي "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI يوفر الوصول إلى بعض وظائف المساعد // application "android.arch.navigation: navigation-ui: 1.0.0-alpha05" com com .android.support: support-v4: 28.0.0 testImitation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 androidTestImplementation com.android.support.test.espresso: espresso-core: 3.0.2 }

احصل على نظرة عامة مرئية حول التنقل في تطبيقك

لإنشاء رسم بياني للملاحة:

• انقر مع الضغط على Control على دليل "res" الخاص بمشروعك واختر "New> Android Resource Directory."
• افتح القائمة المنسدلة "نوع المورد" واختر "التنقل".
• اختر "موافق".
• انقر مع الضغط على Control على دليل "res / navigation" الجديد وحدد "New> ملف موارد التنقل."
• افتح القائمة المنسدلة "نوع المورد" وحدد "التنقل".

• إعطاء اسم الملف هذا ؛ أنا أستخدم "nav_graph".
• انقر فوق موافق."

افتح ملف "res / navigation / nav_graph" ، وسيتم تشغيل "محرر التنقل" تلقائيًا. على غرار محرر التخطيط ، يتم تقسيم محرر التنقل إلى علامتي تبويب "تصميم" و "نص".

إذا حددت علامة التبويب "نص" ، فسترى XML التالي:

<؟ xml version = "1.0" encoding = "utf-8"؟> // Navigation 'هي العقدة الجذرية لكل رسم بياني للتنقل //

علامة التبويب "التصميم" هي المكان الذي يمكنك فيه إنشاء التنقل في تطبيقك وتعديله بشكل مرئي.

من اليسار إلى اليمين ، يتكون محرر التنقل من:

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

نشر الرسم البياني للملاحة: إضافة وجهات

الرسم البياني للملاحة الخاص بنا فارغ حاليًا. دعنا نضيف بعض الوجهات

يمكنك إضافة أنشطة أو أجزاء موجودة بالفعل ، ولكن يمكنك أيضًا استخدام Graph Navigation لإنشاء أجزاء جديدة بسرعة وسهولة:

• أعط زر "وجهة جديدة" نقرة ، واختر "إنشاء وجهة فارغة".

• في حقل "اسم القطعة" ، أدخل اسم فئة الجزء الخاص بك ؛ أنا أستخدم "FirstFragment".
• تأكد من تحديد خانة الاختيار "إنشاء تخطيط XML".
• أكمل حقل "Fragment Layout Name" ؛ أنا أستخدم "fragment_first".
• انقر فوق "إنهاء".

سيتم الآن إضافة فئة فرعية من FirstFragment وملف مورد تخطيط "fragment_first.xml" المطابق إلى مشروعك. سيظهر FirstFragment أيضًا كوجهة في الرسم البياني للتنقل.

إذا قمت بتحديد FirstFragment في "محرر التنقل" ، فستعرض لوحة "السمات" بعض المعلومات حول هذه الوجهة ، مثل اسم الفئة والمعرف الذي ستستخدمه للإشارة إلى هذه الوجهة في مكان آخر في الكود.

شطف وكرر لإضافة SecondFragment و ThirdFragment إلى المشروع الخاص بك.

قم بالتبديل إلى علامة التبويب "نص" وسترى أن XML قد تم تحديثه ليعكس هذه التغييرات.

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

إذا كنت تفضل استخدام نقطة بداية مختلفة ، فحدد النشاط أو الجزء المعني ، ثم حدد "Set Start Destination" من لوحة "Attributes".

بدلاً من ذلك ، يمكنك إجراء هذا التغيير على مستوى الرمز:

تحديث تخطيطات الجزء الخاص بك

الآن لدينا وجهاتنا ، دعونا نضيف بعض عناصر واجهة المستخدم بحيث يكون من الواضح دائمًا الجزء الذي نعرضه حاليًا.

سأضيف ما يلي إلى كل جزء:

• عرض نصي يحتوي على عنوان الجزء
• زر يتيح للمستخدم التنقل من جزء إلى آخر

إليك الرمز الخاص بكل ملف مورد تخطيط:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

ربط وجهاتك مع الإجراءات

الخطوة التالية هي ربط وجهاتنا عبر الإجراءات.

يمكنك إنشاء إجراء في محرر التنقل باستخدام السحب والإفلات البسيطة:

• تأكد من تحديد علامة التبويب "التصميم" الخاصة بالمحرر.
• حرك مؤشر الماوس فوق الجانب الأيمن من الوجهة التي تريد التنقل فيها من عندوهو في هذه الحالة هو FirstFragment. يجب أن تظهر دائرة.
• انقر واسحب المؤشر إلى الوجهة التي تريد التنقل فيها إلىوهو SecondFragment. يجب أن يظهر خط أزرق. عند تمييز SecondFragment باللون الأزرق ، حرر المؤشر لإنشاء رابط بين هذه الوجهات.

يجب أن يكون هناك الآن سهم إجراء يربط FirstFragment بـ SecondFragment. انقر لتحديد هذا السهم ، وسيتم تحديث لوحة "السمة" لعرض بعض المعلومات حول هذا الإجراء ، بما في ذلك المعرف المخصص للنظام.

ينعكس هذا التغيير أيضًا في XML Navigation في XML:

… … …

شطف وكرر لإنشاء إجراء يربط SecondFragment إلى ThirdFragment وإجراء يربط ThirdFragment إلى FirstFragment.

استضافة الرسم البياني للملاحة

يوفر التنقل في الرسم البياني تمثيلًا مرئيًا للوجهات والإجراءات في تطبيقك ، لكن استدعاء هذه الإجراءات يتطلب بعض التعليمات البرمجية الإضافية.

بمجرد إنشاء رسم بياني للملاحة ، ستحتاج إلى استضافته داخل أحد الأنشطة عن طريق إضافة NavHostFragment إلى ملف تخطيط ذلك النشاط. يوفر NavHostFragment هذا حاوية يمكن أن يحدث فيها التنقل وسيكون مسؤولًا أيضًا عن تبديل الأجزاء الداخلية والخارجية أثناء تنقل المستخدم حول تطبيقك.

افتح ملف "activity_main.xml" في مشروعك وأضف NavHostFragment.

<؟ xml version = "1.0" encoding = "utf-8"؟> // قم بإنشاء جزء يعمل كـ NavHostFragment //

في التعليمة البرمجية أعلاه ، التطبيق: defaultNavHost = "true" يسمح لمضيف التنقل باعتراض كلما تم الضغط على زر "رجوع" في النظام ، لذلك يكرم التطبيق دائمًا التنقل الموضح في الملاحة في الرسم البياني الخاص بك.

تحريك التحولات مع NavController

بعد ذلك ، نحتاج إلى تطبيق NavController ، وهو مكون جديد مسؤول عن إدارة عملية التنقل داخل NavHostFragment.

للتنقل إلى شاشة جديدة ، تحتاج إلى استرداد NavController باستخدام Navigation.findNavController ، استدعاء الأسلوب navigate () ، ثم تمرير إما معرف الوجهة التي تتنقل إليها أو الإجراء الذي تريد استدعاءه. على سبيل المثال ، أقوم باستدعاء "action_firstFragment_to_secondFragment" ، والذي سينقل المستخدم من FirstFragment إلى SecondFragment:

NavController navController = Navigation.findNavController (getActivity ()، R.id.my_nav_host_fragment)؛ navController.navigate (R.id.action_firstFragment_to_secondFragment)؛

سينتقل المستخدم إلى شاشة جديدة عن طريق النقر فوق زر ، لذلك نحتاج أيضًا إلى تطبيق OnClickListener.

بعد إجراء هذه التغييرات ، يجب أن يبدو FirstFragment كالتالي:

استيراد android.os.Bundle ؛ استيراد android.support.annotation.NonNull؛ استيراد android.support.annotation.Nullable؛ استيراد android.support.v4.app.Fragment ؛ استيراد android.view.LayoutInflater ؛ استيراد android.view.View ؛ استيراد android.view.ViewGroup ؛ استيراد android.widget.Button ؛ استيراد androidx.navigation.NavController ؛ استيراد androidx.navigation.Navigation ؛ الطبقة العامة FirstFragment تمدد Fragment {public FirstFragment () {}Override public void onCreate (Bundle saveInstanceState) {super.onCreate (saveInstanceState)؛ if (getArguments ()! = null) {}}Override public عرض onCreateView (LayoutInflater inflater، ViewGroup container، Bundle saveInstanceState) {return inflater.inflate (R.layout.fragment_first، container، false)؛ }Override public void onViewCreated (NonNull View view ،Nullable Bundle saveInstanceState) {Button button = (Button) view.findViewById (R.id.button)؛ button.setOnClickListener (جديد View.OnClickListener () {Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity ()، R.id.my_nav_host_fragment)؛ navController.navigate؛ }}) ؛ }}

بعد ذلك ، افتح MainActivity وأضف ما يلي:

• NavigationView.OnNavigationItemSelectedListener: مستمع للتعامل مع الأحداث على عناصر التنقل
• SecondFragment.OnFragmentInteractionListener: واجهة تم إنشاؤها عندما قمت بإنشاء SecondFragment عبر محرر التنقل

تحتاج MainActivity أيضًا إلى تطبيق أسلوب onFragmentInteraction () ، والذي يسمح بالاتصال بين الجزء والنشاط.

استيراد android.support.v7.app.AppCompatActivity؛ استيراد android.os.Bundle ؛ استيراد android.net.Uri ؛ استيراد android.view.MenuItem؛ استيراد android.support.design.widget.NavigationView؛ استيراد android.support.annotation.NonNull؛ تمد MainActivity من الفئة العامة بتطبيق AppCompatActivity NavigationView.OnNavigationItemSelectedListener، SecondFragment.OnFragmentInteractionListener {Override محمية void onCreate (Bundle saveInstanceState) {super.onCreate (saveInstanceState)؛ setContentView (R.layout.activity_main)؛ }Override public boolean onNavigationItemSelected (NonNull MenuItem item) {return false؛ }Override public void onFragmentInteraction (Uri uri) {}}

إضافة المزيد من التنقل

لتنفيذ بقية التنقل في تطبيقنا ، نحتاج فقط إلى نسخ / لصق كتلة onViewCreated وإجراء بعض التعديلات بحيث نشير إلى عناصر واجهة المستخدم الصحيحة وإجراءات التنقل.

افتح SecondFragment الخاص بك وإضافة ما يلي:

Override public void onViewCreated (NonNull View view ،Nullable Bundle saveInstanceState) {Button button = (Button) view.findViewById (R.id.button2)؛ button.setOnClickListener (جديد View.OnClickListener () {Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity ()، R.id.my_nav_host_fragment)؛ navController.navigate؛ }}) ؛ }

ثم ، قم بتحديث كتلة onViewCreated الخاصة بـ ThirdFragment:

Override public void onViewCreated (NonNull View view ،Nullable Bundle saveInstanceState) {Button button = (Button) view.findViewById (R.id.button3)؛ button.setOnClickListener (جديد View.OnClickListener () {Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity ()، R.id.my_nav_host_fragment)؛ navController.navigate؛ }}) ؛ }

أخيرًا ، لا تنسَ إضافة واجهة ThirdFragment.OnFragmentInteractionListener إلى نشاطك الأساسي:

الطبقة العامة MainActivity يمتد AppCompatActivity بتنفيذ NavigationView.OnNavigationItemSelectedListener، SecondFragment.OnFragmentInteractionListener، ThirdFragment.OnFragmentInteractionListener {

قم بتشغيل هذا المشروع على جهاز Android أو جهاز Android الظاهري (AVD) واختبر التنقل. يجب أن تكون قادرًا على التنقل بين الأجزاء الثلاثة عن طريق النقر فوق الأزرار المختلفة.

إنشاء الرسوم المتحركة الانتقالية المخصصة

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

يجب تعريف كل رسم متحرك تريد استخدامه في ملف موارد الرسوم المتحركة الخاص به ، داخل دليل "res / anim". إذا لم يكن مشروعك يحتوي بالفعل على دليل "res / anim" ، فستحتاج إلى إنشاء دليل:

• انقر مع الضغط على Control على مجلد "res" في مشروعك واختر "New> Android Resource Directory."
• أعط هذا الدليل اسم "anim."
• افتح القائمة المنسدلة "نوع المورد" ، واختر "رسوم متحركة".
• انقر فوق موافق."

لنبدأ بتحديد الرسوم المتحركة التي تتلاشى:

• انقر مع الضغط على Control على دليل "res / anim" الخاص بمشروعك.
• حدد "جديد> ملف موارد الرسوم المتحركة".
• أطلق على هذا الملف اسم "fade_out".
• افتح ملف "fade_out" ، وأضف ما يلي:

كرر الخطوات المذكورة أعلاه لإنشاء ملف مورد رسوم متحركة ثانٍ باسم "slide_out_left" ، ثم أضف ما يلي:

أنشئ ملفًا ثالثًا باسم "slide_out_right" وأضف ما يلي:

يمكنك الآن تعيين هذه الرسوم المتحركة لإجراءاتك عبر محرر التنقل.لتشغيل الرسوم المتحركة للتلاشي كلما انتقل المستخدم من FirstFragment إلى SecondFragment:

• افتح رسم التنقل الخاص بك وتأكد من تحديد علامة التبويب "تصميم".
• انقر لتحديد الإجراء الذي يربط FirstFragment بـ SecondFragment.
• في لوحة "السمات" ، انقر لتوسيع قسم "الانتقالات". افتراضيًا ، يجب تعيين كل قائمة منسدلة في هذا القسم على "بلا".
• افتح القائمة المنسدلة "Enter" ، والتي تتحكم في الرسوم المتحركة التي يتم تشغيلها عندما ينتقل SecondFragment إلى الجزء العلوي من المكدس الخلفي. حدد الرسوم المتحركة "fade_out".

إذا قمت بالتبديل إلى علامة التبويب "تصميم" ، فسترى أنه تمت إضافة هذه الرسوم المتحركة إلى "action_firstFragment_to_secondFragment".

قم بتشغيل المشروع المحدّث على جهاز Android أو AVD. يجب أن تواجه الآن تأثير التلاشي كلما انتقلت من FirstFragment إلى SecondFragment.

إذا ألقيت نظرة أخرى على لوحة "السمات" ، فسترى أن "Enter" ليس هو الجزء الوحيد من المرحلة الانتقالية حيث يمكنك تطبيق رسم متحرك. يمكنك أيضًا الاختيار من بين:

• ىخرج: الرسوم المتحركة التي تلعب عندما يترك جزء من المكدس
• أدخل البوب: الرسوم المتحركة التي يتم تشغيلها عند ملء جزء من الجزء العلوي من الحزمة
• خروج البوب: الرسوم المتحركة التي يتم تشغيلها عند انتقال جزء ما إلى أسفل المكدس

حاول التجريب من خلال تطبيق رسوم متحركة مختلفة على أجزاء مختلفة من انتقالاتك. يمكنك أيضًا تنزيل المشروع المكتمل من جيثب.

تغليف

في هذه المقالة ، درسنا كيف يمكنك استخدام مكون Navigation Architecture لإنشاء تطبيق أحادي النشاط ومتعدد الأجزاء ، مكتمل مع الرسوم المتحركة الانتقالية المخصصة. هل أقنعك مكون التنقل بترحيل مشاريعك إلى هذا النوع من بنية التطبيق؟ اسمحوا لنا أن نعرف في التعليقات أدناه!