إضافة المزيد من العناصر إلى التطبيق | الوحدة الثالثة | الدرس الثاني

إضافة المزيد من العناصر إلى التطبيق هو عنوان الدرس الثاني من الوحدة الثالثة التي تحمل اسم “تطوير التطبيقات باستخدام مخترع التطبيقات” من مقرر “هندسة البرمجيات”.

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

لذا قم بقراءة أهداف التعلُّم بعناية، ثم أعد قراءتها وتأكَّد من تحصيل كافة محتوياتها بعد انتهائك من دراسة الموضوع.

أهداف التعلُّم

• تصميم الصفحة الرئيسة للتطبيق.
• إنشاء الشاشة الثانية للتطبيق.
• إنشاء الشاشة الثالثة للتطبيق.

هيا لنبدأ!

تصميم الصفحة الرئيسة (Designing the Home Screen)

في الموضوع السابق لقد قمنا بإنشاء الشاشة الرئيسة للتطبيق، وتضمنت زرًا يعرض رسالة عند الضغط عليه.

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

لإضافة مكوِّن VerticalArrangement (الترتيب العمودي):

1. من قسم Components (المكوِّنات) حدِّد زر Visit_KSA (زيارة_المملكة العربية السعودية).
2. ثم اضغط على Delete (حذف).
3. من مجموعة Layout (التخطيط)، أضف المُكوِّن VerticalArrangement (الترتيب العمودي) إلى الشاشة عن طريق سحبه وإفلاته في Viewer (العارض).
4. من مكوِّن VerticalArrangement1 (الترتيب العمودي)، عيِّن خاصية AlignHorizontal (المحاذاة الأفقية) إلى Center:3 (المنتصف:3).
5. عيِّن خاصية AlignVertical (المحاذاة العمودية) إلى Center:2 (المنتصف:2).
6. عيِّن خاصية BackgroundColor (لون الخلفية) إلى None (بدون).
7. اضبط خاصية Height (الارتفاع) إلى Fill parent (تعبئة المساحة).
8. اضبط خاصية Width (العرض) إلى Fill parent (تعبئة المساحة).

لإضافة زرّ باللغة الإنجليزية:

1. من مجموعة User Interface (واجهة المُستخدِم)، أضف المكوِّن Button (زرّ) إلى الشاشة.
2. أعد تسميته إلى discover_button_en (زرّ_اكتشف_بالإنجليزية).
3. في المكوِّن discover_button_en (زرّ_اكتشف_بالإنجليزية)، عيِّن خاصية BackgroundColor (لون الخلفية) إلى Custom (مخصص).
4. اكتب القيمة #28a595ff.
5. عيِّن خاصية Text (النصّ) إلى Discover (اكتشف).
6. عيِّن خاصية Shape (الشكل) إلى rectangular (مستطيل).
7. أخيرًا، عيِّن خاصية TextColor (لون النصّ) إلى White (أبيض).
8. كرِّر الخطوات السابقة لإضافة زرّ باللغة العربية.

لمعرفة المزيد من المعلومات عن مخترع تطبيقات أندرويد، قم بالاطّلاع على الرابط التالي:

مخترع تطبيقات أندرويد – ويكيبيديا

بإمكانك مراجعة محتوى موضوع “إضافة المزيد من العناصر إلى التطبيق” من بدايته وحتى نهاية هذا القسم، من خلال الرابط التالي:

إنشاء الشاشة الثانية للتطبيق (Creating the Second Screen of the App)

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

سنضيف الآن بعض الأزرار المفيدة على الشاشة الرئيسة ونجري بعض التغييرات على مظهرها.

لإضافة شاشة جديدة:

1. اضغط على زرّ Add screen (إضافة شاشة).
2. ثم أنشئ شاشة جديدة باسم Cities (المُدن).
3. في قسم Properties (الخصائص) لشاشة Cities (المُدن)، ألغ تحديد الخاصية TitleVisible (العنوان مرئي).
4. في خاصية BackgroundImage (صور الخلفية) ضَع صورة لعَلَم المملكة العربية السعودية.

لإضافة مكوِّن Label (التسمية):

