إنشاء تطبيق بطاقة تاريخ الميلاد

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

المتطلّبات الأساسية

• كيفية إنشاء تطبيق جديد في "استوديو Android"
• كيفية تشغيل تطبيق في المحاكي أو على جهازك الذي يعمل بنظام التشغيل Android

ما ستتعرَّف عليه

• ما المقصود بعناصر واجهة المستخدم، مثل Views وViewGroups؟
• طريقة عرض نص في TextView في أحد التطبيقات
• كيفية ضبط السمات، مثل النص والخط والهامش على TextView.

العناصر التي ستنشئها

• تطبيق Android يعرض رسالة ترحيب عيد الميلاد بتنسيق نصي.

هذا هو تطبيقك الذي سيتم عرضه عند الانتهاء.

ما تحتاج إليه

• جهاز كمبيوتر تم تثبيت Android Studio عليه.

إنشاء مشروع نشاط فارغ

1. للبدء، يمكنك إنشاء مشروع جديد بلغة Kotlin في "استوديو Android" باستخدام نموذج النشاط الفارغ.
2. عليك استدعاء التطبيق "عيد ميلاد سعيد", مع حد أدنى لمستوى واجهة برمجة التطبيقات يبلغ 19 (KitKat).

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

3. شغِّل تطبيقك. ومن المفترض أن يظهر التطبيق كلقطة الشاشة أدناه.

عندما أنشأت تطبيق عيد ميلاد سعيد باستخدام نموذج "نشاط فارغ"، يُعِدّ "استوديو Android" موارد لتطبيق أساسي متوافق مع Android، بما في ذلك رسالة &&quot؛مرحبًا بالعالم!" في منتصف الشاشة. في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية وصول هذه الرسالة إلى نصّها وكيفية تغيير نصه ليصبح رسالة ترحيب بمناسبة عيد الميلاد وكيفية إضافة رسائل إضافية وتنسيقها.

لمحة عن واجهات المستخدم

واجهة المستخدم (UI) للتطبيق هي ما تراه على الشاشة: النصوص والصور والأزرار والعديد من أنواع العناصر الأخرى. إنها توضّح كيفية عرض التطبيق للعناصر على المستخدم، وكيفية تفاعل المستخدم مع التطبيق.

كل عنصر من هذه العناصر يُسمى View. كل ما تراه على شاشة تطبيقك هو View تقريبًا. يمكن أن يكون Views تفاعليًا، مثل زر يمكن النقر عليه أو حقل إدخال قابل للتعديل.

في هذا الدرس التطبيقي حول الترميز، يمكنك استخدام نوع View المخصّص لعرض النص وهو TextView.

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

أحد أنواع ViewGroup هو ConstraintLayout، الذي يساعدك على ترتيب Views داخله بطريقة مرنة.

لمحة عن محرر التنسيق

يشكّل إنشاء واجهة المستخدم عن طريق ترتيب Views وViewGroups جزءًا كبيرًا من إنشاء تطبيق Android. يوفّر Android Studio أداة تساعدك على ذلك، وتسمى محرر التصميم. يمكنك استخدام محرِّر التنسيق لتغيير &النص، مرحبًا بالعالم!"، إلى &على سبيل المثال، عيد ميلاد سعيد!"، ولاحقًا، لاختيار نمط النص.

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

• على يمين الصفحة (1)، هناك نافذة المشروع التي رأيتها من قبل. يتم إدراج جميع الملفات التي يتألف منها مشروعك.
• يظهر في وسط الشاشة رسمان (4) و (5) يمثّلان تنسيق الشاشة لتطبيقك. ويمثل التمثيل على اليمين (4) تقريبًا لما ستبدو عليه شاشتك عند تشغيل التطبيق. ويُطلق عليه اسم التصميم.
• التمثيل على اليسار (5) هو عرض المخطط، الذي يمكن أن يكون مفيدًا لعمليات معينة.
• تحتوي لوحة الألوان (2) على قوائم بأنواع مختلفة من Views والتي يمكنك إضافتها إلى تطبيقك.
• تمثل شجرة المكوّنات (3) تمثيلاً مختلفًا لمرات مشاهدة الشاشة. تعرض هذه الصفحة جميع طرق العرض على شاشتك.
• في أقصى يسار الصفحة (6)، تكون السمات. وتعرض لك سمات View وتسمح لك بتغييرها.

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

لقطة شاشة توضيحية لـ محرر التنسيق بالكامل:

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

تغيير رسالة Hello World

1. في "استوديو Android"، ابحث عن نافذة المشروع على اليمين.
2. دوِّن هذه المجلدات والملفات: يحتوي مجلد التطبيق على معظم ملفات التطبيق الذي ستغيّره. مجلد res مخصص للموارد، مثل الصور أو تنسيقات الشاشة. مجلد التنسيق مخصص لتنسيقات الشاشة. يحتوي الملف activity_main.xml على وصف لتنسيق الشاشة.
3. وسِّع مجلد التطبيق، ثم مجلد res، ثم مجلد التنسيق.
4. انقر مرّتين على activity_main.xml.
   سيؤدي ذلك إلى فتح activity_main.xml في محرر التنسيق ويعرض التنسيق الذي يصفه في عرض التصميم.
   

