يمكن العثور على رمز واجهة مستخدم "مركز الأمان" في الدليل safetycenter
packages/modules/Permission/PermissionController/src/com/android/permissioncontroller/safetycenter/.
يمكنك تخصيص واجهة مستخدم "مركز الأمان" باستخدام "العناصر المركّبة لموارد وقت التشغيل" (RRO) في ملف
"العنصر المتراكب لجهة التصنيع". للحصول على معلومات عن عمليات RRO، يُرجى الاطّلاع على مقالة تغيير قيمة موارد التطبيق أثناء التشغيل.
مظاهر وألوان "مركز الأمان"
يتضمّن "مركز الأمان" أربعة مواضيع رئيسية تتشارك سمات واجهة المستخدم نفسها:
- إضاءة مركز الأمان
- مظهر "مركز الأمان" الداكن
- إضاءة الإعدادات السريعة في مركز الأمان
- الإعدادات السريعة في "مركز الأمان" باللون الداكن
تحتوي مظاهر "مركز الأمان" على ألوان تلقائية. يتم استخراج ألوان واجهة المستخدم الأساسية من ألوان نظام Android، ويمكن أن تتغيّر تلقائيًا وفقًا للتخصيص العام الذي يجريه المصنّع الأصلي للجهاز للون Android. يتم ضبط هذه الألوان تلقائيًا كجزء من تصميم Material You في Android.
يمكنك تغيير ألوان "مركز الأمان" من خلال إلغاء قيمها.
| لون واجهة مستخدم "مركز الأمان" | اسم السمة | المورد |
|---|---|---|
| خلفية | android:colorBackground |
@android:color/background_device_default_light@android:color/primary_dark_device_default_settings |
| السطح | colorSurface |
@color/sc_surface_light
@color/sc_surface_dark |
| خيار السطح | colorSurfaceVariant |
@color/sc_surface_variant_light@color/sc_surface_variant_dark |
| النص الأساسي | android:textColorPrimary |
@android:color/text_color_primary |
| نص ثانوي | android:textColorSecondary |
@android:color/text_color_secondary |
| الرموز | android:textColorSecondary |
@android:color/text_color_secondary |
| المورد | القيمة التلقائية |
|---|---|
@color/sc_surface_light |
@android:color/system_neutral1_500 مع قيمة L star
98 (السطوع الإدراكي) |
@color/sc_surface_dark |
@android:color/system_neutral1_800 |
@color/sc_surface_variant_light |
@android:color/system_neutral2_100
|
@color/sc_surface_variant_dark
|
@android:color/system_neutral1_700
|
ألوان درجة خطورة المشاكل
ينقل مركز الأمان شدة المشكلة باستخدام نظام ألوان إشارة المرور:
- اللون الأخضر للمشاكل الإجرائية والحالة "حسنًا"
- اللون الأصفر للاقتراحات
- اللون الأحمر للمشاكل الخطيرة
- اللون الرمادي يشير إلى عدم توفّر معلومات
يتم استخراج هذه الألوان تلقائيًا من لوحة ألوان Google Material. ننصحك باستخدام هذه الألوان الأساسية، ولكن يمكنك استخدام ظلال مختلفة من لوحة الألوان الخضراء والصفراء والحمراء.
تُستخدَم سمات الألوان هذه لربط العناصر الملوّنة حسب الخطورة في واجهة مستخدم
مركز السلامة، بما في ذلك الرموز والأزرار والمؤثرات المتحرّكة للفحص وتغيير الحالة. يؤدي تعديل هذه الألوان إلى إعادة تلوين جميع العناصر. على سبيل المثال، يؤدي تعديل
@color/sc_status_info_{light,dark} إلى تغيير لون الخلفية في كلّ من
صورة الحالة الثابتة والصورة المتحركة للخلفية أثناء عملية المسح.
يستخدم مظهر "الإعدادات السريعة" في "مركز الأمان" ألوان الوضع الداكن، سواء كان الجهاز مضبوطًا على الوضع الداكن أم لا.
| مستوى الخطورة | عنصر واجهة المستخدم | اسم السمة أو المورد | اللون التلقائي |
|---|---|---|---|
| معلومات (باللون الأخضر) | درع الحالة | ?attr/colorScStatusInfo |
الفاتح: أخضر 600 (#1e8e3e) الغامق: أخضر 500 (#34a853) |
| حاوية درع الحالة | ?attr/colorScStatusBackgroundInfo |
فاتح: أخضر 100 (#ceead6)colorSurfaceVariant |
|
| رمز | ?attr/colorScIconInfo |
أخضر 500 (#34a853) | |
| زر الإجراء الأساسي | @color/safety_center_button_info |
أخضر 400 (#5bb974) | |
| زر الإجراء الثانوي | @color/safety_center_outline_button_info |
أخضر 300 (#81c995) | |
| الاقتراح (أصفر) | درع الحالة | ?attr/colorScStatusRecommend |
الفاتح: أصفر 600 (#f9ab00) الداكن: أصفر 500 (#fbbc04) |
| حاوية درع الحالة | ?attr/colorScStatusBackgroundRecommend |
الفاتح: أصفر 100 (#feefc3) الداكن: colorSurfaceVariant |
|
| رمز | ?attr/colorScIconRecommend |
أصفر 500 (#fbbc04) | |
| زر الإجراء الأساسي | @color/safety_center_button_recommend |
يلونا 400 (#fcc934) | |
| زر الإجراء الثانوي | @color/safety_center_outline_button_recommend |
أصفر 300 (#fdd663) | |
| تحذير (أحمر) | درع الحالة | ?attr/colorScStatusWarn |
الفاتح: أحمر 600 (#d93025) الداكن: أحمر 500 (#ea4335) |
| حاوية درع الحالة | ?attr/colorScStatusBackgroundWarn |
اللون الفاتح: أحمر 100 (#fad2cf) اللون الداكن: colorSurfaceVariant |
|
| رمز | ?attr/colorScIconWarn |
Red 500 (#ea4335) | |
| زر الإجراء الأساسي | @color/safety_center_button_warn |
أحمر 400 (#ee675c) | |
| زر الإجراء الثانوي | @color/safety_center_outline_button_warn |
أحمر 300 (#f28b82) | |
| ما مِن اقتراح (رمادي) | رمز | ?attr/colorScIconNull |
رمادي 600 (#80868b) |
في Android 14، تمت إضافة موارد ألوان قابلة للتراكب لكل خاصية ألوان للمظهر، وتم تعديل بعض الألوان التلقائية:
| اسم المورد | لون الخلفية في Android 13 | لون الخلفية في Android 14 | الرمز السداسي العشري لنظام التشغيل Android 14 |
|---|---|---|---|
@color/sc_status_info_light |
Green 600 | Semantic Green | #0E8435 |
@color/sc_status_recommend_light |
أصفر 600 | دون تغيير | |
@color/sc_status_warn_light |
Red 600 | دون تغيير | |
@color/sc_status_info_dark |
Green 500 | أخضر 400 | #5BB974 |
@color/sc_status_recommend_dark |
أصفر 500 | أصفر 400 | #FCC934 |
@color/sc_status_warn_dark |
Red 500 | أحمر 400 | #EE675C |
@color/sc_status_background_info_light |
أخضر 100 | دون تغيير | |
@color/sc_status_background_recommend_light |
أصفر 100 | دون تغيير | |
@color/sc_status_background_warn_light |
أحمر 100 | دون تغيير | |
@color/sc_status_background_info_dark |
sc_surface_variant_داكن | دون تغيير | |
@color/sc_status_background_recommend_dark |
sc_surface_variant_داكن | دون تغيير | |
@color/sc_status_background_warn_dark |
sc_surface_variant_داكن | دون تغيير | |
@color/sc_icon_info_light |
Green 500 | دون تغيير | |
@color/sc_icon_recommend_light |
أصفر 500 | دون تغيير | |
@color/sc_icon_warn_light |
Red 500 | دون تغيير | |
@color/sc_icon_null_light |
رمادي 600 | دون تغيير | |
@color/sc_icon_info_dark |
Green 500 | أخضر 400 | |
@color/sc_icon_recommend_dark |
أصفر 500 | أصفر 400 | |
@color/sc_icon_warn_dark |
Red 500 | أحمر 400 | |
@color/sc_icon_null_dark |
رمادي 600 | رمادي 400 | #BDC1C6 |
@color/sc_shield_accent_dark |
غير متوفّر | رمادي 900 | #202124 |
ألوان واجهة المستخدم
الحالة الخضراء
| Green Shield | |
|---|---|
|
#1E8E3E (أخضر/600) |
| المظهر الداكن #34A853 (أخضر/500) |
|
| حاوية خضراء | |
|---|---|
|
#CEEAD6 (أخضر/100) |
| المظهر الداكن #474741 |
|
| رمز الإعدادات باللون الأخضر | |
|---|---|
|
#34A853 (أخضر/500) |
| المظهر الداكن #34A853 (أخضر/500) |
|
| زر المسح الضوئي | |
|---|---|
|
زر أخضر |
| #5BB974 (أخضر/400) | |
| العنوان | العنوان الفرعي |
|---|---|
|
|
| #1B1C17 (TextColorPrimary) | #46483B (TextColorSecondary) |
الحالة الصفراء
| الدرع الأصفر | |
|---|---|
|
#F9AB00 (أصفر/600) |
| مظهر داكن #FBBC04 (أصفر/500) |
|
| حاوية صفراء | |
|---|---|
|
#feeFC3 (أصفر/100) |
| المظهر الداكن #474741 (أصفر/500) |
|
| رمز الإعدادات الأصفر | |
|---|---|
|
#FBBC04 (أصفر/500) |
| المظهر الداكن #FBBC04 (أصفر/500) |
|
| زر المسح الضوئي | |
|---|---|
|
زر أصفر |
| #5BB974 (أصفر/400) | |
| العنوان | العنوان الفرعي |
|---|---|
|
|
| #1B1C17 (TextColorPrimary) | #46483B (TextColorSecondary) |
الحالة الحمراء
| درع أحمر | |
|---|---|
|
#D93025 (أحمر/600) |
| المظهر الداكن #EA4335 (أحمر/500) |
|
| حاوية حمراء | |
|---|---|
|
#FAD2CF (أحمر/100) |
| المظهر الداكن #474741 |
|
| رمز الإعدادات الأحمر | |
|---|---|
|
#EA4335 (أحمر/500) |
| المظهر الداكن #EA4335 (أحمر/500) |
|
| زر إلغاء التثبيت | |
|---|---|
|
زر أحمر |
| #EE675C (أحمر/400) | |
| العنوان | العنوان الفرعي |
|---|---|
|
|
| #1B1C17 (TextColorPrimary) | #46483B (TextColorSecondary) |
الخطوط ومظهر النص
تعتمد خطوط مركز الأمان ومظهر النص على شكل النص التلقائي في Android، ويجب أن تكتسب أي تغييرات في مجموعة الخطوط وحجمها وغير ذلك من الخصائص الأخرى التي سبق أن تم ضبطها من قِبل المصنِّعين الأصليين للأجهزة على الأنماط على مستوى الجهاز. يمكن إلغاء مظهر النص في "مركز الأمان" مباشرةً باستخدام الموارد RRO.
| مظهر نص مركز الأمان | قاعدة DeviceDefault | اللون | الحجم | الوزن |
|---|---|---|---|---|
TextAppearance.SafetyCenter.Headline |
TextAppearance.DeviceDefault.Headline |
android:textColorPrimary |
يختلف | منتظمة |
TextAppearance.SafetyCenter.Headline.Status |
TextAppearance.DeviceDefault.Headline |
android:textColorPrimary |
22 نقطة في البوصة/28 نقطة في البوصة | " |
TextAppearance.SafetyCenter.Headline.Issue |
TextAppearance.DeviceDefault.Headline |
android:textColorPrimary |
18 sp/24 sp | " |
TextAppearance.SafetyCenter.Headline.Entry |
TextAppearance.DeviceDefault.Headline |
android:textColorPrimary |
20 نقطة في البوصة/24 نقطة في البوصة | " |
TextAppearance.SafetyCenter.Medium |
TextAppearance.DeviceDefault.Medium |
يختلف | 14 حرفًا في السطر/20 حرفًا في السطر أو 16 حرفًا في السطر/24 حرفًا في السطر |
متوسط |
TextAppearance.SafetyCenter.Body |
TextAppearance.DeviceDefault.Small |
android:textColorSecondary |
14 نقطة/20 نقطة | منتظمة |
المسافات والأنماط
يستخدم تطبيق Safety Center مجموعة من قيم الحشو التلقائية بشكل عام للحشو والحدود. يمكنك تغيير كثافة معلومات "مركز الأمان" من خلال تجاوز قيم المسافات.
| اسم المورِد | القيمة التلقائية |
|---|---|
@dimen/sc_spacing_xxxsmall |
2 dp |
@dimen/sc_spacing_xxsmall |
4 وحدات بكسل مستقلة الكثافة |
@dimen/sc_spacing_xsmall |
8 dp |
@dimen/sc_spacing_small |
12 dp |
@dimen/sc_spacing_medium |
14 dp |
@dimen/sc_spacing_large |
16 وحدة بكسل مستقلة الكثافة |
@dimen/sc_spacing_xlarge |
18 dp |
@dimen/sc_spacing_xxlarge |
20 وحدة بكسل مستقلة الكثافة |
@dimen/sc_spacing_xxxlarge |
24 نقطة كثافة |
يمكنك تخصيص نصف قطر زوايا بطاقات "مركز الأمان". يتم استخدام حجم ضلع واحد نصف قطر للأزرار ويتم استخدام ثلاثة أحجام ضلوع لبطاقات مركز الأمان:
| اسم المورِد | القيمة التلقائية |
|---|---|
@dimen/sc_button_corner_radius |
12 dp |
@dimen/sc_card_corner_radius_large |
28 نقطة كثافة |
@dimen/sc_card_corner_radius_medium |
20 dp |
@dimen/sc_card_corner_radius_xsmall |
4 dp |
مربّع "الإعدادات السريعة"
يمكن الوصول إلى "مركز الأمان" من مربّع "الإعدادات السريعة" الذي تم تنفيذه في وحدة PermissionController. يعيد مربّع "الإعدادات السريعة" استخدام بعض مكونات واجهة المستخدِم من شاشات "مركز الأمان" لكي تعمل العناصر التي يمكن عرضها فوق الشاشة:
- خدمة مربّعات الإعدادات السريعة:
SafetyCenterQsTileService.kt - نشاط "الإعدادات السريعة":
SafetyCenterQsActivity.java