‫Kotlin Android Fundamentals 10.1: الأنماط والسمات

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

مقدمة عن التصميم

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

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

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

إذا لم يكن بإمكانك الاستعانة بمصمّم، إليك بعض النصائح لمساعدتك على البدء:

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

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

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

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

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

التصميم الجيد هو أهم طريقة لجذب المستخدمين إلى تطبيقك.

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

ما يجب معرفته

يجب أن تكون على دراية بما يلي:

  • كيفية إنشاء تطبيقات تتضمّن أنشطة ولقطات، والتنقّل بين اللقطات مع تمرير البيانات
  • استخدام طرق العرض ومجموعات طرق العرض لتصميم واجهة مستخدم، بما في ذلك RecyclerView
  • كيفية استخدام "مكوّنات البنية"، بما في ذلك ViewModel، مع البنية المقترَحة لإنشاء تطبيق منظَّم وفعّال
  • ربط البيانات والروتينات المشتركة وكيفية التعامل مع النقرات
  • كيفية الاتصال بالإنترنت وتخزين البيانات مؤقتًا على الجهاز باستخدام قاعدة بيانات Room
  • كيفية ضبط خصائص العرض
  • كيفية استخراج الموارد إلى ملفات موارد XML واستخدامها منها

أهداف الدورة التعليمية

  • أساسيات نظام التصميم في Android
  • كيفية استخدام السمات والأنماط والمظاهر لتخصيص تطبيقك

الإجراءات التي ستنفذّها

  • تحسين تصميم تطبيق أولي باستخدام سمات العرض والأنماط والمظاهر

يعتمد تطبيق GDG-finder المبدئي على كل ما تعلّمته حتى الآن في هذه الدورة التدريبية.

يستخدم التطبيق ConstraintLayout لتنسيق ثلاث شاشات. الشاشتان عبارة عن ملفات تصميم ستستخدمها لاستكشاف الألوان والنصوص على Android.

الشاشة الثالثة هي أداة بحث عن مجموعات مطوّري Google. مجموعات Google Developer Group (GDG) هي منتديات للمطوّرين تركّز على تقنيات Google، بما في ذلك Android. تستضيف منتديات GDG في جميع أنحاء العالم لقاءات ومؤتمرات وجلسات دراسية وفعاليات أخرى.

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

إذا كنت محظوظًا وكان هناك مجموعة مطوّري Google في منطقتك، يمكنك الاطّلاع على الموقع الإلكتروني والاشتراك في فعالياتهم. تُعدّ فعاليات "مجموعة مطوّري Google" طريقة رائعة للتعرّف على مطوّري تطبيقات Android آخرين والاطّلاع على أفضل الممارسات في المجال التي لم تتسع لها هذه الدورة التدريبية.

تعرض لقطات الشاشة أدناه كيف سيتغير تطبيقك من بداية هذا الدرس العملي إلى نهايته.

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

عرض السمات

  • استخدِم سمات العرض لضبط السمات بشكلٍ صريح لكل عرض. (لا يمكن إعادة استخدام سمات العرض، كما هو الحال مع الأنماط).
  • يمكنك استخدام كل سمة يمكن ضبطها من خلال الأنماط أو المظاهر.

يُستخدَم للتصاميم المخصّصة أو الفريدة، مثل الهوامش أو المساحات المتروكة أو القيود.

الأنماط

  • استخدِم نمطًا لإنشاء مجموعة من معلومات التنسيق القابلة لإعادة الاستخدام، مثل حجم الخط أو الألوان.
  • وهي مناسبة لتعريف مجموعات صغيرة من التصاميم الشائعة المستخدَمة في جميع أنحاء تطبيقك.

تطبيق نمط على عدّة طرق عرض، مع تجاهل النمط التلقائي على سبيل المثال، استخدِم نمطًا لإنشاء عناوين أو مجموعة أزرار متّسقة.

النمط التلقائي

  • هذا هو التصميم التلقائي الذي يوفّره نظام التشغيل Android.

