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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

السمتان الأكثر أهمية للمظهر الداكن هو الأكثر أهمية:

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

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

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

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

  • فاتح
  • داكن
  • الإعداد التلقائي للنظام (الخيار التلقائي الموصى به)

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

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

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

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

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

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

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

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

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

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

يمكن التحكم في Force Dark (فرض الظلام) على طرق عرض محددة من خلال سمة التنسيق android:forceDarkAllowed أو تحتوي على setForceDarkAllowed()

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

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

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

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

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

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

الإشعارات

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

الأدوات وطُرق عرض الإشعارات المخصّصة

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

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

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

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

شاشات الإطلاق

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

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

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

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

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

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