يمكنك السماح للمستخدمين بتخصيص تجربة الألوان في تطبيقك.

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

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

ألوان ديناميكية - التصميم المتعدّد الأبعاد 3 →

تتيح ميزة "الألوان الديناميكية"، التي تمت إضافتها في الإصدار 12 من نظام Android، للمستخدمين تخصيص أجهزتهم لتتطابق مع نظام ألوان الخلفية الشخصية أو من خلال اختيار لون في أداة اختيار الخلفية.

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

الشكل 1. أمثلة على أنظمة الألوان التدرّجية المستمدة من خلفيات مختلفة

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

ملاحظة: تعتمد المعلومات الواردة في هذه الصفحة على فهم الأنماط والألوان والسمات والمظاهر على Android. اطّلِع على الأنماط والمظاهر لمعرفة التفاصيل.

كيفية إنشاء نظام الألوان في Android

ينفِّذ نظام التشغيل Android الخطوات التالية لإنشاء تنسيقات ألوان من خلفية المستخدم.

1. يرصد النظام الألوان الرئيسية في صورة الخلفية المحدّدة ويشدِّد على لون المصدر.

2. يستخدم النظام هذا اللون المصدر لإنشاء خمسة ألوان رئيسية إضافية يُعرف كلّ منها باسم الأساسي والثانوي والثالثي والمحايد ومتغير المحايد.

   

   الشكل 2. مثال على استخراج لون المصدر من صورة الخلفية واستخراجه إلى خمسة ألوان رئيسية

3. يفسّر النظام كل لون رئيسي في لوحة ألوان تتضمّن 13 درجة لونية.

   

   الشكل 3. مثال على إنشاء لوحات ألوان معيّنة

4. يستخدم النظام هذه الخلفية الواحدة لاشتقاق خمسة أنظمة ألوان مختلفة، ما يشكّل الأساس لأي مظاهر فاتحة وداكنة.

كيفية عرض الأسعار المتغيرة للألوان على جهاز المستخدم

يمكن للمستخدمين اختيار صيغ الألوان من الألوان المستخرَجة من الخلفية والنسق المختلفة بدءًا من الإصدار 12 من نظام Android، مع إضافة المزيد من الصيغ في الإصدار 13. على سبيل المثال، يمكن لمستخدم هاتف Pixel يعمل بالإصدار 13 من نظام التشغيل Android اختيار أحد الأنواع من إعدادات الخلفية والأسلوب، كما هو موضّح في الشكل 4.

الشكل 4. اختيار صيغ الألوان في إعدادات الخلفية (معروضة على جهاز Pixel)

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

الشكل 5. مثال على مظهر خيارات الألوان المختلفة على جهاز واحد

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

بدء استخدام "المشاهدات"

يمكنك تطبيق ميزة "الألوان الديناميكية" على مستوى التطبيق أو النشاط. لإجراء ذلك، يُرجى الاتصال برقم applyToActivitiesIfAvailable() لتسجيل ActivityLifeCycleCallbacks في تطبيقك.

Kotlin

class MyApplication: Application() {
    override fun onCreate() {
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

Java

public class MyApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();
    DynamicColors.applyToActivitiesIfAvailable(this);
  }
}

بعد ذلك، أضِف المظهر إلى تطبيقك.

<style
    name="AppTheme"
    parent="ThemeOverlay.Material3.DynamicColors.DayNight">
    ...
</style>

إنشاء المظهر باستخدام الرموز

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

تعرض المقتطفات التالية أمثلة على المظهرَين الفاتح والداكن، وملف XML للألوان المقابلة، بعد تطبيق الرموز المميّزة للألوان الديناميكية.

المظهر الفاتح

Themes.xml

<resources>
  <style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
    <item name="colorPrimary">@color/md_theme_light_primary</item>
    <item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
    <item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
    <item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
    <item name="colorError">@color/md_theme_light_error</item>
    <item name="colorOnError">@color/md_theme_light_onError</item>
    <item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
    <item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
    <item name="colorOnBackground">@color/md_theme_light_onBackground</item>
    <item name="colorSurface">@color/md_theme_light_surface</item>
    <item name="colorOnSurface">@color/md_theme_light_onSurface</item>
    …..
  </style>
</resources>

مظهر داكن

Themes.xml

