รหัสสำหรับ UI ของศูนย์ความปลอดภัยจะอยู่ในไดเร็กทอรีของ safetycenter
packages/modules/Permission/PermissionController/src/com/android/permissioncontroller/safetycenter/
ปรับแต่ง UI ของศูนย์ความปลอดภัยโดยใช้ Runtime Resource Overlays (RRO) ในโฟลเดอร์โอเวอร์เลย์ OEM สำหรับข้อมูลเกี่ยวกับ RRO โปรดดูที่ การเปลี่ยนแปลงค่าของทรัพยากรของแอป ณ รันไทม์
ธีมและสีของศูนย์ความปลอดภัย
ศูนย์ความปลอดภัยมีธีมหลักสี่ธีมที่ใช้คุณลักษณะ UI เหมือนกัน:
- ไฟศูนย์ความปลอดภัย
- ศูนย์ความปลอดภัยมืด
- ไฟการตั้งค่าด่วนของศูนย์ความปลอดภัย
- การตั้งค่าด่วนของศูนย์ความปลอดภัย มืด
ธีมศูนย์ความปลอดภัยมีสีเริ่มต้น สีหลักของ UI นั้นมาจากสีของระบบ Android และสามารถปรับให้เข้ากับการปรับแต่งสี Android โดยทั่วไปของ OEM ได้ ตามค่าเริ่มต้น สีเหล่านี้จะปรับเป็นส่วนหนึ่งของสไตล์ Material You ใน 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 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 เราขอแนะนำให้คุณคงสีพื้นฐานเหล่านี้ไว้ แต่คุณสามารถใช้เฉดสีต่างๆ ของชุดสีสีเขียว เหลือง และแดงได้
คุณลักษณะสีเหล่านี้ใช้สำหรับเชื่อมโยงรายการที่มีสีความรุนแรงใน 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 | 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 | สีเขียว 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 (สีข้อความหลัก) | #46483B (สีข้อความรอง) |
รัฐสีเหลือง
โล่สีเหลือง | |
---|---|
#F9AB00 (เหลือง/600) | |
ธีมสีเข้ม #FBBC04 (เหลือง/500) |
ภาชนะสีเหลือง | |
---|---|
#FEEFC3 (เหลือง/100) | |
ธีมสีเข้ม #474741 (เหลือง/500) |
ไอคอนการตั้งค่าสีเหลือง | |
---|---|
#FBBC04 (เหลือง/500) | |
ธีมสีเข้ม #FBBC04 (เหลือง/500) |
ปุ่มสแกน | |
---|---|
ปุ่มสีเหลือง | |
#5BB974 (เหลือง/400) |
ชื่อ | คำบรรยาย |
---|---|
#1B1C17 (สีข้อความหลัก) | #46483B (สีข้อความรอง) |
รัฐแดง
โล่แดง | |
---|---|
#D93025 (แดง/600) | |
ธีมสีเข้ม #EA4335 (แดง/500) |
ภาชนะสีแดง | |
---|---|
#FAD2CF (แดง/100) | |
ธีมสีเข้ม #474741 |
ไอคอนการตั้งค่าสีแดง | |
---|---|
#EA4335 (แดง/500) | |
ธีมสีเข้ม #EA4335 (แดง/500) |
ปุ่มถอนการติดตั้ง | |
---|---|
ปุ่มสีแดง | |
#EE675C (แดง/400) |
ชื่อ | คำบรรยาย |
---|---|
#1B1C17 (สีข้อความหลัก) | #46483B (สีข้อความรอง) |
แบบอักษรและลักษณะที่ปรากฏของข้อความ
แบบอักษรและลักษณะข้อความของศูนย์ความปลอดภัยจะขึ้นอยู่กับลักษณะที่ปรากฏของข้อความเริ่มต้นของ Android และควรสืบทอดการเปลี่ยนแปลงใดๆ กับตระกูลแบบอักษร น้ำหนัก และคุณสมบัติอื่นๆ ที่ OEM กำหนดค่าไว้แล้วให้เป็นสไตล์ทั้งอุปกรณ์ ลักษณะข้อความของศูนย์ความปลอดภัยสามารถแทนที่ได้โดยตรงโดยใช้ RRO
ลักษณะข้อความของศูนย์ความปลอดภัย | ฐานเริ่มต้นของอุปกรณ์ | สี | ขนาด | น้ำหนัก |
---|---|---|---|---|
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สป/24สป | " |
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 หน้า |
@dimen/sc_spacing_xxsmall | 4 หน้า |
@dimen/sc_spacing_xsmall | 8 หน้า |
@dimen/sc_spacing_small | 12 หน้า |
@dimen/sc_spacing_medium | 14 หน้า |
@dimen/sc_spacing_large | 16 หน้า |
@dimen/sc_spacing_xlarge | 18 หน้า |
@dimen/sc_spacing_xxlarge | 20 หน้า |
@dimen/sc_spacing_xxxlarge | 24 หน้า |
คุณสามารถปรับแต่งรัศมีมุมของการ์ดศูนย์ความปลอดภัยได้ รัศมีขนาดมุมหนึ่งใช้สำหรับปุ่ม และขนาดมุมสามขนาดใช้สำหรับการ์ดศูนย์ความปลอดภัย:
ชื่อทรัพยากร | ค่าเริ่มต้น |
---|---|
@dimen/sc_button_corner_radius | 12 หน้า |
@dimen/sc_card_corner_radius_large | 28 หน้า |
@dimen/sc_card_corner_radius_medium | 20 หน้า |
@dimen/sc_card_corner_radius_xsmall | 4 หน้า |
ไทล์การตั้งค่าด่วน
ศูนย์ความปลอดภัยสามารถเข้าถึงได้จากไทล์การตั้งค่าด่วนที่ใช้งานในโมดูล PermissionController ไทล์การตั้งค่าด่วนจะนำส่วนประกอบ UI บางส่วนจากหน้าจอศูนย์ความปลอดภัยมาใช้ซ้ำ เพื่อให้การซ้อนทับสามารถทำงานได้:
- บริการไทล์การตั้งค่าด่วน:
SafetyCenterQsTileService.kt
- กิจกรรมการตั้งค่าด่วน:
SafetyCenterQsActivity.java