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

جرِّب طريقة Compose

‫Jetpack Compose هي مجموعة أدوات واجهة المستخدم المقترَحة لنظام Android. تعرَّف على كيفية استخدام المظاهر في Compose.

أنظمة التصميم في Compose ←

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

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

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

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

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

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

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

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

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

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

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

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

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

على سبيل المثال، إليك كيفية تطبيق المظهر "الداكن" لتصميم Material Design من "مكتبة دعم 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) و"مكتبة دعم Android" الإصدار 22.1، يمكنك أيضًا تحديد السمة android:theme لعرض في ملف التنسيق. يعدّل ذلك المظهر لهذا العرض وأي عروض ثانوية، ما يكون مفيدًا لتغيير لوحات ألوان المظهر في جزء معيّن من واجهتك.

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

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

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

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

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

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

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 class.

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

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

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

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

مراجع إضافية

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

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

• Android styling: themes vs styles
• Android styling: common theme attributes
• Android styling: prefer theme attributes