المظاهر

  • استخدِم سمة لتحديد الألوان في تطبيقك بالكامل.
  • استخدِم مظهرًا لضبط الخط التلقائي للتطبيق بأكمله.
  • تنطبق على جميع طرق العرض، مثل طرق عرض النصوص أو أزرار الاختيار.
  • تُستخدَم لإعداد المواقع التي يمكنك تطبيقها بشكل متّسق على التطبيق بأكمله.

TextAppearance

  • للتصميم باستخدام سمات النص فقط، مثل fontFamily

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

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

في هذه المهمة، ستستخدم السمات لتصميم العناوين الخاصة بالنص في تخطيط التطبيق.

  1. نزِّل تطبيق GDG-finder المبدئي وشغِّله.
  2. لاحظ أنّ الشاشة الرئيسية تتضمّن الكثير من النصوص المنسّقة بشكل موحّد، ما يصعّب معرفة موضوع الصفحة والمحتوى المهم فيها.
  3. افتح ملف التنسيق home_fragment.xml.
  4. يُرجى العِلم أنّ التنسيق يستخدم ConstraintLayout لتحديد موضع العناصر داخل ScrollView.
  5. لاحظ أنّه بالنسبة إلى كل طريقة عرض، يتم ضبط سمات تخطيط القيود والهوامش في طريقة العرض، لأنّ هذه السمات تميل إلى أن تكون مخصّصة لكل طريقة عرض وشاشة.
  6. في عرض النص title، أضِف السمة textSize لتغيير حجم النص إلى 24sp.

    للتذكير، يرمز sp إلى وحدات البكسل المستقلة عن الحجم، والتي يتم تغيير حجمها حسب كثافة البكسل وإعدادات حجم الخط المفضّلة التي يضبطها المستخدم في إعدادات الجهاز. يحدّد نظام التشغيل Android حجم النص الذي يجب عرضه على الشاشة عند رسم النص. استخدِم sp دائمًا لأحجام النصوص.
<TextView
       android:id="@+id/title"
...

android:textSize="24sp"
  1. اضبط textColor لعرض النص title على اللون الرمادي الداكن، وذلك من خلال ضبطه على قيمة aRGB‏ #FF555555. 
<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"
  1. لفتح علامة التبويب معاينة في Android Studio، اختَر عرض > نوافذ الأدوات > معاينة، أو انقر على الزر العمودي معاينة على الحافة اليسرى من "أداة تعديل التصميم". في المعاينة، تأكَّد من أنّ العنوان باللون الرمادي وأكبر من السابق، كما هو موضّح أدناه.

  1. نسِّق العنوان الفرعي ليكون له اللون نفسه الخاص بالعنوان الرئيسي، مع خط أصغر، 18sp. (قيمة ألفا التلقائية هي FF، أي غير شفافة. يمكنك حذف قيمة ألفا إذا كنت لا تريد تغييرها.)
<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

  1. في هذا الدرس التطبيقي حول الترميز، الهدف هو تصميم التطبيق ليكون مرحًا بعض الشيء مع الحفاظ على مظهره الاحترافي، ولكن يمكنك تصميمه بأي طريقة تريدها. جرِّب السمات التالية لعنصر subtitle لعرض النص. استخدِم علامة التبويب معاينة لمعرفة كيفية تغيُّر مظهر تطبيقك. بعد ذلك، أزِل هذه السمات.
<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"
  1. لا تنسَ التراجع عن السمات textAllCaps وtextStyle وbackground من العرض subtitle قبل المتابعة.
  2. شغِّل تطبيقك، ومن المفترض أن يبدو أفضل.

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

يتيح نظام التشغيل Android للتطبيقات تنزيل الخطوط في وقت التشغيل باستخدام واجهة برمجة التطبيقات Downloadable Fonts API. إذا كان تطبيقك يستخدم الخط نفسه الذي يستخدمه تطبيق آخر على الجهاز، لن ينزّل نظام التشغيل Android الخط إلا مرة واحدة، ما يؤدي إلى توفير مساحة التخزين على الجهاز.

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

