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

รหัสสำหรับ UI ของศูนย์ความปลอดภัยอยู่ในไดเรกทอรี safetycenter packages/modules/Permission/PermissionController/src/com/android/permissioncontroller/safetycenter/ ปรับแต่ง UI ของศูนย์ความปลอดภัยโดยใช้การวางซ้อนทรัพยากรรันไทม์ (RRO) ในโฟลเดอร์การวางซ้อน OEM ดูข้อมูลเกี่ยวกับ RRO ได้ที่เปลี่ยนค่าของทรัพยากรของแอปขณะรันไทม์

ธีมและสีของศูนย์ความปลอดภัย

ศูนย์ความปลอดภัยมีธีมหลัก 4 ธีมที่ใช้แอตทริบิวต์ 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)
คอนเทนเนอร์ของ Shield สถานะ ?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 สีเขียวเชิงความหมาย #0E8435
@color/sc_status_recommend_light เหลือง 600 ไม่มีการเปลี่ยนแปลง
@color/sc_status_warn_light แดง 600 ไม่มีการเปลี่ยนแปลง
@color/sc_status_info_dark Green 500 เขียว 400 #5BB974
@color/sc_status_recommend_dark เหลือง 500 เหลือง 400 #FCC934
@color/sc_status_warn_dark Red 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 Green 500 ไม่มีการเปลี่ยนแปลง
@color/sc_icon_recommend_light Yellow 500 ไม่มีการเปลี่ยนแปลง
@color/sc_icon_warn_light แดง 500 ไม่มีการเปลี่ยนแปลง
@color/sc_icon_null_light เทา 600 ไม่มีการเปลี่ยนแปลง
@color/sc_icon_info_dark Green 500 เขียว 400
@color/sc_icon_recommend_dark Yellow 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

สถานะสีเขียว

Green Shield

#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)

สถานะสีแดง

Red Shield

#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 บรรทัด/28 บรรทัด "
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 บางส่วนจากหน้าจอศูนย์ความปลอดภัยซ้ำเพื่อให้โฆษณาซ้อนทับทำงานได้