1. من مجموعة User Interface (واجهة المُستخدِم)، أضف مكوِّن Label (التسمية) إلى الشاشة.
2. ثم أعد تسميته إلى Discover_label (اكتشف_التسمية).
3. في المُكوِّن Discover_label (اكتشف_التسمية)، اضبط خاصية BackgroundColor (لون الخلفية) إلى Black (أسود).
4. اضبط خاصية Width (العرض) إلى Fill parent (تعبئة المساحة).
5. اضبط خاصية Text (النصّ) إلى Discover Saudi Arabia (اكتشف المملكة العربية السعودية.
6. أخيرًا، اضبط خاصية TextColor (لون النصّ) إلى White (أبيض).

لإضافة مكوِّن VerticalArrangement (الترتيب العمودي):

1. من مجموعة Layout (التخطيط)، أضف مكوِّن VerticalArrangement (الترتيب العمودي) إلى الشاشة.
2. في مكوِّن VerticalArrangement (الترتيب العمودي)، اضبط خاصية BackgroundColor (لون الخلفية) إلى Custom (مخصص)، واكتب القيمة #11613eff.
3. في مكوِّن VerticalArrangement (الترتيب العمودي)، اضبط خاصية Height (الارتفاع) إلى Fill parent (تعبئة المساحة).
4. اضبط خاصية Width (العرض) إلى Fill parent (تعبئة المساحة).

لإضافة تسمية المُدن:

1. من مجموعة User Interface (واجهة المُستخدِم)، أضف مكوِّن Label (التسمية) إلى الشاشة.
2. أعد تسميته إلى cities_label (تسمية_المُدن).
3. في المُكوِّن cities_label (تسمية_المُدن)، اضبط خاصية BackgroundColor (لون الخلفية) إلى None(بدون).
4. اضبط الخاصية FontSize (حجم الخط) على 0.
5. اضبط خاصية Text (النصّ) إلى Cities (المُدن) واضبط خاصية TextColor (لون النصّ) إلى White(أبيض).

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

إنشاء قائمة Create a List

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

على سبيل المثال/ عند الضغط على صورة مدينة الرياض، ستظهر قائمة باثنين من أبرز معالم هذه المدينة على النحو التالي:

• Al Masmak (المصمك)
• Boulevard Riyadh City (بوليفارد مدينة الرياض).

سيتم استخدام المكون ListPicker (قائمة الخيارات) لتحديد معلم كل مدينة، وسيتم تمثيل كل مدينة بواسطة القائمة، ولهذا سيكون هناك قائمة لمدينة الرياض وقائمة لمدينة جدّة.

لإضافة المُكوِّن ListPicker (قائمة الخيارات) للرياض:

1. من مجموعة User Interface (واجهة المُستخدَم)، أضف Label (التسمية) باسم RIYADH (الرياض).
2. ثم أضف مكوِّن ListPicker (قائمة الخيارات) إلى Screen2 (شاشة 2).
3. أعد تسميته إلى riyadh_list (قائمة_الرياض).
4. في المُكوِّن riyadh_list (قائمة_الرياض)، اضبط خاصية Height (الارتفاع) إلى Fill parent (تعبئة المساحة).
5. اضبط خاصية Width (العرض) إلى Fill parent (تعبئة المساحة).
6. ثم حمِّل صورة الرياض من خاصية Image (صورة).
7. امسح النصّ الموجود سابقًا داخل حقل Text (النصّ).
8. كرِّر الخطوات لإضافة Label (التسمية) باسم JEDDAH (جِدَّة) وListPicker (قائمة الخيارات) الخاصة بها.

عند تشغيل التطبيق النهائي على هاتفك المحمول، سيعمل مكون ListPicker (قائمة الخيارات) بالطريقة التالية:

عند تحديد صورة لكل قائمة، تتغير محتويات الشاشة لإظهار قائمة الخيارات.

على سبيل المثال، عند الضغط على مكون ListPicker (قائمة الخيارات) الخاص بالرياض، سينفذ التطبيق الإجراء التالي:

إنشاء الشاشة الثالثة للتطبيق (Creating the Third Screen of the App)

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

ستعرض أيضًا زر للخريطة يتيح عرض خريطة تفاعلية تظهر موقع المعلم في المدينة المحددة.

سيكون لكل معلم شاشته الخاصة.

في هذا الموضوع سننشئ الشاشة الخاصة بالمصمك.

لإضافة عناصر على الشاشة:

1. من مجموعة Layout (التخطيط)، أضف مكوِّن VerticalArrangement (الترتيب العمودي) إلى الشاشة.
2. في مكوِّن VerticalArrangement1 (الترتيب العمودي1)، اضبط خاصية BackgroundColor (لون الخلفية) إلى Custom (مخصص)، ثم اكتب القيمة #11613eff.
3. في مكوِّن VerticalArrangement1 (الترتيب العمودي1)، اضبط خاصية Height (الارتفاع) على Fill parent (تعبئة المساحة).
4. اضبط خاصية Width (العرض) إلى Fill parent (تعبئة المساحة).
5. من مجموعة User Interface (واجهة المُستخدِم)، أضف مكوِّن Label (التسمية) إلى الشاشة، وأعد تسميته إلى title_label (تسمية_العنوان).
6. في مكوِّن title_label (تسمية_العنوان)، اضبط خاصية BackgroundColor (لون الخلفية) إلى None(بدون).
7. اضبط خاصية FontSize (حجم الخط) إلى 0.
8. اضبط خاصية Text (النصّ) إلى AI Masmak (المصمك).
9. اضبط خاصية TextColor (لون النصّ) إلى White (أبيض).

لإضافة المُكوِّن Image (صورة):

1. من مجموعة User Interface (واجهة المُستخدِم)، أضف المُكوِّن Image (صورة) إلى Screen1 (شاشة 1).
2. أعد تسميته إلى image (صورة).
3. في المكوِّن image (صورة)، اضبط خاصية Height (الارتفاع) إلى Fill parent (تعبئة المساحة).
4. اضبط خاصية Width (العرض) إلى Fill parent (تعبئة المساحة).
5. اضبط خاصية Picture (الصورة) إلى صورة قصر المصمك.

لاحظ أن

لا يمكِن أن يتشابه اسم المكوِّن مع تسميته، لكن تسمية image هنا تختلف عن المُكوِّن Image.

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

لإضافة مكوِّن الوصف النصّي:

1. من مجموعة User Interface (واجهة المُستخدِم)، أضف مكوِّن Label (التسمية) إلى الشاشة.
2. أعد تسميته إلى description_label (تسمية_الوصف).
3. في مكوِّن description_label (تسمية_الوصف)، اضبط خاصية Height (الارتفاع) إلى Fill parent(تعبئة المساحة).
4. اضبط خاصية BackgroundColor (لون الخلفية) إلى None (بدون).
5. اضبط خاصية TextColor (لون النصّ) إلى White (أبيض).

لاحظ أن

سيتم تغيير حجم الصورة بشكلٍ صحيح عند إضافة المزيد من المُكوِّنات.

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

إضافة خريطة تفاعلية للتطبيق (Adding an Interactive Map to the Application)

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

ستُنشئ في البداية مجمعًا للزر الذي سيعرض الخريطة التفاعلية، ثم ستُضيف المكون.

لإضافة مكوِّن HorizontalArrangement (الترتيب الأفقي):

1. من مجموعة Layout (التخطيط)، أضف مكوِّن HorizontalArrangement (الترتيب الأفقي) إلى الشاشة.
2. في مكوِّن HorizontalArrangement1 (الترتيب الأفقي1)، اضبط خاصية BackgroundColor (لون الخلفية) إلى None (بدون).
3. اضبط خاصية AlignHorizontal (المحاذاة الأفقية) إلى Center: 3 (المنتصف:3).
4. اضبط الخاصية AlignVertical (المحاذاة العمودية) إلى Bottom: 3 (الأسفل:3).
5. اضبط خاصية Height (الارتفاع) إلى Fill parent (تعبئة المساحة).
6. اضبط خاصية Width (العرض) إلى Fill parent (تعبئة المساحة).

لإضافة زرّ Map (الخريطة):

1. من مجموعة User Interface (واجهة المُستخدِم)، أضف المُكوِّن Button (زرّ) إلى Screen1 (شاشة1).
2. أعد تسميته إلى map_button (زرّ_الخريطة).
3. في المُكوِّن map_button (زرّ_الخريطة)، اضبط خاصية BackgroundColor (لون الخلفية) إلى None (بدون).
4. امسح النصّ من حقل Text (النصّ).
5. اضبط خاصية Image (صورة) إلى أيقونة خريطة.

لإضافة مكوِّن Map (الخريطة):

1. من مجموعة Maps (الخرائط)، حدِّد المُكوِّن Map (خريطة).
2. ضعه ضمن HorizontalArrangement1 (الترتيب الأفقي1).
3. اضبط خاصية Height (الارتفاع) إلى Fill parent (تعبئة المساحة).
4. اضبط خاصية Width (العرض) إلى Fill parent (تعبئة المساحة).
5. ألغِ تحديد خاصية Visible (مرئي).
6. اضبط خاصية ZoomLevel (مستوى التكبير) إلى الرقم 16.

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

معلومة

يمكن التفاعل مع مكون الخريطة بالطريقة نفسها المعروفة في خرائط التطبيقات الأخرى.

بإمكانك مراجعة محتوى موضوع “إضافة المزيد من العناصر إلى التطبيق” بدايةً من عنوان “إضافة خريطة تفاعلية للتطبيق” وحتى نهاية الموضوع، من خلال الرابط التالي:

اختبر تحصيلك لمحتوى الموضوع من خلال الرابط التالي:

الواجب الإلكتروني

إلى هنا يكون قد انتهى موضوع “إضافة المزيد من العناصر إلى التطبيق”، لا تنسوا مراجعة أهداف التعلُّم أعلى المقال، وانتظرونا في الموضوع القادم!

روابط هامة

مقررات الفصل الدراسي الأول