รหัสสำหรับ 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