<resources>
  <style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
    <item name="colorPrimary">@color/md_theme_dark_primary</item>
    <item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
    <item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
    <item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
    <item name="colorError">@color/md_theme_dark_error</item>
    <item name="colorOnError">@color/md_theme_dark_onError</item>
    <item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
    <item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
    <item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
    <item name="colorSurface">@color/md_theme_dark_surface</item>
    <item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
    ……
  </style>
</resources>

ملف xml للألوان

Colors.xml

<resources>
  <color name="md_theme_light_primary">#6750A4</color>
  <color name="md_theme_light_onPrimary">#FFFFFF</color>
  <color name="md_theme_light_primaryContainer">#EADDFF</color>
  <color name="md_theme_light_onPrimaryContainer">#21005D</color>
  <color name="md_theme_light_error">#B3261E</color>
  <color name="md_theme_light_onError">#FFFFFF</color>
  <color name="md_theme_light_errorContainer">#F9DEDC</color>
  <color name="md_theme_light_onErrorContainer">#410E0B</color>
  <color name="md_theme_light_surface">#FFFBFE</color>
  <color name="md_theme_light_onSurface">#1C1B1F</color>
  <color name="md_theme_light_surfaceVariant">#E7E0EC</color>
  <color name="md_theme_dark_primary">#D0BCFF</color>
  <color name="md_theme_dark_onPrimary">#381E72</color>
  <color name="md_theme_dark_primaryContainer">#4F378B</color>
  <color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
  <color name="md_theme_dark_secondary">#CCC2DC</color>
  <color name="md_theme_dark_onSecondary">#332D41</color>
  <color name="md_theme_dark_secondaryContainer">#4A4458</color>
  <color name="md_theme_dark_onSurface">#E6E1E5</color>
  <color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>

لمزيد من المعلومات:

• لمزيد من المعلومات حول الألوان الديناميكية والألوان المخصّصة وإنشاء الرموز المميّزة، اطّلِع على صفحة اللون الديناميكي في Material 3.

• لإنشاء لوحة الألوان الأساسية وألوان تطبيقك ومظهره، يمكنك استخدام أداة Material Theme Builder المتوفّرة من خلال مكوّن إضافي في Figma أو في المتصفّح).

• للاطّلاع على مزيد من المعلومات حول كيفية استخدام أنظمة الألوان لتسهيل الاستخدام بشكلٍ أفضل في تطبيقك، يمكنك الاطّلاع على صفحة Material 3 حول تسهيل الاستخدام في نظام الألوان.

الاحتفاظ بالألوان المخصّصة أو ألوان العلامة التجارية

إذا كان تطبيقك يتضمّن ألوانًا مخصّصة أو ألوان علامة تجارية لا تريد تغييرها باستخدام إعدادات الإعدادات المفضّلة للمستخدم، يمكنك إضافتها بشكلٍ فردي أثناء إنشاء skemme الألوان. مثلاً:

Themes.xml

<resources>
    <style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
        ...
        <item name="home_lamp">@color/home_yellow</item>
          ...
    </style>
</resources>

Colors.xml
<resources>
   <color name="home_yellow">#E8D655</color>
</resources>

بدلاً من ذلك، يمكنك استخدام أداة إنشاء مظاهر Material Theme لاستيراد مزيد من الألوان التي تضيف إلى نظام الألوان، وبالتالي إنشاء نظام ألوان موحّد. باستخدام هذا الخيار، استخدِم HarmonizedColors لتغيير درجة كثافة الألوان المخصّصة. ويؤدي ذلك إلى تحقيق توازن مرئي وتباين سهل الاستخدام عند دمجه مع الألوان التي ينشئها المستخدم. يحدث ذلك أثناء التشغيل باستخدام applyToContextIfAvailable().

الشكل 6. مثال على تنسيق الألوان المخصّصة

اطّلِع على إرشادات Material 3 حول مواءمة الألوان المخصّصة.

تطبيق ميزة "الألوان الديناميكية" على الرموز والتطبيقات المصغّرة التكيُّفية

بالإضافة إلى تفعيل ميزة "المظهر الديناميكي للألوان" في تطبيقك، يمكنك أيضًا إتاحة استخدام ميزة "المظهر الديناميكي للألوان" في تطبيقات المصغّرات بدءًا من الإصدار Android 12، والرموز التكيّفية بدءًا من الإصدار Android 13.