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

تجربة ميزة "الكتابة"

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

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

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

style هي مجموعة من السمات التي تحدّد مظهر 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"
    ... />

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

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

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

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

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

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

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

للعثور على السمات التي يمكنك الإفصاح عنها باستخدام علامة <item>، يُرجى الرجوع إلى ملف XML السمات" في مراجع الصف المختلفة. إتاحة كل المشاهدات سمات XML من القاعدة View class، وتضيف العديد من طرق العرض سماتها الخاصة. على سبيل المثال، سمات 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>

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

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

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

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

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

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

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

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

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

مظهر النص

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

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

على سبيل المثال، لتوضيح عمليات نقل النوافذ للإصدار 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: سمات المظاهر المفضّلة