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

تجربة طريقة الإنشاء

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

سمتان للمظهر هما الأهم للمظهر الداكن:

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

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

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

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

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

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

• المظهر الفاتح: MODE_NIGHT_NO.

• المظهر الداكن: MODE_NIGHT_YES.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الإشعارات والتطبيقات المصغّرة

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

الإشعارات

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

التطبيقات المصغّرة وطرق عرض الإشعارات المخصّصة

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

تشمل المخاطر الشائعة التي يجب البحث عنها ما يلي:

• لنفترض أن لون الخلفية يكون فاتحًا دائمًا.
• ألوان النص ذات الترميز الثابت.
• ضبط لون خلفية غير قابل للتغيير أثناء استخدام لون النص التلقائي.
• استخدام أيقونة قابلة للرسم بلون ثابت.

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

شاشات التشغيل

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

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

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

عندما يتم تغيير مظهر التطبيق، سواء من خلال إعداد النظام أو AppCompat، يتم إجراء تغيير في إعدادات uiMode. وهذا يعني أنّه تتم إعادة إنشاء الأنشطة تلقائيًا.

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

يمكن لأي تطبيق التعامل مع تنفيذ المظهر الداكن من خلال توضيح أنّ كل 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;
}