ملاحظة: ضمن الدروس التطبيقية حول الترميز، سيُطلب منك فتح ملف كما في الخطوات السابقة. باختصار، يمكن اختصار هذا الإجراء كالتالي:
1. افتح activity_main.xml (res > Layout > activity_main.xml)
بدلاً من إدراج كل خطوة بشكل منفصل.

5. اطّلِع على قائمة الملفات الشخصية في شجرة المكوّنات. لاحظ أن هناك ConstraintLayout، وTextView أسفله.
   تمثّل هذه القيمة واجهة المستخدم لتطبيقك. ويتم إضافة مسافة بادئة لـ TextView لأنها داخل ConstraintLayout. عند إضافة المزيد من العناصر Views إلى ConstraintLayout، ستتم إضافتها إلى هذه القائمة.
6. يُرجى العِلم بأنّ الرمز TextView يتضمّن "مرحبًا العالم!" بجانبه، وهو النص الذي تراه عند تشغيل التطبيق.
   
7. في شجرة المكوّنات، انقر على TextView.
8. ابحث عن السمات على يسار الصفحة.
9. ابحث عن القسم السمات المُعلَنة.
10. لاحِظ أنّ السمة text في قسم السمات المُعلَنة تحتوي على مرحبًا العالم.
    

تعرض السمة text النص المطبوع في TextView.

11. انقر على السمة text (النص) حيث يظهر نص مرحبًا بك في.
12. غيِّر كلمة عيد ميلاد سعيد!، ثم اضغط على مفتاح Enter. إذا ظهر لك تحذير بشأن سلسلة ثابتة، لا داعي للقلق في الوقت الحالي. ستتعرّف على كيفية التخلص من هذا التحذير في الدرس التطبيقي التالي حول الترميز.
13. لاحظ أن النص قد تغيّر في عرض التصميم....(هذا رائع، يمكنك مشاهدة تغييراتك على الفور).
14. شغِّل تطبيقك الآن، وستظهر عبارة عيد ميلاد سعيد.
    

أحسنت لقد أجريت التغييرات الأولى على تطبيق Android.

تبدو بطاقة عيد الميلاد التي تنشئها مختلفة عن تلك الموجودة في تطبيقك الآن. بدلاً من استخدام النص الصغير في الوسط، ستحتاج إلى رسالتين كبيرتين، واحدة في أعلى اليمين وأخرى في أسفل اليسار. في هذه المهمة، ستحذف TextView الحالية وتضيف TextViews جديدين وتتعرّف على كيفية تحديد موضعين داخلهما في ConstraintLayout.

حذف تطبيق TextView الحالي

1. في محرر التنسيق، انقر لاختيار TextView في منتصف التنسيق.
   
2. اضغط على المفتاح حذف.
   يحذف "استوديو Android" TextView، ويعرض تطبيقك الآن ConstraintLayout في محرّر التنسيق وشجرة المكونات.
   

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

إضافة عرض نصي

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

تحتوي لوحة الألوان في أعلى يمين محرّر التنسيق على قوائم من أنواع مختلفة من Views، منظمة حسب الفئة، والتي يمكنك إضافتها إلى تطبيقك.

1. ابحث عن TextView. وتظهر في كل من الفئة الشائعة والفئة النصية.
   
2. اسحب TextView من لوحة الألوان إلى أعلى يمين سطح التصميم في محرر التنسيق وأفلته.
   لست بحاجة إلى الدقة، ما عليك سوى إفلاته بالقرب من أعلى يمين الصفحة.
   
3. يُرجى ملاحظة أنّه تمت إضافة علامة TextView، ورصد علامة تعجب حمراء في شجرة المكوّنات.
4. مرّر مؤشر الماوس فوق علامة التعجب، وستظهر لك رسالة تحذير تفيد بأن الملف الشخصي غير محدود وستنتقل إلى موضع مختلف عند تشغيل التطبيق. وسيتم إصلاحه في الخطوة التالية.
   

وضع عرض النص

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

سيتم تطبيق هوامش على القيود التي تضيفها إلى أعلى وأسفل اليسار. يحدِّد هامش مدى بُعد View عن حافة الحاوية.

1. في السمات على اليسار، ابحث عن أداة التقييد في قسم التنسيق. المربع يمثل طريقة العرض.
   
2. انقر على + في الجزء العلوي من المربع. وهذا هو للقيد بين أعلى عرض النص والحافة العليا من تنسيق القيد.
3. يظهر حقل يتضمن رقمًا لتحديد الهامش العلوي. الهامش هو المسافة من TextView إلى حافة الحاوية، ConstraintLayout. سيكون الرقم الذي يظهر مختلفًا بناءً على مكان إسقاط TextView. عند ضبط الهامش العلوي، يضيف "استوديو Android" أيضًا قيودًا من أعلى عرض النص إلى أعلى ConstrainLayout.
   تلقائيًا.
