الأنماط والمظاهر

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

النمط هو مجموعة من السمات التي تحدد مظهر View واحد. ويمكن أن يحدد النمط سمات مثل لون الخط وحجمه ولون الخلفية وغير ذلك الكثير.

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

يتم الإعلان عن الأنماط والمظاهر في ملف مورد نمط في res/values/، يُسمى عادةً styles.xml.

الشكل 1. تم تطبيق موضوعين على النشاط نفسه: Theme.AppCompat (إلى اليسار) وTheme.AppCompat.Light (إلى اليمين).

الموضوعات مقابل الأنماط

هناك العديد من أوجه التشابه بين السمات والأنماط، لكنها تُستخدم لأغراض مختلفة. للمظاهر والأنماط البنية الأساسية نفسها، وهي زوج المفتاح/القيمة الذي يربط السمات بـ الموارد.

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

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

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

لمزيد من المعلومات حول طريقة عمل المظاهر والأنماط معًا، يُرجى الاطّلاع على مشاركة المدونة نمط Android: المظاهر مقابل الأنماط.

إنشاء نمط وتطبيقه

لإنشاء نمط جديد، افتح ملف res/values/styles.xml لمشروعك. لكل نمط تريد إنشاءه، اتبع الخطوات التالية:

1. أضِف عنصر <style> باسم يحدد النمط بشكل فريد.
2. أضِف عنصر <item> لكل سمة نمط تريد تحديدها. يحدّد name في كل عنصر سمة تستخدمها كسمة XML في تنسيقك. والقيمة في العنصر <item> هي قيمة هذه السمة.

على سبيل المثال، لنفترض أنك عرّفت النمط التالي:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

يمكنك تطبيق النمط على طريقة عرض كما يلي:

<TextView
    style="@style/GreenText"
    ... />

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

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

توسيع النمط وتخصيصه

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

على سبيل المثال، يمكنك اكتساب المظهر التلقائي للنص الأساسي لنظام Android الأساسي، ثم تعديله على النحو التالي:

<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

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

لاكتساب الأنماط من مكتبة أو من مشروعك الخاص، عرِّف اسم النمط الرئيسي بدون الجزء @android:style/ الموضح في المثال السابق. على سبيل المثال، يكتسب المثال التالي أنماط مظهر النص من "مكتبة الدعم":

<style name="GreenText" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#00FF00</item>
</style>

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

<style name="GreenText.Large">
    <item name="android:textSize">22dp</item>
</style>

يمكنك الاستمرار في اكتساب أنماط مثل هذه عدة مرات كما تريد من خلال إضافة المزيد من الأسماء إلى سلسلة.

لمعرفة السمات التي يمكنك التعريف بها باستخدام علامة <item>، يمكنك الرجوع إلى جدول "سمات XML" في مراجع الفئات المختلفة. تتيح جميع طرق العرض سمات XML من الفئة View الأساسية، وتضيف العديد من طرق العرض سماتها الخاصة. على سبيل المثال، تتضمّن سمات XML الخاصة بالسمة TextView السمة android:inputType التي يمكنك تطبيقها على طريقة عرض النص التي تتلقّى إدخالات، مثل التطبيق المصغّر EditText.

تطبيق نمط كمظهر

يمكنك إنشاء مظهر بنفس طريقة إنشاء الأنماط. يكمن الفرق في كيفية تطبيقه: بدلاً من تطبيق نمط باستخدام السمة style على طريقة عرض، يمكنك تطبيق مظهر باستخدام السمة android:theme على العلامة <application> أو <activity> في ملف AndroidManifest.xml.

على سبيل المثال، إليك كيفية تطبيق المظهر "الداكن" (الداكن) لتصميم المواد في مكتبة دعم Android على التطبيق بأكمله:

<manifest ... >
    <application android:theme="@style/Theme.AppCompat" ... >
    </application>
</manifest>

وإليك كيفية تطبيق المظهر "الفاتح" على نشاط واحد فقط:

<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.AppCompat.Light" ... >
        </activity>
    </application>
</manifest>

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

بدءًا من Android 5.0 (المستوى 21 من واجهة برمجة التطبيقات) والإصدار 22.1 من Android Support Library، يمكنك أيضًا تحديد السمة android:theme لطريقة عرض في ملف التنسيق. يعمل ذلك على تعديل مظهر طريقة العرض هذه وأي طرق عرض فرعية، وهو ما يكون مفيدًا لتغيير لوحات ألوان المظاهر في جزء محدد من واجهتك.

