تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

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

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

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

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

المظاهر مقابل الأنماط

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

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

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

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

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

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

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

أضِف عنصر <style> يحمل اسمًا يحدِّد النمط بشكل فريد.
أضِف عنصر <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"
    ... />

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

ملاحظة: لا يتلقّى سوى العنصر الذي تضيف إليه سمة style سمات التنسيق هذه. ولا تطبّق طرق العرض الفرعية الأنماط. إذا كنت تريد أن تكتسِب العروض الفرعية الأنماط، يمكنك بدلاً من ذلك تطبيق النمط باستخدام السمة android:theme.

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

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

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

على سبيل المثال، يمكنك اكتساب مظهر النص التلقائي لمنصّة 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>

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

ملاحظة: إذا كنت تستخدِم أسلوب الترميز بالنقاط لتوسيع نطاق نمط معيّن وأدرجت أيضًا سمة parent، ستلغي الأنماط الرئيسية أي أنماط مكتسَبة من خلال أسلوب الترميز بالنقاط.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الشكل 2: تلغي التنسيقات من span التنسيقات من textAppearance.

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

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"، يطبّق تلقائيًا أحد مظاهر Material Design على تطبيقك، كما هو محدّد في ملف styles.xml الخاص بالمشروع. يمتد نمط AppTheme إلى مظهر من "مكتبة الدعم" ويتضمّن إلغاءً لسمات الألوان التي تستخدمها عناصر واجهة المستخدم الرئيسية، مثل شريط التطبيق وزرّ الإجراء العائم، في حال استخدامه. وبالتالي، يمكنك تخصيص تصميم ألوان تطبيقك بسرعة من خلال تعديل الألوان المقدَّمة.

على سبيل المثال، يظهر ملف 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المكتبة.

ملاحظة: لا تستخدم أسماء السمات من "مكتبة الدعم" البادئة android:. لا يتم استخدام هذا الإجراء إلا للسمات من إطار عمل Android.

تتوفّر أيضًا مواضيع مختلفة من "مكتبة الدعم" قد تحتاج إلى توسيع نطاقها بدلاً من المواضيع الموضّحة في المثال السابق. يمكنك الاطّلاع على المواضيع المتاحة في ملف 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 في ملف البيان، ويختار النظام الأنماط المتوفّرة لكل إصدار من النظام.

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

تخصيص أنماط التطبيقات المصغّرة

تحتوي كل أداة مصغّرة في إطار العمل و"مكتبة الدعم" على نمط تلقائي. على سبيل المثال، عند تصميم تطبيقك باستخدام مظهر من مكتبة الدعم، يتم تصميم مثيل 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>

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

مصادر إضافية

للاطّلاع على مزيد من المعلومات عن المظاهر والأنماط، اطّلِع على المراجع الإضافية التالية:

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

المظاهر مقابل الأنماط

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

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

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

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

TextAppearance

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

إضافة أنماط خاصة بالإصدار

تخصيص أنماط التطبيقات المصغّرة

مصادر إضافية

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