تنفيذ المظهر الداكن

تجربة طريقة Compose

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

الألوان - التصميم المتعدد الأبعاد 3 ←

الشكل 1. المظهر الداكن

يتوفّر المظهر الداكن في الإصدار 10 من نظام Android (مستوى واجهة برمجة التطبيقات 29) والإصدارات الأحدث. ويوفّر المظهر الداكن المزايا التالية:

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

ينطبق المظهر الداكن على واجهة مستخدم نظام Android والتطبيقات التي تعمل على الجهاز.

هناك ثلاث طرق لتفعيل المظهر الداكن في الإصدار 10 من نظام Android والإصدارات الأحدث:

• استخدِم إعدادات النظام من خلال الانتقال إلى الإعدادات > العرض > المظهر لتفعيل المظهر الداكن.
• استخدِم مربّع الإعدادات السريعة لتبديل المظاهر من لوحة الإشعارات، في حال تفعيلها.
• على أجهزة Pixel، فعِّل وضع "توفير شحن البطارية" لتفعيل المظهر الداكن في الوقت نفسه. قد لا تتيح الأجهزة الأخرى هذا السلوك.

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

إتاحة المظهر الداكن في تطبيقك

لإتاحة المظهر الداكن، اضبط مظهر تطبيقك، الذي يكون عادةً في res/values/styles.xml، على أن يرث من مظهر DayNight:

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

يمكنك أيضًا استخدام المظهر الداكن لمكوّنات التصميم المتعدد الأبعاد:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">

يربط هذا الإجراء المظهر الرئيسي للتطبيق بعلامات وضع الليل التي يتحكّم فيها النظام، ويمنح التطبيق مظهرًا داكنًا تلقائيًا عند تفعيله.

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

تجنَّب استخدام الألوان أو الرموز المبرمَجة يدويًا والمخصّصة للاستخدام في مظهر فاتح. بدلاً من ذلك، استخدِم سمات المظهر أو الموارد المؤهَّلة لوضع الليل.

هناك سمتان للمظهر مهمّتان جدًا للمظهر الداكن:

• ?android:attr/textColorPrimary: لون نص عام. يكون هذا اللون أسود تقريبًا في المظهر الفاتح وأبيض تقريبًا في المظاهر الداكنة. ويحتوي على حالة غير مفعّلة.
• ?attr/colorControlNormal: لون رمز عام. ويحتوي على حالة غير مفعّلة.

ننصحك باستخدام مكوّنات التصميم المتعدد الأبعاد، لأنّ نظام ألوان المظهر، مثل سمات المظهر ?attr/colorSurface و?attr/colorOnSurface، يوفّر سهولة الوصول إلى الألوان المناسبة. يمكنك تخصيص هذه السمات في مظهرك.

تغيير المظاهر داخل التطبيق

يمكنك السماح للمستخدمين بتغيير مظهر التطبيق أثناء تشغيله. في ما يلي الخيارات المقترَحة:

• الإضاءة
• داكن
• الإعداد التلقائي للنظام (الخيار التلقائي المقترَح)

ترتبط هذه الخيارات مباشرةً بأوضاع AppCompat.DayNight:

• الإضاءة: MODE_NIGHT_NO.

• داكن: MODE_NIGHT_YES.

• الإعداد التلقائي للنظام: MODE_NIGHT_FOLLOW_SYSTEM.

لتبديل المظهر، اتّبِع الخطوات التالية:

• في مستوى واجهة برمجة التطبيقات 31 والإصدارات الأحدث، استخدِم UiModeManager#setApplicationNightMode لإعلام النظام بالمظهر الذي يشغّله تطبيقك. يسمح هذا للنظام بمطابقة المظهر أثناء شاشة البداية.

• في مستوى واجهة برمجة التطبيقات 30 والإصدارات الأقدم، استخدِم AppCompatDelegate.setDefaultNightMode() لتبديل المظهر.

ملاحظة: بدءًا من AppCompat الإصدار 1.1.0، يعيد setDefaultNightMode() تلقائيًا إنشاء أي أنشطة تم بدؤها.

فرض المظهر الداكن

يوفّر الإصدار 10 من نظام Android ميزة فرض المظهر الداكن، وهي ميزة تتيح للمطوّرين تطبيق مظهر داكن بسرعة بدون ضبط مظهر DayNight بشكل صريح.

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

يجب أن توافق التطبيقات على استخدام ميزة "فرض المظهر الداكن" من خلال ضبط android:forceDarkAllowed="true" في مظهر النشاط. يتم ضبط هذه السمة على جميع المظاهر الفاتحة التي يوفّرها النظام وAndroidX، مثل Theme.Material.Light. عند استخدام ميزة "فرض المظهر الداكن"، اختبِر تطبيقك بدقة واستبعِد طرق العرض حسب الحاجة.

إذا كان تطبيقك يستخدم مظهرًا داكنًا، مثل Theme.Material)، لا يتم تطبيق ميزة "فرض المظهر الداكن". وبالمثل، إذا كان مظهر تطبيقك يرث من مظهر DayNight، لا يتم تطبيق ميزة "فرض المظهر الداكن" بسبب التبديل التلقائي للمظهر.

إيقاف ميزة "فرض المظهر الداكن" في طريقة عرض

يمكن التحكّم في ميزة "فرض المظهر الداكن" في طرق عرض محدّدة باستخدام السمة android:forceDarkAllowed أو باستخدام setForceDarkAllowed().

محتوى على الويب

للحصول على معلومات حول استخدام المظاهر الداكنة في المحتوى المستند إلى الويب، يُرجى الاطّلاع على مقالة تعتيم محتوى الويب في WebView. للاطّلاع على مثال عن تطبيق مظهر داكن على WebView، يُرجى الاطّلاع على العرض التوضيحي لـ WebView على GitHub .

أفضل الممارسات

توفّر الأقسام التالية أفضل الممارسات لتطبيق المظاهر الداكنة.

الإشعارات والوِيدجت

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

الإشعارات

استخدِم نماذج الإشعارات التي يوفّرها النظام، مثل MessagingStyle. يعني هذا أنّ النظام هو المسؤول عن تطبيق نمط العرض الصحيح.

الوِيدجت وطرق عرض الإشعارات المخصّصة

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

تشمل الأخطاء الشائعة التي يجب الانتباه إليها ما يلي:

• افتراض أنّ لون الخلفية فاتح دائمًا
• برمجة ألوان النص يدويًا
• ضبط لون خلفية مبرمَج يدويًا أثناء استخدام لون النص التلقائي
• استخدام رمز قابل للرسم بلون ثابت

في كل هذه الحالات، استخدِم سمات المظهر المناسبة بدلاً من الألوان المبرمَجة يدويًا.

شاشات البداية

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

أزِل أي ألوان مبرمَجة يدويًا، مثل ألوان الخلفية التي يتم ضبطها برمجيًا على اللون الأبيض. بدلاً من ذلك، استخدِم سمة المظهر ?android:attr/colorBackground.

**ملاحظة:** لا تعمل العناصر القابلة للرسم ذات المظهر الداكن android:windowBackground إلا على الإصدار 10 من نظام Android.

تغييرات الإعدادات

عند تغيير مظهر التطبيق، سواء من خلال إعدادات النظام أو AppCompat، يؤدي ذلك إلى تغيير إعدادات uiModeconfiguration change. وهذا يعني أنّه يتم تلقائيًا إعادة إنشاء الأنشطة.

في بعض الحالات، قد تريد أن يعالج التطبيق تغيير الإعدادات. على سبيل المثال، قد تريد تأخير تغيير الإعدادات بسبب تشغيل فيديو.

يمكن للتطبيق معالجة تنفيذ المظهر الداكن من خلال الإعلان عن إمكانية معالجة كل Activity لتغيير إعدادات uiMode:

<activity
    android:name=".MyActivity"
    android:configChanges="uiMode" />

عندما يعلن Activity أنّه يعالج تغييرات الإعدادات، يتم استدعاء طريقته onConfigurationChanged() عند حدوث تغيير في المظهر.

للتحقّق من المظهر الحالي، يمكن للتطبيقات تشغيل رمز مثل هذا:

Kotlin

val currentNightMode = configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
when (currentNightMode) {
    Configuration.UI_MODE_NIGHT_NO -> {} // Night mode is not active, we're using the light theme.
    Configuration.UI_MODE_NIGHT_YES -> {} // Night mode is active, we're using dark theme.
}

Java

int currentNightMode = configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK;
switch (currentNightMode) {
    case Configuration.UI_MODE_NIGHT_NO:
        // Night mode is not active, we're using the light theme
        break;
    case Configuration.UI_MODE_NIGHT_YES:
        // Night mode is active, we're using dark theme
        break;
}

ملاحظة: لمزيد من المعلومات عن تغييرات الإعدادات وكيفية تقييد إعادة إنشاء النشاط إذا لزم الأمر وكيفية التفاعل مع تغييرات الإعدادات هذه من نظام العرض وJetpack Compose، يُرجى الاطّلاع على صفحة معالجة تغييرات الإعدادات.