4. غيِّر الهامش العلوي إلى 16.

ملاحظة: إنّ وحدة الهوامش والمسافات الأخرى في واجهة المستخدم هي وحدات بكسل مستقلة الكثافة (dp). النتيجة مثل السنتيمترات أو البوصات، ولكن بالنسبة إلى المسافات على الشاشة. يحوّل نظام التشغيل Android هذه القيمة إلى العدد المناسب لوحدات البكسل الحقيقية لكل جهاز. وبشكلٍ مرجعي، يكون 1dp حوالي 1/160 من البوصة، ولكنه قد يكون أكبر أو أصغر بالنسبة إلى بعض الأجهزة.

5. نفِّذ الإجراء نفسه مع الهامش الأيسر.
   
6. اضبط النص لتجعل صديقك يحتفل بعيد ميلاده، مثلاً "عيد ميلاد سعيد سامي!" واضغط على Enter.
   
7. تجدر الإشارة إلى أنه يتم تعديل طريقة عرض التصميم لعرض الشكل الذي سيظهر به تطبيقك.
   

إضافة عرض نص آخر ووضعه

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

1. اسحب TextView جديدًا من لوحة الألوان وأفلته بالقرب من أسفل يسار الملف الشخصي للتطبيق في محرّر التنسيقات.
   
2. اضبط هامشًا أيمنًا بقيمة 16.
3. ضبط هامش سفلي على 16.
   
4. في السمات، اضبط السمة text لتوقيع بطاقتك، مثل "From Emma"
5. شغِّل تطبيقك. من المفترض أن يظهر تاريخ ميلادك في أعلى يمين الصفحة وتوقيعك في أسفل يسار الصفحة.
   

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

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

1. انقر على أول TextView في شجرة المكونات وابحث عن قسم السمات المشتركة في نافذة السمات. قد تحتاج إلى الانتقال لأسفل الصفحة للعثور على هذا الخيار.
2. لاحِظ السمات المختلفة، بما في ذلك fontFamily وtextSize وtextColor.
   
3. ابحث عن Textالمظهر.
4. إذا لم يتم توسيع TextText، انقر على المثلث المتّجه للأسفل.
5. اضبط textSize على 36sp.
   

ملاحظة: تمامًا مثل وحدات البكسل غير المرتبطة بالكثافة هي وحدة قياس للمسافة على الشاشة، حيث إن sp هي وحدة قياس لحجم الخط. تستخدم عناصر واجهة المستخدم في تطبيقات Android وحدتَين مختلفتَين من وحدات القياس، وحدات بكسل مستقلة الكثافة (dp) استخدمتها سابقًا للتنسيق، ووحدات بكسل قابلة للتوسّع (sp) يتم استخدامها عند ضبط حجم النص. وبشكل تلقائي، يكون عنصر sp هو نفس حجم وحدة البكسل غير المرتبطة بالكثافة، إلا أنه يتغير حجمها استنادًا إلى حجم النص المفضّل لدى المستخدم.

6. لاحِظ التغيير في محرر التنسيقات.
   
7. غيِّر fontFamily إلى gasual.
8. جرِّب بعض الخطوط المختلفة للتعرّف على شكلها. هناك المزيد من الخيارات للخطوط في الجزء السفلي من القائمة، ضمن مزيد من الخطوط...
9. عند الانتهاء من تجربة خطوط مختلفة، اضبط fontFamily على sans-serif-light.
10. انقر على مربّع التعديل textColor، وابدأ كتابة اللون الأسود.
    يُرجى ملاحظة أنه أثناء الكتابة، يعرض "استوديو Android" قائمة بالألوان التي تحتوي على النص الذي كتبته حتى الآن.
    
11. اختَر @android:color/black من قائمة الألوان واضغط على Enter.
12. في TextView باستخدام توقيعك، غيِّر textSize وtextColor وfontFamily للمطابقة.
13. شغِّل تطبيقك واطّلِع على النتيجة.
    

تهانينا، لقد اتخذت الخطوات الأولى لإنشاء تطبيق بطاقة أعياد الميلاد.

• يساعدك محرر التنسيق في إنشاء واجهة مستخدم لتطبيق Android.
• كل ما تراه على شاشة تطبيقك هو View تقريبًا.
• TextView هو عنصر واجهة المستخدم لعرض النص في تطبيقك.
• ConstraintLayout هي حاوية لعناصر واجهة المستخدم الأخرى.
• يجب تقييد Views أفقيًا ورأسيًا في ConstraintLayout.
• وتتمثل إحدى طرق وضع View في هامش.
• يشير هامش إلى بُعد View عن حافة الحاوية.
• ويمكنك ضبط السمات على TextView مثل الخط وحجم النص واللون.

• View
• TextView
• ConstraintLayout
• dp مقابل sp
• محرر التنسيق في "استوديو Android"