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

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

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

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

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

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

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

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

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

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

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

   

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

   

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

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

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

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

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

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

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

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

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().

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

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

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