ปรับแต่ง UI ของศูนย์ความปลอดภัย

รหัสสำหรับ 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 บางส่วนจากหน้าจอศูนย์ความปลอดภัยมาใช้ซ้ำ เพื่อให้การซ้อนทับสามารถทำงานได้: