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

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

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

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

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

مراجع إضافية

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

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