รหัสสำหรับ UI ของศูนย์ความปลอดภัยอยู่ในไดเรกทอรี safetycenter
packages/modules/Permission/PermissionController/src/com/android/permissioncontroller/safetycenter/
ปรับแต่ง UI ของศูนย์ความปลอดภัยโดยใช้การวางซ้อนทรัพยากรรันไทม์ (RRO) ใน
โฟลเดอร์การวางซ้อน OEM โปรดดูข้อมูลเกี่ยวกับ RRO ที่หัวข้อเปลี่ยนมูลค่าของแอป
ทรัพยากรขณะรันไทม์
ธีมและสีของศูนย์ความปลอดภัย
ศูนย์ความปลอดภัยมีธีมหลัก 4 ธีมที่ใช้แอตทริบิวต์ UI เดียวกัน
- ไฟศูนย์ความปลอดภัย
- ศูนย์ความปลอดภัยในธีมมืด
- ไฟแสดงการตั้งค่าด่วนของศูนย์ความปลอดภัย
- การตั้งค่าด่วนของศูนย์ความปลอดภัยแบบมืด
ธีมศูนย์ความปลอดภัยมีสีเริ่มต้น วาดสี UI ตามหลัก สีของระบบ Android และปรับโดยอัตโนมัติให้เข้ากับสีทั่วไปของ OEM การปรับแต่งสีของ Android โดยค่าเริ่มต้น สีเหล่านี้จะปรับตาม สไตล์ Material ที่คุณออกแบบใน Android
คุณเปลี่ยนสีศูนย์ความปลอดภัยได้โดยการลบล้างค่า
| สีของ UI ศูนย์ความปลอดภัย | ชื่อแอตทริบิวต์ | ทรัพยากร |
|---|---|---|
| ฉากหลัง | 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 ดาว
จาก 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 พ แนะนำให้คุณเก็บสีพื้นฐานเหล่านี้ไว้ แต่คุณใช้เฉดสีที่แตกต่างกันได้ ชุดสีเขียว เหลือง และแดง
แอตทริบิวต์สีเหล่านี้ใช้สำหรับการเชื่อมโยงสินค้าที่มีสีที่มีความร้ายแรงใน
UI ของศูนย์ความปลอดภัย ซึ่งรวมถึงไอคอน ปุ่ม การสแกน และการเปลี่ยนสถานะ
ภาพเคลื่อนไหว การแก้ไขสีเหล่านี้จะเป็นการเปลี่ยนสีองค์ประกอบทั้งหมด ตัวอย่างเช่น การแก้ไข
@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 |
เขียว 600 | สีเขียวความหมาย | #0E8435 |
@color/sc_status_recommend_light |
เหลือง 600 | ไม่มีการเปลี่ยนแปลง | |
@color/sc_status_warn_light |
แดง 600 | ไม่มีการเปลี่ยนแปลง | |
@color/sc_status_info_dark |
เขียว 500 | เขียว 400 | #5BB974 |
@color/sc_status_recommend_dark |
เหลือง 500 | เหลือง 400 | #FCC934 |
@color/sc_status_warn_dark |
แดง 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 |
ตัวแปรสีผิวเข้ม | ไม่มีการเปลี่ยนแปลง | |
@color/sc_status_background_recommend_dark |
ตัวแปรสีผิวเข้ม | ไม่มีการเปลี่ยนแปลง | |
@color/sc_status_background_warn_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 |
เขียว 500 | เขียว 400 | |
@color/sc_icon_recommend_dark |
เหลือง 500 | เหลือง 400 | |
@color/sc_icon_warn_dark |
แดง 500 | แดง 400 | |
@color/sc_icon_null_dark |
เทา 600 | เทา 400 | #BDC1C6 |
@color/sc_shield_accent_dark |
ไม่พร้อมใช้งาน | เทา 900 | #202124 |
สีของ UI
สถานะสีเขียว
| โล่สีเขียว | |
|---|---|
|
#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 และควรรับค่าการเปลี่ยนแปลงของชุดแบบอักษร น้ำหนัก และที่มา พร็อพเพอร์ตี้ที่ OEM กำหนดค่าไว้ให้ในรูปแบบสำหรับใช้กับอุปกรณ์ทั้งเครื่องแล้ว ศูนย์ความปลอดภัย ลักษณะที่ปรากฏของข้อความจะถูกลบล้างได้โดยตรงโดยใช้ 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 |
คุณสามารถปรับแต่งรัศมีมุมของการ์ดศูนย์ความปลอดภัยได้ มุมขนาดเดียว รัศมีใช้สำหรับปุ่ม และขนาดมุม 3 ขนาดใช้สำหรับศูนย์ความปลอดภัย การ์ด:
| ชื่อทรัพยากร | ค่าเริ่มต้น |
|---|---|
@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 |
การ์ดการตั้งค่าด่วน
คุณสามารถเข้าถึงศูนย์ความปลอดภัยได้จากการ์ดการตั้งค่าด่วนที่ใช้ใน โมดูล PermissionsController การ์ดการตั้งค่าด่วนนำ UI บางรายการมาใช้ซ้ำ จากหน้าจอศูนย์ความปลอดภัยเพื่อให้โฆษณาซ้อนทับได้ทำงาน
- บริการการ์ดการตั้งค่าด่วน:
SafetyCenterQsTileService.kt - กิจกรรมในการตั้งค่าด่วน:
SafetyCenterQsActivity.java