توضّح الأمثلة السابقة كيفية تطبيق مظهر مثل Theme.AppCompat توفّره "مكتبة دعم Android". ومع ذلك، سترغب عادةً في تخصيص المظهر ليلائم العلامة التجارية لتطبيقك. وأفضل طريقة للقيام بذلك هي توسيع هذه الأنماط من Support Library وتجاوز بعض السمات، كما هو موضح في القسم التالي.

التسلسل الهرمي للأنماط

يوفّر Android مجموعة متنوّعة من الطرق لضبط السمات في تطبيق Android. على سبيل المثال، يمكنك ضبط السمات مباشرةً بتنسيق، وتطبيق نمط على طريقة عرض، وتطبيق مظهر على تنسيق، وحتى ضبط السمات آليًا.

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

1. تطبيق نمط على مستوى الحرف أو الفقرة باستخدام امتدادات النص إلى الصفوف المستمَدة من TextView.
2. يتم تطبيق السمات آليًا.
3. تطبيق سمات فردية مباشرةً على طريقة عرض
4. جارٍ تطبيق نمط على طريقة عرض.
5. النمط التلقائي.
6. تطبيق مظهر على مجموعة من طرق العرض أو نشاط أو على تطبيقك بالكامل.
7. تطبيق نمط معيّن لطريقة العرض، مثل ضبط TextAppearance على TextView

الشكل 2. يؤدي النمط من span إلى إلغاء النمط من textAppearance.

شكل النص

من بين القيود الخاصة بالأنماط يمكنك تطبيق نمط واحد فقط على View. في TextView، يمكنك أيضًا تحديد سمة TextAppearance تعمل بشكل مشابه لنمط، كما هو موضّح في المثال التالي:

<TextView
    ...
    android:textAppearance="@android:style/TextAppearance.Material.Headline"
    android:text="This text is styled via textAppearance!" />

تتيح لك علامة TextAppearance تحديد النمط الخاص بالنص مع ترك نمط View متاحًا للاستخدامات الأخرى. مع ذلك، إذا حدّدت أي سمات نصية مباشرةً على View أو بأسلوب معيّن، تلغي هذه القيم قيم TextAppearance.

تتيح السمة TextAppearance استخدام مجموعة فرعية من سمات التصميم التي توفّرها السمة TextView. للحصول على قائمة السمات الكاملة، راجِع TextAppearance.

تشمل بعض سمات TextView الشائعة غير المضمّنة lineHeight[Multiplier|Extra] وlines وbreakStrategy وhyphenationFrequency. تعمل السمة TextAppearance على مستوى الأحرف وليس على مستوى الفقرة، لذا لا يمكن استخدام السمات التي تؤثر في التنسيق بأكمله.

تخصيص المظهر التلقائي

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

على سبيل المثال، يبدو ملف styles.xml على النحو التالي:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

قيم النمط هي إشارات إلى موارد لون أخرى، تم تحديدها في ملف res/values/colors.xml للمشروع. هذا هو الملف الذي تقوم بتحريره لتغيير الألوان. يمكنك الاطّلاع على نظرة عامة على لون تصميم المواد لتحسين تجربة المستخدم باستخدام الألوان الديناميكية والألوان المخصّصة الإضافية.

بعد معرفة ألوانك، عدِّل القيم في res/values/colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   Color for the app bar and other primary UI elements. -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   A darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars. -->
    <color name="colorPrimaryDark">#303F9F</color>

    <!--   a secondary color for controls like checkboxes and text fields. -->
    <color name="colorAccent">#FF4081</color>
</resources>

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

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="android:windowBackground">@color/activityBackground</item>
</style>

للحصول على قائمة بالسمات التي يمكنك استخدامها في المظهر، اطّلِع على جدول السمات على R.styleable.Theme. عند إضافة أنماط لطرق العرض في التنسيق، يمكنك أيضًا العثور على السمات من خلال الاطّلاع على جدول "سمات XML" في مراجع فئة العرض. على سبيل المثال، تتيح جميع طرق العرض سمات XML من فئة View الأساسية.