الخطوة 1: تطبيق خط قابل للتنزيل

  1. افتح home_fragment.xml في علامة التبويب تصميم.
  2. في لوحة شجرة المكوّنات، اختَر طريقة عرض النص title.
  3. في لوحة السمات، ابحث عن السمة fontFamily. يمكنك العثور عليها في قسم جميع السمات أو يمكنك البحث عنها.
  4. انقر على سهم القائمة المنسدلة.
  5. انتقِل إلى مزيد من الخطوط واخترها. تفتح نافذة المراجع.

  1. في نافذة المراجع، ابحث عن lobster أو lo فقط.
  2. في النتائج، اختَر Lobster Two.
  3. على يسار الصفحة، أسفل اسم الخط، انقر على زر الاختيار إنشاء خط قابل للتنزيل. انقر على حسنًا.
  4. افتح ملف AndroidManifest.xml.
  5. ابحث عن علامة <meta-data> الجديدة بالقرب من أسفل ملف البيان، مع ضبط السمتَين name وresource على القيمة "preloaded_fonts". تُعلم هذه العلامة "خدمات Google Play" أنّ هذا التطبيق يريد استخدام الخطوط التي تم تنزيلها. عند تشغيل تطبيقك وطلبه خط Lobster Two، سيقوم موفّر الخط بتنزيل الخط من الإنترنت، إذا لم يكن الخط متاحًا على الجهاز.
<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>
  1. في المجلد res/values، ابحث عن الملف preloaded_fonts.xml الذي يحدّد المصفوفة التي تسرد جميع الخطوط القابلة للتنزيل لهذا التطبيق.
  2. وبالمثل، يحتوي ملف res/fonts/lobster_two.xml على معلومات حول الخط.
  3. افتح home_fragment.xml ولاحظ في الرمز والمعاينة أنّه تم تطبيق خط Lobster Two على title TextView، وبالتالي تم تطبيقه على العنوان.

  1. افتح res/values/styles.xml وافحص المظهر التلقائي AppTheme الذي تم إنشاؤه للمشروع. يظهر حاليًا بالشكل الموضّح أدناه. لتطبيق خط Lobster Two الجديد على كل النص، عليك تعديل هذا المظهر.
  2. في العلامة <style>، لاحظ السمة parent. يمكن لكل علامة نمط تحديد عنصر رئيسي وتلقّي جميع سمات العنصر الرئيسي. يحدّد الرمز Theme الذي تحدّده مكتبات Android. MaterialComponents هو المظهر الذي يحدّد كل شيء، بدءًا من طريقة عمل الأزرار إلى كيفية رسم أشرطة الأدوات. يتضمّن المظهر إعدادات تلقائية منطقية، لذا يمكنك تخصيص الأجزاء التي تريدها فقط. يستخدم التطبيق الإصدار Light من هذا المظهر بدون شريط الإجراءات (NoActionBar)، كما هو موضّح في لقطة الشاشة أعلاه.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>
</style>
  1. داخل نمط AppTheme، اضبط مجموعة الخطوط على lobster_two. يجب ضبط كل من android:fontFamily وfontFamily، لأنّ المظهر الرئيسي يستخدم كليهما. يمكنك وضع علامة في المربّع home_fragment.xml ضمن علامة التبويب تصميم لمعاينة التغييرات.
<style name="AppTheme"  
...    
        <item name="android:fontFamily">@font/lobster_two</item>
        <item name="fontFamily">@font/lobster_two</item>
  1. تشغيل التطبيق مرة أخرى يتم تطبيق الخط الجديد على كل النص. افتح قائمة التنقّل وانتقِل إلى الشاشات الأخرى، وستلاحظ أنّه تم تطبيق الخط عليها أيضًا.

