הקוד של ממשק המשתמש של מרכז הבטיחות נמצא בספרייה safetycenterpackages/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 |
| Surface | 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. מומלץ להשתמש בצבעים הבסיסיים האלה, אבל אפשר להשתמש גם בגוונים שונים של לוח הצבעים הירוק, הצהוב והאדום.
מאפייני הצבע האלה משמשים לשיוך פריטים לפי רמת חומרה בממשק המשתמש של מרכז הבטיחות, כולל סמלים, לחצנים ואנימציות של סריקות ושל שינויי סטטוס. שינוי הצבעים האלה יגרום לצביעה מחדש של כל הרכיבים. לדוגמה, שינוי של @color/sc_status_info_{light,dark} משנה את צבע הרקע גם בתמונת הסטטוס הסטטית וגם באנימציה של הרקע במהלך הסריקה.
העיצוב של ההגדרות המהירות במרכז הבטיחות כולל צבעים של מצב כהה, גם אם המכשיר מוגדר למצב כהה וגם אם לא.
| רמת החומרה | רכיב UI | שם המאפיין או המשאב | צבע ברירת המחדל |
|---|---|---|---|
| מידע (ירוק) | מגן הסטטוס | ?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 |
אדום 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 | Green 400 | #5BB974 |
@color/sc_status_recommend_dark |
צהוב 500 | צהוב 400 | #FCC934 |
@color/sc_status_warn_dark |
Red 500 | Red 400 | #EE675C |
@color/sc_status_background_info_light |
Green 100 | ללא שינוי | |
@color/sc_status_background_recommend_light |
צהוב 100 | ללא שינוי | |
@color/sc_status_background_warn_light |
Red 100 | ללא שינוי | |
@color/sc_status_background_info_dark |
sc_surface_variant_dark | ללא שינוי | |
@color/sc_status_background_recommend_dark |
sc_surface_variant_dark | ללא שינוי | |
@color/sc_status_background_warn_dark |
sc_surface_variant_dark | ללא שינוי | |
@color/sc_icon_info_light |
ירוק 500 | ללא שינוי | |
@color/sc_icon_recommend_light |
צהוב 500 | ללא שינוי | |
@color/sc_icon_warn_light |
אדום 500 | ללא שינוי | |
@color/sc_icon_null_light |
אפור 600 | ללא שינוי | |
@color/sc_icon_info_dark |
Green 500 | Green 400 | |
@color/sc_icon_recommend_dark |
צהוב 500 | צהוב 400 | |
@color/sc_icon_warn_dark |
Red 500 | Red 400 | |
@color/sc_icon_null_dark |
אפור 600 | אפור 400 | #BDC1C6 |
@color/sc_shield_accent_dark |
לא זמין | אפור 900 | #202124 |
צבעי ממשק המשתמש
מצב ירוק
| Green Shield | |
|---|---|
|
#1E8E3E (green/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) |
מדינה אדומה
| Red Shield | |
|---|---|
|
#D93025 (אדום/600) |
| עיצוב כהה #EA4335 (אדום/500) |
|
| מאגר אדום | |
|---|---|
|
#FAD2CF (red/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 sp/28 sp | " |
TextAppearance.SafetyCenter.Headline.Issue |
TextAppearance.DeviceDefault.Headline |
android:textColorPrimary |
18 sp/24 sp | " |
TextAppearance.SafetyCenter.Headline.Entry |
TextAppearance.DeviceDefault.Headline |
android:textColorPrimary |
20 sp/24 sp | " |
TextAppearance.SafetyCenter.Medium |
TextAppearance.DeviceDefault.Medium |
משתנה | 14 sp/20 sp או 16 sp/24 sp |
בינוני |
TextAppearance.SafetyCenter.Body |
TextAppearance.DeviceDefault.Small |
android:textColorSecondary |
14 sp/20 sp | רגיל |
ריווח וסגנונות
מרכז הבטיחות משתמש בקבוצה של ערכי ברירת מחדל לכל הפריטים, לרווח ולמרחקים. כדי לשנות את צפיפות המידע במרכז הבטיחות, משנים את ערכי המרווחים.
| שם משאב | ערך ברירת מחדל |
|---|---|
@dimen/sc_spacing_xxxsmall |
2 dp |
@dimen/sc_spacing_xxsmall |
4 dp |
@dimen/sc_spacing_xsmall |
8 dp |
@dimen/sc_spacing_small |
12 dp |
@dimen/sc_spacing_medium |
14 dp |
@dimen/sc_spacing_large |
16 dp |
@dimen/sc_spacing_xlarge |
18 dp |
@dimen/sc_spacing_xxlarge |
20 dp |
@dimen/sc_spacing_xxxlarge |
24 dp |
אתם יכולים להתאים אישית את רדיוס הפינות של הכרטיסים במרכז הבטיחות. רדיוס פינה אחד משמש ללחצנים ושלושה גדלים של פינות משמשים בכרטיסים של מרכז הבטיחות:
| שם משאב | ערך ברירת מחדל |
|---|---|
@dimen/sc_button_corner_radius |
12 dp |
@dimen/sc_card_corner_radius_large |
28 dp |
@dimen/sc_card_corner_radius_medium |
20 dp |
@dimen/sc_card_corner_radius_xsmall |
4 dp |
לחצן בהגדרות המהירות
אפשר לגשת למרכז הבטיחות דרך משבצת בהגדרות המהירות שמוטמעת במודול PermissionController. כדי שאפשר יהיה להשתמש בשכבות-על, בחלונית ההגדרות המהירות נעשה שימוש חוזר בחלק מרכיבי ממשק המשתמש של המסכים במרכז הבטיחות:
- שירות של לחצן בהגדרות המהירות:
SafetyCenterQsTileService.kt - פעילות בהגדרות המהירות:
SafetyCenterQsActivity.java