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

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

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

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

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