الخطوة 2: تطبيق المظهر على العنوان

  1. في home_fragment.xml، ابحث عن عرض النص title الذي يحتوي على سمة الخط lobster_two. احذف السمة fontFamily وشغِّل التطبيق. لن يحدث أي تغيير لأنّ المظهر يضبط مجموعة الخطوط نفسها.
  2. إعادة سمة fontFamily مختلفة إلى طريقة عرض النص title:
    app:fontFamily="serif-monospace"
    تأكَّد من أنّها في المساحة app.
<TextView
       android:id="@+id/title"
       ...
       app:fontFamily="serif-monospace"
  1. شغِّل التطبيق، وستلاحظ أنّ السمة المحلية للعرض تتجاوز المظهر.
  1. أزِل السمة fontFamily من عرض النص title.

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

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

الخطوة 1: إنشاء نمط

  1. فتح "res/values/styles.xml"
  2. داخل العلامة <resources>، حدِّد نمطًا جديدًا باستخدام العلامة <style>، كما هو موضّح أدناه.
<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
</style>

من المهم التفكير في أسماء الأنماط على أنّها دلالية عند تسميتها. اختَر اسم نمط استنادًا إلى الغرض من استخدام النمط، وليس استنادًا إلى الخصائص التي يؤثّر فيها النمط. على سبيل المثال، استخدِم الاسم Title لهذا النمط، وليس اسمًا مثل LargeFontInGrey. سيتم استخدام هذا النمط مع أي عنوان في أي مكان في تطبيقك. وكاصطلاح، تُسمّى أنماط TextAppearance TextAppearance.Name، لذا في هذه الحالة، يكون الاسم TextAppearance.Title.

للتصميم عنصر رئيسي، تمامًا كما يمكن أن يكون للمظهر عنصر رئيسي. ولكن هذه المرة، بدلاً من توسيع نطاق مظهر، يوسّع النمط نطاق نمط، TextAppearance.MaterialComponents.Headline6. هذا النمط هو نمط نص تلقائي لمظهر MaterialComponents، لذا من خلال توسيعه، يمكنك تعديل النمط التلقائي بدلاً من البدء من الصفر.

  1. داخل النمط الجديد، حدِّد عنصرَين. في أحد العناصر، اضبط قيمة textSize على 24sp. في العنصر الآخر، اضبط textColor على اللون الرمادي الداكن نفسه الذي استخدمته سابقًا. 
 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>
  1. حدِّد نمطًا آخر للترجمة والشرح. أطلِق عليه الاسم TextAppearance.Subtitle.
  2. بما أنّ الاختلاف الوحيد عن TextAppearance.Title سيكون في حجم النص، اجعل هذا النمط نمطًا فرعيًا من TextAppearance.Title.
  3. داخل نمط Subtitle، اضبط حجم النص على 18sp. في ما يلي النمط المكتمل:
<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

الخطوة 2: تطبيق النمط الذي أنشأته

  1. في home_fragment.xml، أضِف TextAppearance.Title نمط إلى طريقة عرض النص title احذف السمتَين textSize وtextColor.

    تلغي المظاهر أي تنسيق TextAppearance ضبطته. (يوضّح الرسم البياني الهرمي في بداية الدرس التطبيقي حول الترميز الترتيب الذي يتم به تطبيق الأنماط). استخدِم السمة textAppearance لتطبيق النمط كـ TextAppearance حتى يتمكّن الخطّ الذي تم ضبطه في Theme من إلغاء ما تم ضبطه هنا.
<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"
  1. أضِف أيضًا نمط TextAppearance.Subtitle إلى طريقة عرض النص subtitle، واحذف السمتَين textSize وtextColor. عليك تطبيق هذا النمط كـ textAppearance أيضًا، حتى تتجاوز مجموعة الخطوط المحدّدة في المظهر ما تحدّده هنا.
<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"
  1. شغِّل التطبيق وسيتم الآن تنسيق النص بشكل متّسق.

