قم ببناء تطبيق Android الأول الخاص بك في Java

حول هذا المعمل

قم ببناء تطبيق Android الأول الخاص بك في Java

1. مرحبًا!

6cba94311109e72f.png

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

ما يجب أن تعرفه بالفعل

تم كتابة هذا المعمل للمبرمجين ويفترض أنك تعرف لغة برمجة Java أو Kotlin. إذا كنت مبرمجًا متمرسًا وماهرًا في قراءة التعليمات البرمجية ، فمن المحتمل أن تتمكن من اتباع معمل الرموز هذا ، حتى إذا لم يكن لديك خبرة كبيرة في Java.

ماذا ستتعلم

كيفية استخدام Android Studio لبناء تطبيقك.

كيفية تشغيل تطبيقك على جهاز أو في المحاكي.

كيفية إضافة أزرار تفاعلية.

كيفية عرض شاشة ثانية عند الضغط على الزر.

استخدم Android Studio و Java لكتابة تطبيقات Android

أنت تكتب تطبيقات Android بلغة برمجة Java باستخدام IDE يسمى Android Studio. استنادًا إلى برنامج IntelliJ IDEA من JetBrains ، يعد Android Studio بيئة تطوير متكاملة مصممة خصيصًا لتطوير Android.

ملاحظة: يتطلب هذا الإصدار من معمل الرموز إصدار Android Studio 3.6 أو أعلى.

للعمل من خلال مختبر الرموز هذا ، ستحتاج إلى جهاز كمبيوتر يمكنه تشغيل Android Studio 3.6 أو أعلى (أو مثبت عليه بالفعل Android Studio 3.6 أو أعلى).

2. قم بتثبيت Android Studio

ملاحظة: يتطلب هذا الإصدار من معمل الرموز إصدار Android Studio 3.6 أو أعلى.

يمكنك تنزيل Android Studio 3.6 من صفحة Android Studio.

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

ملاحظة: يتم تحسين Android Studio باستمرار. للحصول على أحدث المعلومات حول متطلبات النظام وإرشادات التثبيت ، راجع صفحة تنزيل Android Studio.

يتوفر Android Studio لأجهزة الكمبيوتر التي تعمل بنظام Windows أو Linux ولأجهزة Mac التي تعمل بنظام macOS. يتم تضمين OpenJDK (مجموعة تطوير Java) مع Android Studio.

التثبيت مشابه لجميع المنصات. يتم ملاحظة أي اختلافات أدناه.

انتقل إلى صفحة تنزيل Android Studio واتبع التعليمات لتنزيل وتثبيت Android Studio.

اقبل التكوينات الافتراضية لجميع الخطوات ، وتأكد من تحديد جميع المكونات للتثبيت.

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

عند اكتمال التثبيت ، يبدأ Android Studio ، وستكون جاهزًا لإنشاء مشروعك الأول.

استكشاف الأخطاء وإصلاحها: إذا واجهت مشاكل في التثبيت ، فراجع ملاحظات إصدار Android Studio أو استكشاف أخطاء Android Studio وإصلاحها.

3. المهمة: أنشئ مشروعك الأول

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

إليك ما سيبدو عليه التطبيق النهائي:

72c7e6d2960f4faa.png

ماذا ستتعلم

كيفية إنشاء مشروع في Android Studio.

كيفية إنشاء جهاز Android مقلد.

كيفية تشغيل تطبيقك على المحاكي.

كيفية تشغيل تطبيقك على جهازك الفعلي ، إذا كان لديك واحد.

الخطوة الأولى: إنشاء مشروع جديد

افتح Android Studio.

في مربع الحوار مرحبًا بك في Android Studio ، انقر فوق بدء مشروع Android Studio جديد. c7c8a5cc4c9029b.png

