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

تجربة طريقة Compose

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

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

يتوفّر المظهر الداكن في الإصدار 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() للتبديل بين المظاهر.

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

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

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

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

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

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

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

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

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

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

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

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

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

الإشعارات

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.
}

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;
}