يتم تطبيق معظم السمات على أنواع معيّنة من الملفات الشخصية، بينما ينطبق بعضها على جميع الملفات الشخصية. مع ذلك، تنطبق بعض سمات المظاهر المدرَجة في R.styleable.Theme على نافذة النشاط، وليس على طرق العرض في التنسيق. على سبيل المثال، يغيّر windowBackground خلفية النافذة ويحدّد windowEnterTransition صورة متحركة انتقالية لاستخدامها عند بدء النشاط. لمزيد من التفاصيل، يُرجى الاطّلاع على بدء نشاط باستخدام صورة متحركة.

توفّر "مكتبة دعم Android" أيضًا سمات أخرى يمكنك استخدامها لتخصيص المظهر الممتد من Theme.AppCompat، مثل السمة colorPrimary المعروضة في المثال السابق. ويمكن الاطّلاع عليها بأفضل شكل في ملف attrs.xml الخاص بالمكتبة.

هناك أيضًا مظاهر مختلفة متاحة من Support Library والتي قد ترغب في توسيعها بدلاً من تلك التي تم عرضها في المثال السابق. أفضل مكان للاطلاع على النُسُق المتاحة هو ملف themes.xml الخاص بالمكتبة.

إضافة أنماط خاصة بإصدار معيّن

إذا أضاف إصدار جديد من Android سمات المظهر التي تريد استخدامها، يمكنك إضافتها إلى المظهر مع مواصلة التوافق مع الإصدارات القديمة. كل ما تحتاج إليه هو ملف styles.xml آخر محفوظ في دليل values يتضمّن مؤهِّل إصدار المورد:

res/values/styles.xml        # themes for all versions
res/values-v21/styles.xml    # themes for API level 21+ only

بما أنّ الأنماط في ملف values/styles.xml متوفرة لجميع النُسخ، يمكن أن تكتسب المظاهر في values-v21/styles.xml هذه الأنماط. هذا يعني أنه يمكنك تجنب تكرار الأنماط من خلال البدء بمظهر "أساسي" ثم توسيعه في الأنماط الخاصة بالإصدار.

على سبيل المثال، يجب استخدام سمات جديدة للإشارة إلى عمليات الانتقال بين النوافذ في Android 5.0 (المستوى 21 لواجهة برمجة التطبيقات) والإصدارات الأحدث. إذن، يمكن أن يبدو المظهر الأساسي في res/values/styles.xml كما يلي:

<resources>
    <!-- Base set of styles that apply to all versions. -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryTextColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <!-- Declare the theme name that's actually applied in the manifest file. -->
    <style name="AppTheme" parent="BaseAppTheme" />
</resources>

بعد ذلك، أضِف الأنماط الخاصة بالإصدار في res/values-v21/styles.xml على النحو التالي:

<resources>
    <!-- extend the base theme to add styles available only with API level 21+ -->
    <style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowActivityTransitions">true</item>
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
    </style>
</resources>

يمكنك الآن تطبيق AppTheme في ملف البيان ويختار النظام الأنماط المتاحة لكل إصدار من إصدارات النظام.

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

تخصيص أنماط الأدوات

يتوفّر لكل أداة في إطار العمل و"مكتبة الدعم" نمط تلقائي. على سبيل المثال، عند تصميم تطبيقك باستخدام مظهر من Support Library، يتم تحديد نمط Button باستخدام النمط Widget.AppCompat.Button. إذا أردت تطبيق نمط أداة مختلف على زر، يمكنك استخدام السمة style في ملف التنسيق. على سبيل المثال، يطبق ما يلي نمط زر المكتبة بلا حدود:

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    ... />

إذا أردت تطبيق هذا النمط على جميع الأزرار، يمكنك تعريفه في buttonStyle للمظهر كما يلي:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
    ...
</style>

يمكنك أيضًا توسيع أنماط التطبيقات المصغّرة، تمامًا مثل تمديد أي نمط آخر، ثم تطبيق نمط الأداة المخصّصة في التنسيق أو المظهر.

مراجع إضافية

لمعرفة المزيد حول النُسُق والأنماط، اطلع على الموارد الإضافية التالية:

مشاركات المدونة

• النمط على Android: المظاهر مقابل الأنماط
• نمط Android: سمات المظهر الشائعة
• تصميم Android: سمات المظهر المفضّلة