حدد النشاط الأساسي (ليس الافتراضي). انقر فوق {التالي. 73e63b490a2f4ae6.png

امنح تطبيقك اسمًا مثل My First App.

تأكد من ضبط اللغة على Java. 3ffb3ca42472b4f6.png

اترك القيم الافتراضية للحقول الأخرى.

انقر فوق "إنهاء".

بعد هذه الخطوات ، Android Studio:

ينشئ مجلدًا لمشروع Android Studio يسمى MyFirstApp. يوجد هذا عادةً في مجلد يسمى AndroidStudioProjects أسفل دليل منزلك.

يبني مشروعك (قد يستغرق هذا بضع لحظات). يستخدم Android Studio Gradle كنظام بناء خاص به. يمكنك متابعة تقدم الإنشاء أسفل نافذة Android Studio.

يفتح محرر الكود الذي يعرض مشروعك.

الخطوة الثانية: إعداد شاشتك

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

إذا كانت هناك نافذة Gradle مفتوحة على الجانب الأيمن ، فانقر فوق زر التصغير (-) في الزاوية اليمنى العليا لإخفائها. 97a3da610c1eede7.png

اعتمادًا على حجم شاشتك ، ضع في اعتبارك تغيير حجم الجزء الموجود على اليسار الذي يعرض مجلدات المشروع لتحتل مساحة أقل.

في هذه المرحلة ، يجب أن تبدو شاشتك أقل تشوشًا ، على غرار لقطة الشاشة الموضحة أدناه.

70183da1f878e11a.png

الخطوة 3: استكشف هيكل المشروع وتخطيطه

أعلى يسار Andrيجب أن تبدو نافذة oid Studio مشابهة للرسم التخطيطي التالي: ecabcf48b6f7b9a1.png

بناءً على اختيارك قالب النشاط الأساسي لمشروعك ، قام Android Studio بإعداد عدد من الملفات لك. يمكنك إلقاء نظرة على التسلسل الهرمي لملفات تطبيقك بعدة طرق ، إحداها في طريقة عرض المشروع. تُظهر طريقة عرض المشروع ملفاتك ومجلداتك منظمة بطريقة مناسبة للعمل مع مشروع Android. (هذا لا يتطابق دائمًا مع التسلسل الهرمي للملف! لمشاهدة التسلسل الهرمي للملف ، اختر طريقة عرض ملفات المشروع بالنقر فوق [3].)

انقر نقرًا مزدوجًا فوق مجلد app (1) لتوسيع التسلسل الهرمي لملفات التطبيق. (انظر (1) في الصورة).

إذا نقرت على مشروع (2) ، يمكنك إخفاء أو إظهار طريقة عرض المشروع. قد تحتاج إلى تحديد عرض> أداة Windows لرؤية هذا الخيار.

تحديد طريقة عرض المشروع الحالي (3) هو Project> Android.

في طريقة العرض Project> Android ، ترى ثلاثة أو أربعة مجلدات من المستوى الأعلى أسفل مجلد التطبيق الخاص بك: Manifests و java و java (تم إنشاؤه) و res. قد لا ترى جافا (تم إنشاؤه) على الفور.

قم بتوسيع مجلد البيانات.

يحتوي هذا المجلد على AndroidManifest.xml. يصف هذا الملف جميع مكونات تطبيق Android الخاص بك ويقرأه نظام تشغيل Android عند تنفيذ تطبيقك. 2. قم بتوسيع مجلد جافا. يتم تنظيم جميع ملفات لغة Java الخاصة بك هنا. يحتوي مجلد جافا على ثلاثة مجلدات فرعية:

com.example.myfirstapp: يحتوي هذا المجلد على ملفات شفرة مصدر جافا لتطبيقك.

com.example.myfirstapp (androidTest): هذا المجلد هو المكان الذي ستضع فيه اختباراتك الآلية ، وهي اختبارات تعمل على جهاز Android. يبدأ بملف اختبار الهيكل العظمي.

com.example.myfirstapp (اختبار): هذا المجلد هو المكان الذي ستضع فيه اختبارات الوحدة الخاصة بك. لا تحتاج اختبارات الوحدة إلى تشغيل جهاز Android. يبدأ بملف اختبار وحدة الهيكل العظمي. 3. قم بتوسيع مجلد الدقة. يحتوي هذا المجلد على جميع الموارد الخاصة بتطبيقك ، بما في ذلك الصور وملفات التخطيط والسلاسل والرموز والتصميم. يتضمن هذه المجلدات الفرعية:

قابل للرسم: سيتم تخزين جميع صور تطبيقك في هذا المجلد.

التخطيط: يحتوي هذا المجلد على ملفات تخطيط واجهة المستخدم لأنشطتك. حاليًا ، يحتوي تطبيقك على نشاط واحد يحتوي على ملف تخطيط يسمى activity_main.xml. ويحتوي أيضًا على content_main.xml و fragment_first.xml و fragment_second.xml.

القائمة: يحتوي هذا المجلد على ملفات XML تصف أي قوائم في تطبيقك.

mipmap: يحتوي هذا المجلد على أيقونات المشغل لتطبيقك.

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

القيم: يحتوي هذا المجلد على موارد ، مثل السلاسل والألوان المستخدمة في تطبيقك.

الخطوة 4: إنشاء جهاز افتراضي (محاكي)

في هذه المهمة ، ستستخدم مدير جهاز Android الظاهري (AVD) لإنشاء جهاز افتراضي (أو محاكي) يحاكي التكوين لنوع معين من أجهزة Android.

تتمثل الخطوة الأولى في إنشاء تكوين يصف الجهاز الظاهري.

في Android Studio ، حدد Tools> AVD Manager ، أو انقر فوق رمز AVD Manager في شريط الأدوات. 1ef215721ed1bd47.png

انقر فوق + إنشاء جهاز افتراضي. (إذا كنت قد أنشأت جهازًا افتراضيًا من قبل ، فستظهر النافذة جميع أجهزتك الحالية ويكون الزر + إنشاء جهاز افتراضي في الجزء السفلي.) تعرض نافذة تحديد الأجهزة قائمة بتعريفات الأجهزة التي تم تكوينها مسبقًا.

اختر تعريف الجهاز ، مثل Pixel 2 ، وانقر فوق التالي. (بالنسبة إلى مختبر الرموز هذا ، لا يهم حقًا تعريف الجهاز الذي تختاره).

في مربع الحوار "صورة النظام" ، من علامة التبويب "مستحسن" ، اختر أحدث إصدار. (هذا مهم.)

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

ملاحظة: يمكن أن تشغل صور النظام قدرًا كبيرًا من مساحة القرص ، لذا ما عليك سوى تنزيل ما تحتاج إليه.

في مربع الحوار التالي ، اقبل الإعدادات الافتراضية ، وانقر فوق "إنهاء".

يعرض مدير AVD الآن الجهاز الظاهري الذي أضفته.

إذا كانت نافذة برنامج AVD Manager للأجهزة الافتراضية الخاصة بك لا تزال مفتوحة ، فابدأ وأغلقها.

الخطوة 5: قم بتشغيل التطبيق الخاص بك على المحاكي الجديد الخاص بك

في Android Studio ، حدد تشغيل> تشغيل "التطبيق" أو انقر فوق رمز التشغيل في شريط الأدوات. 609c3e4473493202.png ستتغير الأيقونة عندما يكون التطبيق قيد التشغيل بالفعل. edee73c1aed2b57e.png

إذا حصلت على مربع حوار ينص على أن "التشغيل الفوري يتطلب تثبيت النظام الأساسي المتوافق مع جهازك المستهدف (Android N ...)" ، فابدأ وانقر على تثبيت ومتابعة.

في تشغيل> تحديد الجهاز ، ضمن الأجهزة المتاحة ، حدد الجهاز الظاهري الذي قمت بتكوينه للتو. تظهر هذه القائمة أيضًا في شريط الأدوات.

b1215d5cf034b077.png

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

الرسائل التي قد تظهر لفترة وجيزة في شريط الحالة

جرادل بناء الجري

انتظرg للجهاز المستهدف ليتم تشغيله

تثبيت APK

نشاط الإطلاق

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

89960f5a856e1aa7.png

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

الخطوة 6: قم بتشغيل التطبيق الخاص بك على جهاز (إذا كان لديك واحد)

ماذا تحتاج:

جهاز Android مثل الهاتف أو الجهاز اللوحي.

كابل بيانات لتوصيل جهاز Android بجهاز الكمبيوتر الخاص بك عبر منفذ USB.

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

قم بتشغيل التطبيق الخاص بك على الجهاز

للسماح لـ Android Studio بالاتصال بجهازك ، يجب عليك تشغيل تصحيح أخطاء USB على جهاز Android الخاص بك.

في Android 4.2 والإصدارات الأحدث ، تكون شاشة خيارات Developer مخفية بشكل افتراضي. لإظهار خيارات المطور وتمكين تصحيح أخطاء USB:

على جهازك ، افتح الإعدادات> حول الهاتف وانقر على إنشاء الرقم سبع مرات.

ارجع إلى الشاشة السابقة (الإعدادات). تظهر خيارات المطور في أسفل القائمة. انقر فوق خيارات المطور.

تفعيل تتبع الفلاش.

يمكنك الآن توصيل جهازك وتشغيل التطبيق من Android Studio.

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

في Android Studio ، انقر فوق Run 609c3e4473493202.png في شريط الأدوات أعلى النافذة. (قد تحتاج إلى تحديد عرض> شريط الأدوات لرؤية هذا الخيار.) يفتح مربع حوار تحديد هدف النشر مع قائمة المحاكيات المتوفرة والأجهزة المتصلة.

حدد جهازك ، وانقر فوق موافق. يقوم Android Studio بتثبيت التطبيق على جهازك وتشغيله.

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

استكشاف الأخطاء وإصلاحها

إذا واجهتك مشكلة ، فقم بإنهاء Android Studio وإعادة تشغيله.

إذا لم يتعرف Android Studio على جهازك ، فجرّب ما يلي:

افصل جهازك عن جهاز التطوير لديك وأعد توصيله.

أعد تشغيل Android Studio.

إذا ظل جهاز الكمبيوتر الخاص بك لا يعثر على الجهاز أو يعلن أنه "غير مصرح به":

افصل الجهاز.

على الجهاز ، افتح الإعدادات-> خيارات المطور.

انقر فوق إبطال أذونات تصحيح أخطاء USB.

أعد توصيل الجهاز بجهاز الكمبيوتر الخاص بك.

عند المطالبة ، امنح التراخيص.

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

تحقق من قسم استكشاف الأخطاء وإصلاحها في وثائق Android Studio.

الخطوة 7: اكتشف قالب التطبيق

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

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

24ebb1f42e1fb418.png

في أعلى يمين الشاشة ، توجد قائمة بثلاث نقاط رأسية. 37010a0e7f96362c.png إذا قمت بالنقر فوق ذلك ، فسترى أن Android Studio قد أنشأ أيضًا قائمة خيارات مع عنصر الإعدادات. لا يؤدي اختيار الإعدادات إلى إجراء أي شيء حتى الآن ، ولكن إعداده لك يجعل من السهل إضافة إعدادات قابلة للتكوين بواسطة المستخدم إلى تطبيقك. 1fc9e57692132430.png

لاحقًا في مختبر الرموز هذا ، ستنظر إلى الزر "التالي" وتعديل طريقة ظهوره وما يفعله.

4. المهمة: استكشف محرر التخطيط

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

يتم تعريف التخطيطات في XML. يتيح لك محرر التخطيط تحديد التخطيط الخاص بك وتعديله إما عن طريق ترميز XML أو باستخدام المحرر المرئي التفاعلي.

كل عنصر في التخطيط هو طريقة عرض. في هذه المهمة ، سوف تستكشف بعض اللوحات في محرر التخطيط ، وسوف تتعلم كيفية تغيير خاصية طرق العرض.

ماذا ستتعلم

كيفية استخدام محرر التخطيط.

كيفية تحديد قيم الممتلكات.

كيفية إضافة موارد السلسلة.

كيفية إضافة موارد الألوان.

الخطوة 1: افتح محرر التخطيط

ابحث عن مجلد التخطيط وافتحه (التطبيق> الدقة> التخطيط) على الجانب الأيسر في لوحة المشروع. bb7b4fe5af80859d.png

انقر نقرًا مزدوجًا فوق fragment_first.xml.

استكشاف الأخطاء وإصلاحها: إذا كنت لا ترى الملف fragment_first.xml ، فتأكد من أنك تقوم بتشغيل Android Studio 3.6 أو إصدار أحدث ، وهو مطلوب لمعمل الرموز هذا.

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

على اليسار توجد لوحة (1) من العروض التي يمكنك إضافتها إلى تطبيقك.

يوجد أدناه شجرة مكون (2) تعرض العروض الموجودة حاليًا في هذا الملف ، وكيف يتم ترتيبها بالنسبة لبعضها البعض.

يوجد في الوسط محرر التصميم (3) ، والذي يعرض تمثيلًا مرئيًا لما ستبدو عليه محتويات الملف عند تجميعه في تطبيق Android. يمكنك عرض التمثيل المرئي أو كود XML أو كليهما.

في الزاوية العلوية اليمنى من محرر التصميم ، أعلى السمات (4) ، ابحث عن الرموز الثلاثة التي تبدو كالتالي: c60f285cb7fbc306.png تمثل هذه الرموز طرق عرض الكود (رمز فقط) ، وسبليت (رمز + تصميم) ، وتصميم (تصميم فقط) .

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

العرض المقسم: 32d3075ed7f5c02c.png

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

a7d0a08766682f9.png

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

تدرب على استخدام قائمة التخطيط في الجزء العلوي الأيسر من شريط أدوات التصميم لعرض طريقة عرض التصميم وعرض المخطط وكلا العرضين جنبًا إلى جنب. 6572c0c05460eafd.png

بناءً على حجم شاشتك وتفضيلاتك ، قد ترغب في إظهار طريقة العرض Design أو عرض Blueprint فقط ، بدلاً من كليهما.

استخدم رمز الاتجاه لتغيير اتجاه التخطيط. يتيح لك ذلك اختبار كيف سيتناسب التخطيط مع الوضعين الرأسي والأفقي. c40138d924cedb8f.png

استخدم قائمة الجهاز لعرض التخطيط على أجهزة مختلفة. (هذا مفيد للغاية للاختبار!)

46754977c9c3d6c9.png

على اليمين توجد لوحة السمات. ستتعرف على ذلك لاحقًا.

الخطوة 2: استكشاف شجرة المكونات وتغيير حجمها

في fragment_first.xml ، انظر إلى شجرة المكونات. إذا لم يكن معروضًا ، فقم بتبديل الوضع إلى Design بدلاً من Split أو Code.

855789e5c4867c8f.png

تُظهر هذه اللوحة التسلسل الهرمي للعرض في التخطيط الخاص بك ، أي كيفية ترتيب العروض بالنسبة لبعضها البعض. 2. إذا لزم الأمر ، قم بتغيير حجم شجرة المكونات حتى تتمكن من قراءة جزء من السلاسل على الأقل. 3. انقر فوق رمز إخفاء في الجزء العلوي الأيمن من شجرة المكونات. 7b183024169396dd.png

يتم إغلاق شجرة المكونات. 4. أعد شجرة المكونات بالنقر فوق التسمية العمودية "شجرة المكونات" على اليسار.

35c14a27fd2ce30a.png

الخطوة 3: استكشاف التسلسلات الهرمية للعرض

في شجرة المكونات ، لاحظ أن جذر التسلسل الهرمي لطريقة العرض هو طريقة عرض ConstraintLayout.

يجب أن يكون لكل تخطيط طريقة عرض جذرية تحتوي على كافة طرق العرض الأخرى. دائمًا ما تكون طريقة العرض الجذرية عبارة عن مجموعة عرض ، وهي طريقة عرض تحتوي على طرق عرض أخرى. يُعد مخطط القيد أحد الأمثلة على مجموعة العرض. 2. لاحظ أن ConstraintLayout تحتوي على TextView ، يسمى textview_first وزر ، يسمى button_first.

506cf77387f00782.png

إذا لم يظهر الرمز ، فانتقل إلى طريقة العرض Code أو Split باستخدام الرموز الموجودة في الزاوية اليمنى العليا.

في كود XML ، لاحظ أن العنصر الجذر هو <androidx.constraintlayout.widget.ConstraintLayout>. يحتوي العنصر الجذر على عنصر <TextView> وعنصر <Button>.

<androidx.constraintlayout.widget.ConstraintLayout

  ...>

   <TextView

      ... />

   <زر

      ... />

</androidx.constraintlayout.widget.ConstraintLayout>

الخطوة 4: تغيير قيم الممتلكات

في محرر التعليمات البرمجية ، افحص الخصائص في عنصر TextView.

<TextView

   android: layout_width = "wrap_content"

   android: layout_height = "wrap_content"

   android: text = "Hello first fragment"

   ... />

انقر فوق السلسلة في خاصية النص ، وستلاحظ أنها تشير إلى مورد سلسلة ، hello_first_fragment.

android: text = "@ string / hello_first_fragment"

انقر بزر الماوس الأيمن فوق الخاصية وانقر فوق انتقال إلى> إعلان أو استخدامات

يتم فتح القيم / strings.xml مع تمييز السلسلة.

<string name = "hello_first_fragment"> مرحبًا الجزء الأول </ string>

قم بتغيير قيمة خاصية السلسلة إلى Hello World !.

عد إلى fragment_first.xml.

حدد textview_first في شجرة المكونات. 19cfd9f54f58b379.png

انظر إلى لوحة السمات على اليسار ، وافتح قسم السمات المعلنة إذا لزم الأمر. 549f087103c9acbe.png

مشاكل

نعيق هذه الخطوة:

إذا كانت لوحة Attributes غير مرئية ، فانقر فوق تسمية Attributes الرأسية في أعلى اليمين. e6a2a689769c8afd.png

في حقل النص الخاص بـ TextView في السمات ، لاحظ أنه لا يزال يشير إلى سلسلة Resource @ string / hello_first_fragment. وجود السلاسل في ملف الموارد له العديد من المزايا. يمكنك تغيير قيمة السلسلة دون الحاجة إلى تغيير أي كود آخر. يعمل هذا على تبسيط ترجمة تطبيقك إلى لغات أخرى ، لأن المترجمين لديك لا يحتاجون إلى معرفة أي شيء عن كود التطبيق. 8bb6bf0caffa82a4.png

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

6349e6a522fda9ea.png

1e116f4ea013be17.png

قم بتشغيل التطبيق لمعرفة التغيير الذي أجريته في ملف strings.xml. يعرض تطبيقك الآن "Hello World!".

d2103406630c3527.png

الخطوة 5: تغيير خصائص عرض النص

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

37c72a9385dab52d.png

قم بتغيير بعض خصائص مظهر النص. على سبيل المثال ، قم بتغيير عائلة الخط ، وزد حجم النص ، وحدد النمط الغامق. (قد تحتاج إلى تمرير اللوحة لرؤية جميع الحقول.)

تغيير لون النص. انقر في حقل textColor ، وأدخل g.

تنبثق قائمة بقيم الإكمال المحتملة التي تحتوي على الحرف g. تتضمن هذه القائمة ألوانًا محددة مسبقًا.

39597ff5cf9661da.png

حددandroid: color / darker_gray واضغط على Enter.

يوجد أدناه مثال على سمات textAppearance بعد إجراء بعض التغييرات.

8751426a21281f94.png

انظر إلى XML من أجل TextView. ترى أنه تمت إضافة الخصائص الجديدة.

<TextView

   android: id = "@ + id / textview_first"

   android: layout_width = "wrap_content"

   android: layout_height = "wrap_content"

   android: fontFamily = "sans-serif-condensed"

   android: text = "@ string / hello_first_fragment"

   android: textColor = "@ android: color / darker_gray"

   android: textSize = "30sp"

   android: textStyle = "bold"

قم بتشغيل تطبيقك مرة أخرى وشاهد التغييرات المطبقة على Hello World! سلسلة

c715d9230068d0f8.png

الخطوة 6: اعرض كل السمات

في لوحة Attributes ، قم بالتمرير لأسفل حتى تجد كل السمات.

إذا كنت لا ترى أي سمات في لوحة السمات ، فتأكد من أن textview_first لا يزال محددًا في شجرة المكونات.

6e28336e8d85fa14.png

قم بالتمرير خلال القائمة للحصول على فكرة عن السمات التي يمكنك تعيينها لـ TextView.

5. المهمة: إضافة موارد الألوان

لقد تعلمت حتى الآن كيفية تغيير قيم الممتلكات. بعد ذلك ، ستتعلم كيفية إنشاء المزيد من الموارد مثل موارد السلسلة التي عملت معها سابقًا. يمكّنك استخدام الموارد من استخدام نفس القيم في أماكن متعددة ، أو تحديد القيم وتحديث واجهة المستخدم تلقائيًا كلما تم تغيير القيمة.

ماذا ستتعلم

كيف يتم تحديد الموارد.

إضافة واستخدام موارد الألوان.

نتائج تغيير ارتفاع التخطيط وعرضه.

الخطوة 1: أضف موارد الألوان

أولاً ، ستتعلم كيفية إضافة موارد ألوان جديدة.

في لوحة المشروع على اليسار ، انقر نقرًا مزدوجًا على الدقة> القيم> colours.xml لفتح ملف مورد الألوان.

8fa53d358e4a9813.png

<الموارد>

    <color name = "colorPrimary"> # 6200EE </color>

    <color name = "colorPrimaryDark"> # 3700B3 </color>

    <color name = "colorAccent"> # 03DAC5 </color>

</resources>

يفتح ملف colours.xml في المحرر. حتى الآن ، تم تحديد ثلاثة ألوان. هذه هي الألوان التي يمكنك رؤيتها في تخطيط التطبيق الخاص بك ، على سبيل المثال ، اللون الأرجواني لشريط التطبيق.

ملاحظة: تستخدم الإصدارات المختلفة من Android Studio قيمًا مختلفة لهذه الألوان ، لذلك قد ترى ألوانًا أخرى هنا.

ارجع إلى fragment_first.xml حتى تتمكن من رؤية كود XML للتخطيط.

أضف خاصية جديدة إلى TextView تسمى android: background ، وابدأ في الكتابة لتعيين قيمتها علىcolor. يمكنك إضافة هذه الخاصية في أي مكان داخل رمز TextView.

تنبثق قائمة تقدم موارد الألوان المحددة مسبقًا:

f08dbc2b6d4fc39.png

اختر @ color / colorPrimaryDark.

غيّر خاصية android: textColor وأعطها قيمةandroid: color / white.

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

c0c2141dd09c7ea7.png

الخطوة 2: أضف لونًا جديدًا لاستخدامه كلون لخلفية الشاشة

مرة أخرى في color.xml ، قم بإنشاء مورد ألوان جديد يسمى screenBackground:

<color name = "screenBackground"> ​​# FFEE58 </color>

يمكن تعريف اللون على أنه 3 أرقام سداسية عشرية (# 00- # FF ، أو 0-255) تمثل مكونات الأحمر والأزرق والأخضر (RGB). اللون الذي أضفته للتو أصفر. لاحظ أن الألوان المقابلة للرمز معروضة في الهامش الأيسر للمحرر.

e2749d2e88ddf4a3.png

لاحظ أنه يمكن أيضًا تحديد اللون بما في ذلك قيمة ألفا (# 00- # FF) التي تمثل الشفافية (# 00

= 0٪ = شفاف بالكامل ، #FF = 100٪ = معتم بالكامل). عند تضمينها ، تكون قيمة alpha هي الأولى من 4 أرقام سداسية عشرية (ARGB).

قيمة ألفا هي مقياس للشفافية. على سبيل المثال ، # 88FFEE58 يجعل اللون شبه شفاف ، وإذا استخدمت # 00FFEE58 ، فهو شفاف تمامًا ويختفي من الشريط الأيسر.

ارجع إلى fragment_first.xml.

في شجرة المكونات ، حدد ConstraintLayout. 98c54173559bb461.png

في لوحة السمات ، حدد خاصية الخلفية واضغط على Enter. اكتب "c" في الحقل الذي يظهر.

في قائمة الألوان التي تظهر ، حدد @ color / screenBackground. اضغط على Enter لإكمال التحديد.

4ad182142b7286e6.png

انقر فوق التصحيح الأصفر على يسار قيمة اللون في حقل الخلفية.

825da5a9b24ce5ff.png

يعرض قائمة الألوان المحددة في colours.xml. انقر فوق علامة التبويب Custom لاختيار لون مخصص باستخدام منتقي الألوان التفاعلي. ebd2ec170406402a.png

لا تتردد في تغيير قيمة لون الخلفية للشاشة ، ولكن تأكد من أن اللون النهائي يختلف بشكل ملحوظ عن اللون الأساسي واللون الأساسي الداكن.

الخطوة 3: استكشاف خصائص العرض والارتفاع

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

في fragment_first.xml ، في شجرة المكونات ، حدد مخطط القيد.

3b78c455704d36b8.png

في لوحة Attributes ، ابحث عن قسم Layout وقم بتوسيعه. ef495439c2df9fac.png

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

نصيحة: يجب أن تحتوي جميع طرق العرض على خصائص layout_width و layout_height.

لاحظ أن خلفية الشاشة بالكامل تستخدم لون الخلفية للشاشة.

6cda01dc20388d55.png

حدد textview_first. عرض التخطيط وارتفاعه حاليًا هما ملفان_محتوى ، مما يخبر العرض بأن يكون كبيرًا بما يكفي لإحاطة محتواه (بالإضافة إلى المساحة المتروكة)

قم بتغيير كل من عرض التخطيط وارتفاع التخطيط إلى match_constraint ، والتي تخبر العرض أن يكون كبيرًا مثل أي شيء مقيد به.

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

b8740b4dc43dc9c4.png

استكشف ما يحدث إذا كان العرض match_constraint وكان الارتفاع عبارة عن ملف wrap_content والعكس صحيح. يمكنك أيضًا تغيير عرض وارتفاع button_first.

قم بتعيين عرض وارتفاع TextView والزر مرة أخرى إلى wrap_content.

6. المهمة: إضافة وجهات النظر والقيود

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

94e4cf7f4bb5264b.png

ماذا ستتعلم

كيفية إضافة وجهات نظر جديدة إلى التخطيط الخاص بك.

كيفية حصر موضع العرض في عرض آخر.

الخطوة 1: عرض خصائص القيد

في fragment_first.xml ، انظر إلى خصائص القيد لـ TextView.

التطبيق: layout_constraintBottom_toTopOf = "@ id / button_first"

التطبيق: layout_constraintEnd_toEndOf = "الأصل"

التطبيق: layout_constraintStart_toStartOf = "الأصل"

التطبيق: layout_constraintTop_toTopOf = "الأصل"

تحدد هذه الخصائص موضع TextView. اقرأها بعناية.

يمكنك تقييد العرض العلوي والسفلي واليسار واليمني بأعلى وأسفل ويسار ويمين طرق العرض الأخرى.

حدد textview_first في شجرة المكونات وانظر إلى Constraint Widget في لوحة Attributes.

938d3a1c319e1f.png

يمثل المربع العرض المحدد. تمثل كل نقطة رمادية قيدًا ، إلى الأعلى والأسفل واليسار واليمين ؛ في هذا المثال ، من TextView إلى أصلها ، ConstraintLayout ، أو إلى الزر التالي للقيد السفلي. 3. لاحظ أن طرق عرض المخطط والتصميم تُظهر أيضًا القيود عند تحديد طريقة عرض معينة. بعض القيود عبارة عن خطوط متعرجة ، لكن الزر الموجود على زر التالي هو تمايل ، لأنه مختلف قليلاً. سوف تتعلم المزيد عن ذلك بعد قليل. 7d73d3d74c8ebbb9.png

الخطوة 2: إضافة أزرار وتقييد مواقعها

لمعرفة كيفية استخدام القيود لربط مواضع العروض ببعضها البعض ، ستضيف أزرارًا إلى التخطيط. هدفك الأول هو إضافة زر وبعض القيود ، وتغيير القيود على زر التالي.

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

47603a2d993c378b.png

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

حدد الزر الموجود بالقرب من الجزء العلوي ، ثم قم بسحبه وإفلاته في عرض التصميم ، ووضعه أسفل TextView بالقرب من الزر الآخر.

91ddff47af3cde61.png

لاحظ أنه تمت إضافة زر إلى شجرة المكونات ضمن مخطط القيد.

الخطوة 3: أضف قيدًا إلى الزر الجديد

ستقوم الآن بقصر الجزء العلوي من الزر على الجزء السفلي من TextView.

حرك المؤشر فوق الدائرة الموجودة أعلى الزر.

d692d553fdb8d06c.png

انقر واسحب الدائرة الموجودة أعلى الزر إلى الدائرة الموجودة أسفل TextView.

9e7bcb556cd2b58c.png

يتحرك الزر لأعلى للجلوس أسفل TextView مباشرة لأن الجزء العلوي من الزر مقيد الآن في الجزء السفلي من TextView.

7aa4fd347b3ebde9.png

ألق نظرة على أداة Constraint Widget في جزء Layout من لوحة Attributes. يعرض بعض القيود على الزر ، بما في ذلك Top -> BottomOf textView.

ألق نظرة على كود XML للزر. يتضمن الآن السمة التي تقيد الجزء العلوي من الزر أسفل TextView.

التطبيق: layout_constraintTop_toBottomOf = "@ + id / textview_first"

قد ترى تحذيرًا ، "غير مقيد أفقيًا". لإصلاح ذلك ، أضف قيدًا من الجانب الأيسر للزر إلى الجانب الأيسر من الشاشة.

أضف أيضًا قيدًا لتقييد الجزء السفلي من الزر بأسفل الشاشة.

قبل إضافة زر آخر ، أعد تسمية هذا الزر بحيث تكون الأمور أكثر وضوحًا حول الزر الذي هو.

انقر فوق الزر الذي أضفته للتو في تخطيط التصميم.

انظر إلى لوحة السمات على اليمين ، ولاحظ حقل المعرف.

قم بتغيير المعرف من الزر إلى toast_button.

الخطوة 4: اضبط زر التالي

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

لحذف قيد:

في طريقة عرض التصميم أو عرض المخطط ، اضغط مع الاستمرار على مفتاح Ctrl (Command في جهاز Mac) وحرك المؤشر فوق دائرة القيد حتى تبرز الدائرة ، ثم انقر على الدائرة. 1f8c250ad15873d5.png

أو انقر فوق أحد طرق العرض المقيدة ، ثم انقر بزر الماوس الأيمن فوق القيد وحدد حذف من القائمة.

أو في لوحة Attributes ، حرك المؤشر فوق دائرة القيد حتى يظهر x ، ثم انقر فوقه.

7f4931356c145bab.png

إذا قمت بحذف قيد وأردت إعادته ، فقم إما بالتراجع عن الإجراء أو إنشاء قيد جديد.

الخطوة 5: حذف قيود السلسلة

انقر فوق الزر التالي ، ثم احذف القيد من أعلى الزر إلى TextView.

انقر فوق TextView ، ثم احذف القيد من أسفل النص إلى زر التالي.

الخطوة 6: أضف قيودًا جديدة

قم بتقييد الجانب الأيمن من زر التالي على يمين الشاشة إذا لم يكن كذلك بالفعل.

احذف القيد الموجود على الجانب الأيسر من زر "التالي".

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

قم أيضًا بتقييد TextView في الجزء السفلي من الشاشة.

قد يبدو أن المشاهدات تتنقل كثيرًا ، لكن هذا طبيعي عندما تضيف القيود وتزيلها.

يجب أن يبدو تخطيطك الآن شيئًا كهذا.

7fb69c02100a87f6.png

الخطوة 7: استخراج موارد السلسلة

في ملف تخطيط fragment_first.xml ، ابحث عن خاصية النص لزر toast_button.

<زر

   android: id = "@ + id / toast_button"

   android: layout_width = "wrap_content"

   android: layout_height = "wrap_content"

   android: text = "Button"

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

لإصلاح هذا ، انقر فوق الرمز المميز. يظهر مصباح على اليسار.

47544075e3e5ecdb.png

انقر فوق المصباح. في القائمة المنبثقة ، حدد استخراج مورد السلسلة. ca47cfeb06a1602.png

في مربع الحوار الذي يظهر ، قم بتغيير اسم المورد إلى toast_button_text وقيمة المورد إلى Toast وانقر فوق موافق.

8fa866598929c1b4.png

لاحظ أن قيمة الخاصية android: text قد تغيرت إلى @ string / toast_button_text.

<زر

   android: id = "@ + id / button"

   android: layout_width = "wrap_content"

   android: layout_height = "wrap_content"

   android: text = "@ string / toast_button_text"

انتقل إلى الدقة> القيم> ملف strings.xml. لاحظ أنه تمت إضافة مورد سلسلة جديد ، يسمى toast_button_text.

<الموارد>

   ...

   <string name = "toast_button_text"> نخب </ string>

</resources>

قم بتشغيل التطبيق للتأكد من أنه يظهر بالشكل الذي تتوقعه.

73c7729f2d8329df.png

أنت تعرف الآن كيفية إنشاء موارد سلسلة جديدة عن طريق استخراجها من قيم الحقول الموجودة. (يمكنك أيضًا إضافة موارد جديدة إلى ملف strings.xml يدويًا.) وأنت تعرف كيفية تغيير معرف طريقة العرض.

ملاحظة: يساعدك معرف طريقة العرض في تحديد هذا العرض بشكل واضح عن طرق العرض الأخرى. ستستخدم هذا لاحقًا للعثور على طرق عرض معينة باستخدام طريقة findViewById () في كود Java الخاص بك.

الخطوة 8: قم بتحديث زر التالي

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

كما فعلت مع زر Toast ، قم بتغيير معرف زر التالي من button_first إلى random_button في لوحة Attributes.

إذا تلقيت مربع حوار يطلب تحديث جميع استخدامات الزر ، فانقر فوق "نعم". سيؤدي هذا إلى إصلاح أي إشارات أخرى إلى الزر في رمز المشروع. 434e77fabe53b6a3.png

في strings.xml ، انقر بزر الماوس الأيمن على مورد السلسلة التالي.

حدد Refactor> Rename ... وقم بتغيير الاسم إلى random_button_text.

انقر فوق Refactor لإعادة تسمية السلسلة وإغلاق مربع الحوار.

قم بتغيير قيمة السلسلة من Next إلى Random.

إذا كنت ترغب في ذلك ، فانتقل random_button_text إلى أسفل toast_button_text.

الخطوة 9: أضف زرًا ثالثًا

سيحتوي التصميم النهائي على ثلاثة أزرار ، مقيدة رأسياً بنفس الطريقة ، ومتباعدة بالتساوي عن بعضها البعض.

7e6529faadd88569.png

في fragment_first.xml ، أضف زرًا آخر إلى التخطيط ، وقم بإفلاته في مكان ما بين زر Toast والزر Random ، أسفل TextView.

أضف قيودًا رأسية مثل الزرين الآخرين. تقييد الجزء العلوي من الزر الثالث أسفل TextView ؛ حصر الجزء السفلي من الزر الثالث على الجزء السفلي من الشاشة.

أضف القيود الأفقية من الزر الثالث إلى الأزرار الأخرى. تقييد الجانب الأيسر من الزر الثالث على الجانب الأيمن من زر Toast ؛ قم بتقييد الجانب الأيمن من الزر الثالث على الجانب الأيسر من الزر Random.

يجب أن يبدو تخطيطك مشابهًا لما يلي:

7588895a67295422.png

افحص رمز XML لـ fragment_first.xml. هل يحتوي أي من الأزرار على تطبيق السمة: layout_constraintVertical_bias؟ لا بأس إذا كنت لا ترى هذا القيد.

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

فيما يلي رمز XML للتخطيط النهائي. قد يكون للتخطيط الخاص بك هوامش مختلفة وربما بعض قيود التحيز الرأسي أو الأفقي المختلفة. قد تختلف القيم الدقيقة لسمات مظهر TextView لتطبيقك.

<؟ xml version = "1.0" encoding = "utf-8"؟>

<androidx.constraintlayout.widget.ConstraintLayout <؟ 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"

   xmlns: tools = "http://schemas.android.com/tools"

   android: layout_width = "match_parent"

   android: layout_height = "match_parent"

   android: background = "@ color / screenBackground"

   الأدوات: السياق = ". FirstFragment">

   <TextView

       android: id = "@ + id / textview_first"

       android: layout_width = "wrap_content"

       android: layout_height = "wrap_content"

       android: background = "@ color / colorPrimaryDark"

       android: fontFamily = "sans-serif-condensed"

       android: text = "@ string / hello_first_fragment"

       android: textColor = "@ android: color / white"

       android: textSize = "30sp"

       android: textStyle = "bold"

       التطبيق: layout_constraintBottom_toBottomOf = "الأصل"

       التطبيق: layout_constraintEnd_toEndOf = "الأصل"

       التطبيق: layout_constraintStart_toStartOf = "الأصل"

       التطبيق: layout_constraintTop_toTopOf = "parent" />

   <زر

       android: id = "@ + id / random_button"

       android: layout_width = "wrap_content"

       android: layout_height = "wrap_content"

       android: text = "@ string / random_button_text"

       التطبيق: layout_constraintBottom_toBottomOf = "الأصل"

       التطبيق: layout_constraintEnd_toEndOf = "الأصل"

       التطبيق: layout_constraintTop_toBottomOf = "@ + id / textview_first" />

   <زر

       android: id = "@ + id / toast_button"

       android: layout_width = "wrap_content"

       android: layout_height = "wrap_content"

       android: text = "@ string / toast_button_text"

       التطبيق: layout_constraintBottom_toBottomOf = "الأصل"

       التطبيق: layout_constraintStart_toStartOf = "الأصل"

       التطبيق: layout_constraintTop_toBottomOf = "@ + id / textview_first" />

   <زر

       android: id = "@ + id / button2"

       android: layout_width = "wrap_content"

       android: layout_height = "wrap_content"

       android: text = "Button"

       التطبيق: layout_constraintBottom_toBottomOf = "الأصل"

       التطبيق: layout_constraintEnd_toStartOf = "@ + id / random_button"

       التطبيق: layout_constraintStart_toEndOf = "@ + id / toast_button"

       التطبيق: layout_constraintTop_toBottomOf = "@ + id / textview_first" />

</androidx.constraintlayout.widget.ConstraintLayout>

الخطوة 10: احصل على واجهة المستخدم الخاصة بك جاهزة للمهمة التالية

المهمة التالية هي جعل الأزرار تفعل شيئًا ما عند الضغط عليها. أولاً ، تحتاج إلى تجهيز واجهة المستخدم.

قم بتغيير نص TextView لإظهار 0 (الرقم صفر).

قم بتغيير معرف الزر الأخير الذي أضفته ، الزر 2 ، إلى count_button في لوحة السمات في محرر التصميم.

في XML ، استخرج سلسلة الموارد

ce to count_button_text وتعيين القيمة إلى Count.

bbe0bcab6903ea27.png

يجب أن تحتوي الأزرار الآن على النص والمعرفات التالية:

زر نص هوية شخصية الزر الأيسر خبز محمص

@ + معرف / toast_button

الزر الأوسط

عدد

@ + معرف / count_button

الزر الايمن

عشوائي

@ + معرف / زر عشوائي

قم بتشغيل التطبيق.

الخطوة 11: إصلاح الأخطاء إذا لزم الأمر

إذا قمت بتحرير XML للتخطيط مباشرة ، فقد ترى بعض الأخطاء.

c01516073934ed58.png

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

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

التطبيق: layout_constraintEnd_toStartOf = "@ + id / random_button"

التطبيق: layout_constraintStart_toEndOf = "@ + id / toast_button"

7. المهمة: قم بتحديث مظهر الأزرار و TextView

لقد اكتمل تخطيط تطبيقك بشكل أساسي ، ولكن يمكن تحسين مظهره ببعض التغييرات الصغيرة.

الخطوة 1: أضف موارد ألوان جديدة

في color.xml ، قم بتغيير قيمة screenBackground إلى # 2196F3 ، وهو ظل أزرق في لوحة تصميم المواد.

إضافة لون جديد يسمى buttonBackground. استخدم القيمة #BBDEFB ، وهي ظل أفتح في اللوحة الزرقاء.

<color name = "buttonBackground"> ​​# BBDEFB </color>

الخطوة 2: أضف لون خلفية للأزرار

في التخطيط ، أضف لون خلفية إلى كل زر من الأزرار. (يمكنك إما تحرير XML في fragment_first.xml أو استخدام لوحة Attributes ، أيهما تفضل.)

android: background = "@ color / buttonBackground"

الخطوة 3: قم بتغيير هوامش الزرين الأيمن والأيسر

امنح زر Toast هامشًا يسارًا (بداية) بمقدار 24dp وامنح الزر Random هامشًا يمينًا (نهاية) بمقدار 24dp. (استخدام البداية والنهاية بدلاً من اليسار واليمين يجعل هذه الهوامش تعمل لجميع اتجاهات اللغة.)

تتمثل إحدى طرق القيام بذلك في استخدام أداة Constraint Widget في لوحة Attributes. الرقم الموجود على كل جانب هو الهامش الموجود على هذا الجانب من العرض المحدد. اكتب 24 في الحقل واضغط على Enter. 81c294a2cf04b801.png

الخطوة 4: قم بتحديث مظهر TextView

قم بإزالة لون خلفية TextView ، إما عن طريق مسح القيمة في لوحة السمات أو عن طريق إزالة السمة android: background من كود XML.

عند إزالة الخلفية ، تصبح خلفية العرض شفافة. 2. قم بزيادة حجم نص TextView إلى 72sp.

android: textSize = "72sp"

قم بتغيير عائلة الخطوط في TextView إلى sans-serif (إذا لم تكن كذلك بالفعل).

أضف تطبيقًا: layout_constraintVertical_bias property إلى TextView ، لتحيز موضع العرض لأعلى قليلاً بحيث يكون متباعدًا عموديًا بشكل متساوٍ في الشاشة. لا تتردد في تعديل قيمة هذا القيد كما تريد. (تحقق في طريقة عرض التصميم لترى كيف يبدو التخطيط.)

التطبيق: layout_constraintVertical_bias = "0.3"

يمكنك أيضًا تعيين الانحياز الرأسي باستخدام أداة القيد. انقر واسحب الرقم 50 الذي يظهر على الجانب الأيسر ، ثم حركه لأعلى حتى يظهر الرقم 30. 7c73e04dc2f35d00.png

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

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

إذا كان العرض مقيدًا على حافتيه اليسرى واليمنى ، فاستخدم الانحياز الأفقي لتعديل موضعه الأفقي.

تأكد من أن layout_width هو wrap_content ، وأن الانحياز الأفقي هو 50 (app: layout_constraintHorizontal_bias = "0.5" في XML).

الخطوة 5: قم بتشغيل التطبيق الخاص بك

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

214cfb8299ed8d36.png

8. المهمة: اجعل تطبيقك تفاعليًا

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

أولاً ، ستجعل زر التوست يُظهر رسالة منبثقة تسمى نخب. بعد ذلك ، ستجعل زر Count يقوم بتحديث الرقم المعروض في TextView.

ماذا ستتعلم

كيفية العثور على عرض من خلال المعرف الخاص به.

كيفية إضافة انقر فوق المستمعين لعرض.

كيفية تعيين والحصول على قيم خصائص طريقة عرض من التعليمات البرمجية الخاصة بك.

الخطوة 1: تفعيل الاستيراد التلقائي

لتسهيل حياتك ، يمكنك تمكين الاستيراد التلقائي بحيث يقوم Android Studio تلقائيًا باستيراد أي فئات مطلوبة بواسطة Java code.

في Android Studio ، افتح محرر الإعدادات بالانتقال إلى File> Other Settings> Preferences for New Projects.

حدد استيراد السيارات. في قسم Java ، تأكد من تحديد إضافة واردات غير غامضة أثناء التنقل.

5507aa63b0db10d5.png 3. أغلق محرر الإعدادات بالضغط على موافق.

الخطوة الثانية: عرض الخبز المحمص

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

b3d6daf5bb6784d9.png

افتح FirstFragment.java (app> java> com.example.android.myfirstapp> FirstFragment).

تحتوي هذه الفئة على طريقتين فقط ، onCreateView () و onViewCreated ().

يتم تنفيذ هذه الطرق عند بدء الجزء.

كما ذكرنا سابقًا ، يساعدك معرف طريقة العرض في تحديد طريقة العرض هذه بشكل متميز عن طرق العرض الأخرى. باستخدام طريقة findViewByID () ، يمكن أن تجد التعليمات البرمجية الخاصة بك زر random_button باستخدام معرفها R.id.random_button. 2. الق نظرة على onViewCreated (). يقوم بإعداد مستمع للنقرات للزر العشوائي ، والذي تم إنشاؤه في الأصل كزر التالي.

view.findViewById (R.id.random_button) .setOnClickListener (new View.OnClickListener () {

   @تجاوز

   public void onClick (View view) {

       NavHostFragment.findNavController (FirstFragment.this)

               .navigate (R.id.action_FirstFragment_to_SecondFragment) ؛

   }

}) ؛

إليك ما يفعله هذا الرمز:

استخدم طريقة findViewById () مع معرف طريقة العرض المطلوبة كوسيطة ، ثم قم بتعيين مستمع للنقرات في هذا العرض.

في نص مستمع النقرات ، استخدم إجراءً ، وهو في هذه الحالة للتنقل إلى جزء آخر ، والتنقل هناك. (سوف تتعلم عن ذلك لاحقًا.)

أسفل مستمع النقر هذا مباشرةً ، أضف رمزًا لإعداد مستمع للنقرات لزر toast_button ، الذي ينشئ ويعرض نخبًا. ها هو الكود:

view.findViewById (R.id.toast_button) .setOnClickListener (new View.OnClickListener () {

   @تجاوز

   public void onClick (View view) {

       Toast myToast = Toast.makeText (getActivity ()، "Hello toast!"، Toast.LENGTH_SHORT) ؛

       myToast.show () ،

   }

}) ؛

قم بتشغيل التطبيق واضغط على زر Toast. هل ترى الرسالة الممتعة أسفل الشاشة؟ b3d6daf5bb6784d9.png

إذا كنت ترغب في ذلك ، فاستخرج سلسلة الرسالة إلى مورد كما فعلت مع تسميات الأزرار.

لقد تعلمت أنه لجعل العرض تفاعليًا ، يلزمك إعداد مستمع للنقرات للعرض الذي يوضح ما يجب فعله عند النقر فوق العرض (الزر). يمكن لمستمع النقر إما:

تنفيذ كمية صغيرة من التعليمات البرمجية مباشرة.

قم باستدعاء طريقة تحدد سلوك النقر المطلوب في النشاط.

الخطوة 3: اجعل زر العد يقوم بتحديث الرقم على الشاشة

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

قم بتحديث زر Count بحيث يزيد الرقم الموجود على الشاشة بمقدار 1 عند الضغط عليه.

في ملف تخطيط fragment_first.xml ، لاحظ معرف TextView:

<TextView

   android: id = "@ + id / textview_first"

في FirstFragment.java ، أضف مستمع نقرات للزر count_button أسفل مستمعي النقرات الآخرين في onViewCreated (). نظرًا لأنه يتطلب المزيد من العمل ، اجعله يطلق على طريقة جديدة ، countMe ().

view.findViewById (R.id.count_button) .setOnClickListener (new View.OnClickListener () {

   @تجاوز

   public void onClick (View view) {

       countMe (عرض) ؛

   }

}) ؛

في فئة FirstFragment ، أضف الأسلوب countMe () الذي يأخذ وسيطة عرض واحدة. سيتم استدعاء هذه الطريقة عندما يتم النقر فوق الزر Count ويتم استدعاء مستمع النقر.

عدد الفراغ الخاص (مشاهدة العرض) {

}

احصل على قيمة showCountTextView. سوف تحدد ذلك في الخطوة التالية.

   ...

    // احصل على قيمة عرض النص

    String countString = showCountTextView.getText (). toString () ؛

قم بتحويل القيمة إلى رقم وزيادتها.

   ...

    // تحويل القيمة إلى رقم وزيادتها

    عدد صحيح = Integer.parseInt (countString) ،

    العد ++ ؛

عرض القيمة الجديدة في TextView عن طريق تعيين خاصية النص في TextView برمجيًا.

   ...

   // عرض القيمة الجديدة في عرض النص.

   showCountTextView.setText (count.toString ()) ،

ها هي الطريقة كاملة:

عدد الفراغ الخاص (مشاهدة العرض) {

   // احصل على قيمة عرض النص

   String countString = showCountTextView.getText (). toString () ؛

   // تحويل القيمة إلى رقم وزيادتها

   عدد صحيح = Integer.parseInt (countString) ،

   العد ++ ؛

   // عرض القيمة الجديدة في عرض النص.

   showCountTextView.setText (count.toString ()) ،

}

الخطوة 4: تخزين TextView مؤقتًا للاستخدام المتكرر

يمكنك استدعاء findViewById () في countMe () للعثور على showCountTextView. ومع ذلك ، يتم استدعاء countMe () في كل مرة يتم فيها النقر فوق الزر ، وتعتبر findViewById () طريقة تستغرق وقتًا طويلاً للاتصال. لذلك من الأفضل العثور على العرض مرة واحدة وتخزينه مؤقتًا.

في فئة FirstFragment قبل أية أساليب ، أضف متغير عضو لـ showCountTextView من النوع TextView.

عرض النص showCountTextView ؛

في onCreateView () ، ستتصل بـ findViewById () للحصول على TextView الذي يظهر العدد. يجب استدعاء طريقة findViewById () في طريقة عرض حيث يجب أن يبدأ البحث عن المعرف المطلوب ، لذا قم بتعيين عرض التخطيط الذي يتم إرجاعه حاليًا إلى متغير جديد ، fragmentFirstLayout ، بدلاً من ذلك.

// تضخيم التخطيط لهذا الجزء

عرض fragmentFirstLayout = inflater.inflate (R.layout.fragment_first، container، false) ؛

استدعاء findViewById () على fragmentFirstLayout ، وتحديد معرّف العرض الذي تريد البحث عنه ، textview_first. تخزين هذه القيمة مؤقتًا في showCountTextView.

   ...

    // احصل على عرض نص العد

    showCountTextView = fragmentFirstLayout.findViewById (R.id.textview_first) ،

عودة الشظية

rst تخطيط من onCreateView ().

إرجاع الشظية

هذه هي الطريقة الكاملة وإعلان showCountTextView:

عرض النص showCountTextView ؛

@تجاوز

عرض عام عندCreateView (

       تخطيط نافخة منفوخة ، حاوية ViewGroup ،

       تم حفظ الحزمة

) {

   // تضخيم التخطيط لهذا الجزء

   عرض fragmentFirstLayout = inflater.inflate (R.layout.fragment_first، container، false) ؛

   // احصل على عرض نص العد

   showCountTextView = fragmentFirstLayout.findViewById (R.id.textview_first) ،

   إرجاع الشظية

}

قم بتشغيل التطبيق الخاص بك. اضغط على زر العد وراقب تحديث العد.

9. المهمة: تنفيذ الجزء الثاني

حتى الآن ، ركزت على الشاشة الأولى لتطبيقك. بعد ذلك ، ستقوم بتحديث الزر Random لعرض رقم عشوائي بين 0 والعدد الحالي على شاشة ثانية.

c7029fe48ec2a802.png

ماذا ستتعلم

كيفية تمرير المعلومات إلى الجزء الثاني.

قم بتحديث التخطيط للجزء الثاني

ستعرض شاشة الجزء الجديد عنوان العنوان والرقم العشوائي. هذا ما ستبدو عليه الشاشة في عرض التصميم: a991c2db96dcafb3.png يشير٪ d إلى أن الجزء من السلسلة سيتم استبداله برقم. R هو مجرد عنصر نائب.

الخطوة 1: أضف TextView للرقم العشوائي

افتح fragment_second.xml (التطبيق> الدقة> التخطيط> fragment_second.xml) وانتقل إلى Design View إذا لزم الأمر. لاحظ أنه يحتوي على ConstraintLayout التي تحتوي على TextView وزر.

قم بإزالة قيود السلسلة بين TextView والزر. e49352faab20c765.png

أضف TextView آخر من اللوحة وقم بإفلاته بالقرب من منتصف الشاشة. سيتم استخدام TextView لعرض رقم عشوائي بين 0 والعدد الحالي من الجزء الأول.

اضبط المعرف على @ + id / textview_random (textview_random في لوحة Attributes.)

قم بتقييد الحافة العلوية من TextView الجديد بأسفل أول عرض نصي ، والحافة اليسرى على يسار الشاشة ، والحافة اليمنى على يمين الشاشة ، ومن الأسفل إلى الجزء العلوي من زر السابق.

قم بتعيين كل من العرض والارتفاع إلى wrap_content.

اضبط textColor علىandroid: color / white ، واضبط textSize على 72sp ، ونمط textStyle على غامق.

81dc7122e9ddaea1.png

اضبط النص على "R". هذا النص هو مجرد عنصر نائب حتى يتم إنشاء الرقم العشوائي.

اضبط layout_constraintVertical_bias على 0.45.

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

فيما يلي رمز XML الخاص بـ TextView الذي يعرض الرقم العشوائي:

<TextView

   android: id = "@ + id / textview_random"

   android: layout_width = "wrap_content"

   android: layout_height = "wrap_content"

   android: text = "R"

   android: textColor = "@ android: color / white"

   android: textSize = "72sp"

   android: textStyle = "bold"

   التطبيق: layout_constraintBottom_toTopOf = "@ + id / button_second"

   التطبيق: layout_constraintEnd_toEndOf = "الأصل"

   التطبيق: layout_constraintStart_toStartOf = "الأصل"

   التطبيق: layout_constraintTop_toBottomOf = "@ + id / textview_second"

   التطبيق: layout_constraintVertical_bias = "0.45" />

الخطوة 2: قم بتحديث TextView لعرض الرأس

في fragment_second.xml ، حدد textview_second ، والذي يحتوي حاليًا على النص "مرحبًا الجزء الثاني. Arg:٪ 1 $ s" في مورد سلسلة hello_second_fragment.

إذا لم يتم تعيين android: text ، فاضبطه على مورد سلسلة hello_second_fragment.

android: text = "@ string / hello_second_fragment"

قم بتغيير المعرف إلى textview_header في لوحة السمات.

اضبط العرض على match_constraint ، لكن اضبط الارتفاع على wrap_content ، لذلك سيتغير الارتفاع حسب الحاجة لمطابقة ارتفاع المحتوى.

قم بتعيين الهوامش العلوية واليسرى واليمنى على 24dp. يمكن أيضًا الإشارة إلى الهوامش اليمنى واليسرى باسم "البداية" و "النهاية" لدعم الترجمة للغات من اليمين إلى اليسار.

قم بإزالة أي قيد سفلي.

اضبط لون النص على @ color / colorPrimaryDark وحجم النص على 24sp.

في strings.xml ، قم بتغيير hello_second_fragment إلى "هذا رقم عشوائي بين 0 و٪ d."

استخدم Refactor> Rename ... لتغيير اسم hello_second_fragment إلى random_heading.

فيما يلي رمز XML الخاص بـ TextView الذي يعرض العنوان:

<TextView

   android: id = "@ + id / textview_header"

   android: layout_width = "0dp"

   android: layout_height = "wrap_content"

   android: layout_marginStart = "24dp"

   android: layout_marginLeft = "24dp"

   android: layout_marginTop = "24dp"

   android: layout_marginEnd = "24dp"

   android: layout_marginRight = "24dp"

   android: text = "@ string / random_heading"

   android: textColor = "@ color / colorPrimaryDark"

   android: textSize = "24sp"

   التطبيق: layout_constraintEnd_toEndOf = "الأصل"

   التطبيق: layout_constraintStart_toStartOf = "الأصل"

   التطبيق: layout_constraintTop_toTopOf = "parent" />

ff7f9969afbd67ff.png

الخطوة 3: تغيير لون خلفية التخطيط

امنح ملفك الجديدالنشاط لون خلفية مختلف عن النشاط الأول:

في color.xml ، أضف مورد ألوان جديدًا:

<color name = "screenBackground2"> # 26C6DA </color>

في تخطيط النشاط الثاني ، fragment_second.xml ، اضبط خلفية مخطط القيد على اللون الجديد.

في لوحة السمات:

9948b482fb81ef5.png

أو في XML:

android: background = "@ color / screenBackground2"

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

الخطوة 4: افحص الرسم البياني للتنقل

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

افتح nav_graph.xml (التطبيق> الدقة> التنقل> nav_graph.xml).

تظهر شاشة مشابهة لـ Layout Editor في طريقة العرض Design. تُظهر الجزأين مع بعض الأسهم بينهما. يمكنك التكبير باستخدام الأزرار + و - في أسفل اليمين ، كما فعلت مع محرر التخطيط.

يمكنك نقل العناصر بحرية في محرر التنقل. على سبيل المثال ، إذا ظهرت الأجزاء مع SecondFragment إلى اليسار ، فاسحب FirstFragment إلى يسار SecondFragment بحيث تظهر بالترتيب الذي تستخدمه بها.

504c2156d46d4d6b.png

الخطوة 5: تمكين SafeArgs

سيؤدي هذا إلى تمكين SafeArgs في Android Studio.

افتح نصوص Gradle> build.gradle (المشروع: تطبيقي الأول)

ابحث عن قسم التبعيات في قسم buildscript ، وأضف الأسطر التالية بعد إدخالات مسار الفصل الأخرى:

def nav_version = "2.3.0-alpha04"

classpath "androidx.navigation: navigation-safe-args-gradle-plugin: $ nav_version"

افتح نصوص Gradle> build.gradle (الوحدة: التطبيق)

أسفل الأسطر الأخرى التي تبدأ بتطبيق المكون الإضافي ، أضف سطرًا لتمكين SafeArgs:

تطبيق البرنامج المساعد: "androidx.navigation.safeargs"

يجب أن يعرض Android Studio رسالة حول تغيير ملفات Gradle. انقر فوق Sync Now على الجانب الأيمن. 50cedf1769381459.png

بعد لحظات قليلة ، من المفترض أن يعرض Android Studio رسالة في علامة التبويب Sync تفيد بنجاح العملية: a1c51cb92c04e07e.png

اختر إنشاء> إنشاء مشروع. يجب أن يعيد هذا بناء كل شيء حتى يتمكن Android Studio من العثور على FirstFragmentDirections.

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

الخطوة 6: قم بإنشاء وسيطة لإجراء التنقل

في الرسم البياني للتنقل ، انقر فوق الجزء الأول ، وانظر إلى لوحة السمات على اليمين. (إذا لم تظهر اللوحة ، فانقر فوق تسمية السمات الرأسية إلى اليمين.)

في قسم الإجراءات ، يُظهر الإجراء الذي سيحدث للتنقل ، أي الانتقال إلى SecondFragment.

انقر فوق SecondFragment ، وانظر إلى لوحة السمات.

يعرض قسم الحجج لا شيء لعرضه.

انقر فوق + في قسم الحجج.

في مربع الحوار إضافة وسيطة ، أدخل myArg للاسم واضبط النوع على عدد صحيح ، ثم انقر فوق الزر "إضافة". c334d61be24eb01d.png

الخطوة 7: أرسل العد إلى الجزء الثاني

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

افتح FirstFragment.java (app> java> com.example.myfirstapp> FirstFragment)

ابحث عن الطريقة onViewCreated () ولاحظ الكود الذي يقوم بإعداد مستمع النقر للانتقال من الجزء الأول إلى الثاني.

استبدل الكود الموجود في مستمع النقر هذا بسطر للعثور على عرض نص العد ، textview_first.

int currentCount = Integer.parseInt (showCountTextView.getText (). toString ()) ؛

قم بإنشاء إجراء باستخدام currentCount كوسيطة لـ actionFirstFragmentToSecondFragment ().

FirstFragmentDirections.ActionFirstFragmentToSecondFragment action = FirstFragmentDirections.actionFirstFragmentToSecondFragment (currentCount) ؛

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

NavHostFragment.findNavController (FirstFragment.this) .navigate (إجراء) ؛

إليك الطريقة الكاملة ، بما في ذلك الكود الذي أضفته سابقًا:

public void onViewCreated (NonNull View view، Bundle saveInstanceState) {

   super.onViewCreated (عرض ، saveInstanceState) ؛

   view.findViewById (R.id.random_button) .setOnClickListener (new View.OnClickListener () {

       @تجاوز

       public void onClick (View view) {

           int currentCount = Integer.parseInt (showCountTextView.getText (). toString ()) ؛

           FirstFragmentDirecti

ons.ActionFirstFragmentToSecondFragment action = FirstFragmentDirections.actionFirstFragmentToSecondFragment (currentCount) ،

           NavHostFragment.findNavController (FirstFragment.this) .navigate (إجراء) ؛

       }

   }) ؛

   view.findViewById (R.id.toast_button) .setOnClickListener (new View.OnClickListener () {

       @تجاوز

       public void onClick (View view) {

           Toast myToast = Toast.makeText (getActivity ()، "Hello toast!"، Toast.LENGTH_SHORT) ؛

           myToast.show () ،

       }

   }) ؛

   view.findViewById (R.id.count_button) .setOnClickListener (new View.OnClickListener () {

       @تجاوز

       public void onClick (View view) {

           countMe (عرض) ؛

       }

   }) ؛

}

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

الخطوة 8: قم بتحديث SecondFragment لحساب وعرض رقم عشوائي

لقد كتبت الرمز لإرسال العدد الحالي إلى الجزء الثاني. الخطوة التالية هي إضافة رمز إلى SecondFragment.java لاسترداد واستخدام العدد الحالي.

في SecondFragment.java ، أضف عملية استيراد لـ navArgs إلى قائمة المكتبات المستوردة.

استيراد androidx.navigation.fragment.navArgs ؛

في طريقة onViewCreated () أسفل السطر الذي يبدأ بـ super ، أضف رمزًا للحصول على العدد الحالي ، واحصل على السلسلة وقم بتنسيقها بالعدد ، ثم اضبطها على textview_header.

عدد صحيح = SecondFragmentArgs.fromBundle (getArguments ()). getMyArg ()؛

String countText = getString (R.string.random_heading ، count) ؛

TextView headerView = view.getRootView (). findViewById (R.id.textview_header) ؛

headerView.setText (countText) ،

احصل على رقم عشوائي بين 0 والعدد.

عشوائي عشوائي = java.util.Random () جديد ؛

عدد صحيح عشوائي = 0 ؛

إذا (العد> 0) {

   randomNumber = random.nextInt (عدد + 1) ؛

}

أضف رمزًا لتحويل هذا الرقم إلى سلسلة وقم بتعيينه كنص لـ textview_random.

TextView randomView = view.getRootView (). findViewById (R.id.textview_random) ؛

randomView.setText (randomNumber.toString ()) ،

قم بتشغيل التطبيق. اضغط على زر Count عدة مرات ، ثم اضغط على زر Random. هل يعرض التطبيق رقمًا عشوائيًا في النشاط الجديد؟ 6cba94311109e72f.png

تهانينا ، لقد أنشأت أول تطبيق Android لك!

10. اعرف المزيد

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

نحن نشجعك على مواصلة التعلم. لدينا المزيد من دورات Android التي أنشأتها Google لمساعدتك في رحلة التعلم الخاصة بك.

دروس مكتوبة

تعلم أساسيات مطوري Android المبرمجين إنشاء تطبيقات Android. هذه الدورة متاحة أيضًا في بعض المدارس.

تعد دورة Kotlin Bootcamp Codelabs مقدمة إلى Kotlin للمبرمجين. أنت بحاجة إلى خبرة في لغة البرمجة الموجهة للكائنات (Java ، C ++ ، Python) لأخذ هذه الدورة.

اكتشف المزيد على developer.android.com ، الوثائق الرسمية لمطوري Android من Google.

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

تطوير تطبيقات Android في Kotlin: إذا كنت تعرف كيفية البرمجة ، فتعلم كيفية إنشاء تطبيقات Android. تستخدم هذه الدورة لغة Kotlin.

Kotlin Bootcamp للمبرمجين: هذه مقدمة إلى Kotlin للمبرمجين. أنت بحاجة إلى بعض الخبرة في لغة البرمجة الموجهة للكائنات (Java ، C ++ ، Python) لأخذ هذه الدورة التدريبية.