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

تجربة طريقة Compose

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

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

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

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

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

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

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

1. يرصد النظام الألوان الرئيسية في صورة الخلفية المحدّدة ويستخرج لونًا مصدرًا.

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

   

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

   

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

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

يمكن للمستخدمين اختيار ألوان مختلفة من الألوان المستخرَجة من الخلفية والمظاهر المختلفة بدءًا من الإصدار Android 12، مع إضافة المزيد من الخيارات في الإصدار Android 13. على سبيل المثال، يمكن لمستخدم هاتف Pixel يعمل بنظام التشغيل Android 13 اختيار صيغة من إعدادات الخلفية والأسلوب، كما هو موضّح في الشكل 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 حول تسهيل استخدام نظام الألوان.

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

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

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 Builder لاستيراد ألوان إضافية توسّع نظام الألوان، وبالتالي إنشاء نظام ألوان موحّد. باستخدام هذا الخيار، يمكنك استخدام HarmonizedColors لتغيير درجة الألوان المخصّصة. ويحقّق ذلك توازنًا بصريًا وتباينًا يسهل تمييزه عند دمجه مع الألوان التي ينشئها المستخدم. ويحدث ذلك في وقت التشغيل باستخدام applyToContextIfAvailable().

يمكنك الاطّلاع على إرشادات Material 3 بشأن تنسيق الألوان المخصّصة.

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

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