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

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

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

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

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

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

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

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

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

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

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

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

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

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

ملاحظة: لا تستخدم أسماء السمات من Support Library البادئة 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

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

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

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

مراجع إضافية

منشورات المدوّنات

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