تتيح ميزة "الألوان الديناميكية" التي تمت إضافتها في نظام التشغيل Android 12 للمستخدمين تخصيص أجهزتهم بشكل متجانس مع تدرجات ألوان خلفياتهم الشخصية أو من خلال لون محدّد في "أداة اختيار الخلفيات".
يمكنك الاستفادة من هذه الميزة من خلال إضافة واجهة برمجة التطبيقات DynamicColors
، التي
تستخدم هذه الواجهة على تطبيقك أو نشاطك لجعل التطبيق أكثر تخصيصًا
للمستخدم.
تتضمّن هذه الصفحة تعليمات حول تنفيذ الألوان الديناميكية في تطبيقك. وتتوفّر هذه الميزة أيضًا بشكلٍ منفصل للتطبيقات المصغّرة والرموز التكيُّفية، كما هو موضَّح لاحقًا في هذه الصفحة. ويمكنك أيضًا تجربة الدرس التطبيقي حول الترميز.
كيف ينشئ Android أنظمة الألوان
ينفذ Android الخطوات التالية لإنشاء مخططات الألوان من خلفية المستخدم.
يرصد النظام الألوان الرئيسية في صورة الخلفية المحدّدة ويستخرج اللون المصدر.
يستخدم النظام لون المصدر هذا لاستقراء خمسة ألوان رئيسية بشكل أكبر تُعرف باسم أساسي وثانوي وثلاثي ومحايد وصيغة محايدة.
يفسر النظام كل لون رئيسي إلى لوحة ألوان من 13 درجة لونية.
يستخدم النظام هذه الخلفية المفردة لاستنتاج خمسة أنظمة ألوان مختلفة، ما يوفّر أساسًا لأي مظاهر فاتحة وداكنة.
كيفية عرض خيارات الألوان على جهاز المستخدم
يمكن للمستخدمين تحديد خيارات الألوان من الألوان المستخرجة من الخلفية والمظاهر المختلفة بدءًا من Android 12، مع إضافة المزيد من المتغيرات في Android 13. على سبيل المثال، يمكن للمستخدم الذي لديه هاتف Pixel يعمل بالإصدار 13 نظام التشغيل Android اختيار خيار من إعدادات الخلفية والأسلوب، كما هو موضّح في الشكل 4.
تمت إضافة صيغة Tonal Spot في نظام التشغيل Android 12، تليها خيارات Neutral وVibrant Tonal وExpressive في الإصدار 13 من نظام التشغيل Android. يحتوي كل متغير على وصفة فريدة تعمل على تحويل ألوان البذور لخلفية المستخدم من خلال الحيوية وتدوير تدرج اللون. يوضح المثال التالي نظام ألوان واحد يتم التعبير عنه من خلال متغيرات الألوان الأربعة هذه.
لا يزال تطبيقك يستخدم الرموز المميّزة نفسها للوصول إلى هذه الألوان. للحصول على تفاصيل حول الرموز المميّزة، يمكنك الاطّلاع على إنشاء المظهر باستخدام الرموز المميّزة في هذه الصفحة.
بدء استخدام Compose
إذا كنت تنشئ واجهة المستخدم باستخدام Compose، اطّلِع على تخصيص التصميم المتعدد الأبعاد في Compose للحصول على تفاصيل حول تطبيق اللون الديناميكي على تطبيقك.
بدء استخدام المشاهدات
يمكنك تطبيق الألوان الديناميكية على مستوى التطبيق أو النشاط. ولإجراء ذلك، يُرجى الاتصال بـ
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>
لمزيد من المعلومات:
لمعرفة المزيد حول الألوان الديناميكية والألوان المخصّصة وإنشاء الرموز المميّزة، اطّلع على صفحة المادة 3 الألوان الديناميكية.
لإنشاء لوحة الألوان الأساسية وألوان ومظهر تطبيقك، اطّلع على أداة Material Theme Builder، المتاحة من خلال مكوّن Figma الإضافي أو في المتصفح).
للاطّلاع على المزيد من المعلومات حول كيفية تسهيل استخدام أنظمة الألوان لتسهيل استخدام تطبيقك، راجِع صفحة المادة 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()
.
يمكنك الاطّلاع على إرشادات المادة 3 حول مواءمة الألوان المخصّصة.
تطبيق الألوان الديناميكية على الرموز والتطبيقات المصغّرة التكيُّفية
بالإضافة إلى تفعيل خيارات الألوان الديناميكية في تطبيقك، يمكنك أيضًا إتاحة استخدام تصاميم الألوان الديناميكية للأدوات التي تبدأ في الإصدار 12 من Android، والرموز التكيُّفية بدءًا من Android 13.