مشروع "استوديو Android": GDGFinderStyles.
  • استخدِم المظاهر والأنماط والسمات في طرق العرض لتغيير مظهرها.
  • تؤثر المظاهر في تصميم تطبيقك بالكامل، وتتضمّن العديد من القيم المُعدّة مسبقًا للألوان والخطوط وأحجام الخطوط.
  • تنطبق السمة على طريقة العرض التي تم ضبط السمة فيها. استخدِم السمات إذا كان لديك تصميم ينطبق على طريقة عرض واحدة فقط، مثل المساحة المتروكة والحواف والقيود.
  • الأنماط هي مجموعات من السمات التي يمكن استخدامها في طرق عرض متعددة. على سبيل المثال، يمكنك استخدام نمط لجميع عناوين المحتوى أو الأزرار أو طرق عرض النصوص.
  • تكتسب التصاميم والأنماط من التصميم أو النمط الرئيسي. يمكنك إنشاء تسلسل هرمي للأنماط.
  • تلغي قيم السمات (التي يتم ضبطها في طرق العرض) الأنماط. تلغي الأنماط النمط التلقائي. تتجاوز الأنماط المظاهر. تلغي النُسق أي تنسيق تم ضبطه باستخدام السمة textAppearance.

  • حدِّد الأنماط في ملف الموارد styles.xml باستخدام علامتَي <style> و<item>.
<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

يتيح استخدام الخطوط القابلة للتنزيل توفير الخطوط للمستخدمين بدون زيادة حجم حِزمة APK. لإضافة خط قابل للتنزيل لطريقة عرض:

  1. اختَر طريقة العرض في علامة التبويب التصميم، ثم اختَر المزيد من الخطوط من القائمة المنسدلة للسمة fontFamily.
  2. في مربّع الحوار الموارد، ابحث عن خط وحدِّد زر الاختيار إنشاء خط قابل للتنزيل.
  3. تأكَّد من أنّ بيان Android يتضمّن علامة بيانات وصفية للخطوط المحمَّلة مسبقًا.

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

مستندات مطوّري تطبيقات Android:

مراجع أخرى:

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

  • حدِّد واجبًا منزليًا إذا لزم الأمر.
  • توضيح كيفية إرسال الواجبات المنزلية للطلاب
  • وضع درجات للواجبات المنزلية

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

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

الإجابة عن هذه الأسئلة

السؤال 1

ما هي العلامة المستخدَمة لتحديد المظاهر؟

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

السؤال 2

أيّ مما يلي لا يُعدّ استخدامًا جيدًا للأنماط؟

▢ حدِّد قيود العرض.

▢ حدِّد لون خلفية العناوين.

▢ توحيد حجم الخط في جميع طرق العرض

‫▢ حدِّد لون النص لمجموعة من طرق العرض.

السؤال 3

ما الفرق بين المظاهر والأنماط؟

▢ تنطبق المظاهر على التطبيق بأكمله، بينما يمكنك تطبيق الأنماط على طرق عرض معيّنة.

▢ لا يمكن أن تستند التصميمات إلى تصاميم أخرى، ولكن يمكن أن تستند الأنماط إلى أنماط أخرى.

▢ لا يمكن أن تستند الأنماط إلى أنماط أخرى، ولكن يمكن أن تستند التصاميم إلى تصاميم أخرى.

▢ يوفّر نظام Android التصاميم، بينما يحدّد المطوّر الأنماط.

السؤال 4

إذا كان أحد عناصر TextView في تطبيقك يتضمّن Theme يضبط حجم الخط على 12sp، ونمطًا محدّدًا يضبطه على 14sp، وسمة fontSize بقيمة 16sp، فما هو حجم الخط المعروض على الشاشة؟

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

ابدأ الدرس التالي: 10.2: التصميم المتعدد الأبعاد والوحدات والألوان

للحصول على روابط تؤدي إلى دروس تطبيقية أخرى في هذه الدورة التدريبية، اطّلِع على الصفحة المقصودة الخاصة بالدروس التطبيقية حول أساسيات Android Kotlin.