ตั้งแต่ Android 12 เป็นต้นไป การออกแบบ Material You จะมุ่งเน้นที่การแสดงออกและความลื่นไหลในระบบปฏิบัติการ Android โดยมีเป้าหมายที่จะช่วยให้ผู้ใช้สร้างและเป็นเจ้าของประสบการณ์การใช้งานแบบรวมศูนย์ที่ตอบสนองความต้องการของตน ในฐานะพาร์ทเนอร์ Android เราขอแนะนำให้คุณนำการออกแบบ Material You ไปใช้ในอุปกรณ์ Android ในส่วนต่อไปนี้
- สีแบบเปลี่ยนอัตโนมัติ
- การเคลื่อนไหว
- วิดเจ็ต
สีแบบเปลี่ยนอัตโนมัติ
สีแบบไดนามิกเป็นหัวใจสำคัญของการออกแบบ Material You และเป็นหัวใจสําคัญของกลยุทธ์ระยะยาวของ Android ในการนําการปรับแต่งที่ง่ายขึ้นและลึกซึ้งยิ่งขึ้นมาสู่ผู้ใช้ในแบบที่อุปกรณ์อื่นๆ ไม่ได้ทํา Material You มีฟีเจอร์ต่อไปนี้
ผู้ใช้และนักพัฒนาแอปจะได้รับประสบการณ์การใช้งานที่ปรับเปลี่ยนในแบบของตัวเองได้อย่างลงตัวและหลากหลายในอุปกรณ์ Android ทุกรุ่น
โอกาสของ OEM ของ Android ในการสร้างสรรค์นวัตกรรม UI ของระบบและแอปของบุคคลที่หนึ่งต่อไปในลักษณะที่สอดคล้องกับฮาร์ดแวร์และสี แบรนด์ ผู้ผลิต และรูปแบบของแบรนด์
หากต้องการใช้ประโยชน์จากสีแบบไดนามิก ให้ใช้เรื่องราวการแยกสี Material You ของ Android 12 เป็นองค์ประกอบหลักของข้อเสนอซอฟต์แวร์สำหรับผู้ใช้ ในอุปกรณ์ ให้ใช้ตรรกะการดึงสีที่อยู่ใน AOSP โดยเฉพาะตรรกะที่รับสีแหล่งที่มาของวอลเปเปอร์หรือธีมสีเดียวและแสดงผลผ่าน API สี 65 รายการ ดูข้อกำหนดเกี่ยวกับสีแบบไดนามิกได้ที่การใช้สีแบบไดนามิก
ขั้นตอนการเปลี่ยนสีแบบไดนามิกทั้งหมดมี 4 ขั้นตอน ดังที่แสดงด้านล่าง
รูปที่ 1 ขั้นตอนสีแบบเปลี่ยนอัตโนมัติของ Material You
ผู้ใช้เปลี่ยนวอลเปเปอร์หรือธีมผ่านเครื่องมือเลือกของ OEM
ผู้ใช้เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้
ธีมของอุปกรณ์ เมื่อเลือกแล้ว Android จะเลือกสีจากแหล่งที่มาเพียงแหล่งเดียวที่ตรงตามข้อกำหนดโดยอัตโนมัติ
วอลเปเปอร์และธีมใหม่ เมื่อเลือก ตรรกะ AOSP จะเลือกสีจากแหล่งที่มาเดียวโดยอัตโนมัติจากวอลเปเปอร์ที่เลือก
AOSP จะขยายสีจากแหล่งที่มาเดียวเป็นชุดสี 5 ชุด โดยมีสีย่อย 13 สีในแต่ละชุดตามตรรกะของ AOSP จากนั้นจะสร้างแอตทริบิวต์สี 65 รายการ
UI ของแอปใช้แอตทริบิวต์สี 65 สีในลักษณะที่สอดคล้องกันทั่วทั้งระบบนิเวศของแอป Android เราขอแนะนำให้ใช้ชุดสีเดียวกันสำหรับ UI ของระบบอุปกรณ์และแอปเฉพาะ OEM
แพตช์ Android 12
หากต้องการใช้ตรรกะจากต้นทางถึงปลายทางสำหรับการดึงข้อมูลสีวอลเปเปอร์และเพื่อให้อุปกรณ์ป้อนข้อมูล API 65 สีในลักษณะที่สอดคล้องกับระบบนิเวศ ให้รวมแพตช์ต่อไปนี้ไว้ในการใช้งาน Android 12
บังคับ
ขอแนะนําอย่างยิ่ง
- แก้ไขเงื่อนไขการแข่งขันเมื่อตั้งค่า sysprop สีของบูต
- อนุญาตให้วางซ้อนได้รับการแจ้งเตือนเกี่ยวกับการเปลี่ยนแปลงธีม
- แก้ไขเงื่อนไขการแข่งขันเมื่อตั้งค่า sysprop สีของบูต (รอบที่ 2)
- ย้าย FeatureFlags ไปยังแพ็กเกจ Flag
- ใช้การรองรับธีมสำหรับผู้ใช้หลายคนอย่างถูกต้อง
- แก้ไขตัวเลือกสีวอลเปเปอร์ที่ระบุหายไปหลังจากรีบูต
- แก้ไขข้อผิดพลาดในการคํานวณสีโทนกลาง
- ไม่อนุญาตให้แอปที่ทำงานอยู่เบื้องหลังเปลี่ยนธีม
การระบุสีที่กำหนดเองใน ThemePicker
หากคุณใช้แอป ThemePicker ของ AOSP แอป WallpaperPicker จะแสดงส่วนสีหากเป็นไปตามเงื่อนไขต่อไปนี้ทั้ง 2 ข้อ
flag_monet
ในframeworks/base/packages/SystemUI/res/values/flags.xml
คือtrue
- APK สแต็บของระบบที่มีชื่อแพ็กเกจจะกำหนดไว้ในไฟล์
themes_stub_package
ในไฟล์packages/apps/ThemePicker/res/values/override.xml
รูปแบบ APK ของ Stub
ดูเวอร์ชันตัวอย่างของ APK นี้ได้ใน packages/apps/ThemePicker/themes
APK นี้ควรมีเฉพาะทรัพยากร โดยให้รายละเอียดสีพื้นฐานที่มีและชื่อของสี
ไฟล์ดังกล่าวควรมีไฟล์ XML ในส่วน res/xml
โดยใช้รูปแบบต่อไปนี้
<?xml version="1.0" encoding="utf-8"?>
<resources>
<array name="color_bundles">
<item>color1</item>
<item>color2</item>
<item>color3</item>
<item>color4</item>
</array>
<string name="bundle_name_color1">Blue</string>
<string name="bundle_name_color2">Red</string>
<string name="bundle_name_color3">Yellow</string>
<string name="bundle_name_color4">Green</string>
</resources>
ในไฟล์นี้ item
แต่ละรายการภายใน color_bundles
จะมีชื่อไม่ซ้ำกัน ตราบใดที่สตริงด้านล่างมีชื่อว่า bundle_name_item
ควรมีสตริง bundle_name_item
สำหรับสีแต่ละสี โดยมีชื่อที่สื่อความหมายสำหรับสีแต่ละสี ซึ่งสามารถแปลได้โดยการเพิ่มสตริงที่แปลแล้วที่เกี่ยวข้องลงในไดเรกทอรี res/values-language code
ค่าสีจริงอาจอยู่ใน XML เดียวกันหรือในไฟล์ XML ทรัพยากรแยกต่างหากที่มีรูปแบบต่อไปนี้
<resources>
<color name="color_primary_color1">#0000FF</color>
<color name="color_secondary_color1">#0000FF</color>
<color name="color_primary_color2">#ff0000</color>
<color name="color_secondary_color2">#ff0000</color>
<color name="color_primary_color3">#ffff00</color>
<color name="color_secondary_color3">#ffff00</color>
<color name="color_primary_color4">#00ff00</color>
<color name="color_secondary_color4">#00ff00</color>
</resources>
แต่ละรายการในอาร์เรย์กลุ่มสีควรมีรายการ color_primary_item
และ color_secondary_item
(และสีทั้ง 2 สีควรเป็นสีเดียวกัน) ค่าของcolor
รายการเหล่านี้คือรหัสสีจริงของแต่ละสีที่จะแสดงในส่วนสีพื้นฐาน
ขั้นตอนที่ 1: สร้างประสบการณ์ธีมสำหรับผู้ใช้
เครื่องมือเลือกธีมเป็นจุดที่ผู้ใช้มีส่วนร่วมกับความสามารถใหม่ในการปรับเปลี่ยนในแบบของคุณของ Material You และอาจเลือกระหว่างตัวเลือกสีหรือค่าที่กำหนดไว้ล่วงหน้า เนื่องจากเหมาะกับผลิตภัณฑ์และข้อมูลประชากรของผู้ใช้ คุณจึงมอบประสบการณ์การใช้งานที่ปรับเปลี่ยนในแบบของคุณและสีสันที่หลากหลายยิ่งขึ้นให้แก่ผู้ใช้ได้โดยใช้เครื่องมือเลือกธีมหรือเครื่องมือเลือกวอลเปเปอร์
- เมื่อใช้เครื่องมือเลือกวอลเปเปอร์ ฟีเจอร์ดึงสีจากวอลเปเปอร์จะเปิดอยู่โดยค่าเริ่มต้น อย่างไรก็ตาม คุณสามารถปรับแต่งเครื่องมือเลือกเพื่อมอบตัวเลือกเพิ่มเติมให้แก่ผู้ใช้ได้
ขั้นตอนที่ 2: แยกสีวอลเปเปอร์เป็นสีต้นทาง
หากต้องการเปิดใช้การดึงสีวอลเปเปอร์ ให้เลือกเฉพาะแพตช์ Android 12 ที่ระบุไว้ด้านบน (ฟังก์ชันนี้จะเปิดใช้โดยค่าเริ่มต้นใน AOSP รุ่นต่อๆ ไป)
ตรรกะ AOSP ที่ทริกเกอร์การดึงข้อมูลวอลเปเปอร์จะเริ่มต้นที่ frameworks/base/packages/SystemUI/src/com/android/systemui/theme/ThemeOverlayController.java
ใน ThemeOverlayController#mOnColorsChangedListener
ผ่าน WallpaperManager#onWallpaperColorsChanged
เราขอแนะนำให้ใช้ตรรกะ AOSP ที่ไม่ได้แก้ไขเพื่อให้ได้รับประสบการณ์การพัฒนาที่สอดคล้องกัน
โดยค่าเริ่มต้น ตรรกะจะเลือกสีที่มีความถี่สูงสุดซึ่งเหมาะสำหรับการใช้งาน
หากต้องการใช้ประโยชน์จากสีแหล่งที่มาอื่นๆ ที่อัลกอริทึมแสดงและนำเสนอสีเหล่านั้นต่อผู้ใช้ในเครื่องมือเลือกธีม ให้ใช้ColorScheme#getSeedColors(wallpaperColors: WallpaperColors)
สีต้นทาง (ไม่ว่าจะดึงมาจากวอลเปเปอร์หรือค่าที่กำหนดล่วงหน้าซึ่งผู้ใช้เลือก) ต้องมีค่าความเข้มCAM16เป็นอย่างน้อย 5 เพื่อให้สีต้นทางไม่ได้รับผลกระทบจากโทนสีเข้มเมื่อแปลงจากสีเดียวเป็นสีโทน 65 สี และยังคงแสดงถึงตัวเลือกของผู้ใช้ หากต้องการอ่านและแก้ไขสีใน CAM16 ให้ใช้ Cam#fromInt
หรือ Cam#getInt
การใช้จานสีแบบคงที่ สำหรับอุปกรณ์ที่ไม่รองรับการดึงข้อมูลสีของวอลเปเปอร์ คุณยังคงตรวจสอบได้ว่าแอป Google และแอปของบุคคลที่สามที่รองรับสีแบบไดนามิกจะดูดีเพียงใดโดยทำดังนี้
- ใช้พาเล็ต Material เริ่มต้นโดยปิดใช้
flag_monet
ในframeworks/base/packages/SystemUI/res/values/flags.xml
- ตรวจสอบว่าผู้ใช้ยังคงปรับเปลี่ยนระบบปฏิบัติการของตนเองได้โดยใช้เครื่องมือเลือกธีมที่กำหนดล่วงหน้า
ขั้นตอนที่ 3: ขยายสีต้นทางเป็น API สี
เมื่อใช้สีจากแหล่งที่มาเดียวที่ได้จากขั้นตอนก่อนหน้า Android จะสร้างชุดสี 5 ชุดที่ไม่ซ้ำกัน (สีเน้น 1-3 สีกลาง 1-2) โดยแต่ละชุดจะมี 13 สี และแต่ละสีจะมีค่าความสว่างที่แตกต่างกัน (0 ถึง 1,000) รวมเป็น 65 สี ตรรกะที่ระบุไว้ในแพตช์ Android 12 ใช้การขยายสีนี้อย่างถูกต้อง โดยรายละเอียดที่ระบุไว้ด้านล่างจะอธิบายการใช้งาน
เพื่อให้นักพัฒนาแอปใช้สีได้อย่างสอดคล้องกัน ชุดสี 5 โทนสี (accent1, accent2, accent3, neutral1, neutral2) และสีที่เกี่ยวข้อง 13 สีต้องอิงตามสีต้นทางสีเดียวที่มีการเปลี่ยนแปลงค่าความเข้มและสีของ CAM16 ตามลำดับดังที่เขียนไว้ด้านล่าง
-
- Chroma: ใช้ "16"
- โทนสี: เหมือนกับแหล่งที่มา
-
- Chroma: ใช้ "32"
- เฉดสี: หมุน 60 องศาตามเข็มนาฬิกา
-
- Chroma: ใช้ "4"
- โทนสี: เหมือนกับแหล่งที่มา
-
- Chroma: ใช้ "8"
- โทนสี: เหมือนกับแหล่งที่มา
CTS มีการทดสอบเพื่อตรวจสอบการเรียก API ของความสว่างและสี หากต้องการเรียกใช้ ให้ใช้
atest SystemPalette
ขั้นตอนที่ 4: ใช้สีแบบไดนามิกในแอปและ UI ของระบบ
หลังจากตั้งค่าสีแบบไดนามิกในอุปกรณ์แล้ว แอปต่างๆ จะเป็นไปตามหลักเกณฑ์ของ Material เพื่อใช้สี หลักเกณฑ์ของ Material จะเผยแพร่ใน material.io ภายในวันที่ 26 ตุลาคม 2021 เพื่อให้แอปของบุคคลที่สามนำไปใช้ สำหรับ UI ของระบบและแอปของบุคคลที่หนึ่ง เราขอแนะนำอย่างยิ่งให้ผสานรวมสีแบบไดนามิกตลอดทั้งประสบการณ์ของผู้ใช้ในลักษณะที่เหมาะกับฮาร์ดแวร์และแบรนด์ของคุณ และช่วยให้คุณแยกความแตกต่างของอุปกรณ์ได้
ดูคำแนะนำทั่วไปเกี่ยวกับสีแบบไดนามิกได้ที่หัวข้อต่อไปนี้
ใช้สีเฉพาะจุดสำหรับองค์ประกอบที่อยู่เบื้องหน้าในแอปและ UI ของระบบ
@android:color/system_accent1_0 … 1000 // most-used foreground color group @android:color/system_accent2_0 … 1000 // alternate accent, used for surfaces @android:color/system_accent3_0 … 1000 // playful, analogous color
ใช้สีกลางสำหรับองค์ประกอบพื้นหลังในแอปและ UI ของระบบ
@android:color/system_neutral1_0 … 1000 // most-used background color group @android:color/system_neutral2_0 … 1000 // used for higher-elevation surfaces
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ Material You แมปสีและวิธีใช้ API ใน SysUI ได้ที่แหล่งข้อมูลเพิ่มเติม
ขั้นตอนที่ 5: เพิ่มตัวเลือกสีแบบไดนามิกในการใช้งาน AOSP WallpaperPicker
บิลด์สำหรับ Android 13 ขึ้นไป
ตั้งแต่ Android 13 เป็นต้นไป ระบบจะเลิกใช้งาน android.theme.customization.accent_color
ระบบจะเพิ่มแอตทริบิวต์ใหม่ android.theme.customization.theme_style
เพื่อรองรับผลิตภัณฑ์ย่อยสีต่างๆ ปัจจุบันเรามีตัวแปร 4 รายการในโค้ดเบส ดังนี้
TONAL_SPOT = Default Material You theme since Android S.
VIBRANT = Theme where accent 2 and 3 are analogous to accent 1.
EXPRESSIVE = Highly chromatic theme.
SPRITZ = Desaturated theme, almost grayscale.
ระบบจะส่งข้อมูลเหล่านี้ไปยัง Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES
ดังที่แสดงใน JSON ด้านล่าง
{
"android.theme.customization.system_palette":"B1611C",
"android.theme.customization.theme_style":"EXPRESSIVE"
}
บิลด์สำหรับ Android 12 และต่ำกว่า
เมื่อใช้เครื่องมือเลือกธีมที่กำหนดเอง อุปกรณ์ต้องส่งสีต้นทางที่ถูกต้องไปยัง Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES
โดยส่งไฟล์ JSON ในรูปแบบต่อไปนี้ (โดยที่ 746BC1
เป็นตัวอย่างสีต้นทางที่ถูกต้อง)
{
"android.theme.customization.system_palette":"746BC1",
"android.theme.customization.accent_color":"746BC1"
}
ซึ่งจะเป็นการข้ามการดึงข้อมูลสีวอลเปเปอร์ (ขั้นตอนที่ 2) และขยายสีต้นทางที่ระบุเป็นแอตทริบิวต์สี 65 รายการโดยตรง (ขั้นตอนที่ 3)
ขั้นตอนที่ 6: ยื่นคำขอแจ้งปัญหา
นอกจากการผสานรวมระบบแล้ว คุณยังต้องส่งคำขอแจ้งปัญหาและแจ้งชื่อแบรนด์ของคุณให้เราทราบด้วย (Build.MANUFACTURER
) เนื่องจากแอปของบุคคลที่สามส่วนใหญ่ใช้ Material Components สำหรับ Android เพื่อแสดงสีแบบไดนามิก เราจึงใช้รายการที่อนุญาตแบบฮาร์ดโค้ดเพื่อระบุว่าอุปกรณ์ใดผสานรวมฟีเจอร์ชุดสีโทนไดนามิก
การเคลื่อนไหว
การเคลื่อนไหวที่ลื่นไหลทำให้อุปกรณ์ดูทันสมัยและพรีเมียม การเลื่อนผ่านและภาพกระเพื่อมเป็น 2 ส่วนสำคัญของการเคลื่อนไหวที่ลื่นไหลซึ่งต้องดูและรู้สึกสอดคล้องกันเพื่อสร้างความไว้วางใจและความสุขให้กับนักพัฒนาแอป
การใช้การเลื่อนผ่านในระบบปฏิบัติการ
Android 12 มีการเคลื่อนไหวของการเลื่อนผ่านขอบแบบไดนามิกและตอบสนองได้ดีขึ้นในรูปแบบของการยืดมุมมอง ซึ่งจะแสดงเมื่อผู้ใช้พยายามเลื่อนผ่านขอบของรายการ ตัวอย่างแสดงอยู่ด้านล่าง
รูปที่ 2 เอฟเฟกต์การเลื่อนผ่านของ Android 12 ตามที่แสดงในการตั้งค่า
ตรวจสอบว่าเอฟเฟกต์การเลื่อนผ่านโดยรวมในอุปกรณ์ของคุณคล้ายกับภาพต่อไปนี้เพื่อให้นักพัฒนาแอปใช้เอฟเฟกต์เดียวกัน
ในอุปกรณ์ที่แสดงผลเป็น "จริง" สำหรับ
ActivityManager.isHighEndGfx()
เอฟเฟกต์การเลื่อนเกินจะยืดหน้าจอแบบไม่เชิงเส้น (ดังที่แสดงด้านบน)ในอุปกรณ์ที่มีประสิทธิภาพต่ำ ระบบจะปรับเอฟเฟกต์การยืดให้เรียบง่ายเป็นรูปแบบการยืดแบบเชิงเส้น (เพื่อลดภาระของระบบ)
การใช้การเลื่อนผ่านในแอปของบุคคลที่หนึ่ง
เมื่อใช้มุมมองที่กำหนดเอง คุณอาจต้องปรับแต่งแอปและ UI ของระบบบางรายการที่ใช้เอฟเฟกต์การยืด
หากต้องการรองรับการเลื่อนแบบยืด ให้อัปเกรดเป็นไลบรารีล่าสุดต่อไปนี้
androidx.recyclerview:recyclerview:1.3.0-alpha01
เป็นเวลาRecyclerView
androidx.core:core:1.7.0-alpha01
สำหรับNestedScrollView
และEdgeEffectCompat
androidx.viewpager:viewpager:1.1-alpha01
เป็นเวลาViewPager
สำหรับเลย์เอาต์ที่กำหนดเองซึ่งใช้
EdgeEffect
ให้พิจารณาการเปลี่ยนแปลง UX ต่อไปนี้เมื่อใช้การเลื่อนแบบยืด ผู้ใช้ไม่ควรโต้ตอบกับเนื้อหาของเลย์เอาต์ขณะที่ระบบยืดเลย์เอาต์ ผู้ใช้ควรมีสิทธิ์จัดการเฉพาะการยืดเท่านั้น และไม่ควรมีสิทธิ์กดปุ่มในเนื้อหา
เมื่อผู้ใช้แตะเนื้อหาขณะที่
EdgeEffect
ภาพเคลื่อนไหวกำลังเล่นอยู่ ผู้ใช้ควรจับภาพเคลื่อนไหวนั้นและได้รับอนุญาตให้ควบคุมการยืด ค่าการดึงข้อมูลปัจจุบันมีอยู่ในEdgeEffectCompat.getDistance()
หากต้องการดัดแปลงค่าการดึงข้อมูลและแสดงผลจํานวนที่ใช้ ให้ใช้
onPullDistance()
ซึ่งช่วยให้นักพัฒนาแอปสามารถเปลี่ยนจากภาพยืดเป็นภาพเลื่อนได้อย่างราบรื่นเมื่อนิ้วยืดเนื้อหากลับผ่านตำแหน่งเริ่มต้นเมื่อทำงานกับการเลื่อนที่ซ้อนกัน หากเนื้อหามีการยืด การเคลื่อนไหวการแตะควรใช้กับส่วนที่ยืดก่อนเนื้อหาที่ซ้อนกัน ไม่เช่นนั้นการซ้อนกันอาจเลื่อนเมื่อนิ้วเปลี่ยนทิศทางแทนที่จะปล่อยการยืด
โปรดดูรายละเอียดเกี่ยวกับการเลื่อนเกินที่หัวข้อภาพเคลื่อนไหวของการเลื่อน ท่าทางสัมผัส
การใช้ภาพกระเพื่อม (การสัมผัสที่ตอบสนอง) ในระบบปฏิบัติการ
Android 12 มีภาพคลื่นของการสัมผัสที่นุ่มนวลและละเอียดยิ่งขึ้นเพื่อแสดงผลลัพธ์ให้ผู้ใช้ทราบเมื่อแตะลง
รูปที่ 3 เอฟเฟกต์ระลอกคลื่นของ Android 12 ที่มีภาพเคลื่อนไหวที่นุ่มนวลขึ้น
ตรวจสอบว่าเอฟเฟกต์ภาพคลื่นในอุปกรณ์ของคุณคล้ายกับตัวอย่างที่แสดงด้านบน เพื่อให้นักพัฒนาแอปคาดการณ์ได้และมอบประสบการณ์การใช้งานที่ยอดเยี่ยมแก่ผู้ใช้ แม้ว่าคุณจะไม่ต้องทำตามขั้นตอนใดๆ ในการผสานรวมเพื่อรองรับผลที่ตามมา แต่คุณควรทดสอบผลลัพธ์ในอุปกรณ์เพื่อตรวจหาการถดถอยที่ไม่ตั้งใจซึ่งเกิดขึ้นในการใช้งาน
วิดเจ็ต
วิดเจ็ตเป็นองค์ประกอบหลักของอุปกรณ์ Android Android 12 มี API ใหม่ๆ และความสามารถของ API ที่ OEM ทั้งหมดควรรองรับ
ในระบบปฏิบัติการของคุณ ให้รองรับ API สําหรับนักพัฒนาซอฟต์แวร์ที่เกี่ยวข้องกับเลย์เอาต์ วิดเจ็ต การปรับขนาด และพารามิเตอร์ซอฟต์แวร์ (เช่น ขนาดมุมมน) การติดตั้งใช้งานควรรองรับวิดเจ็ตในการระบุพารามิเตอร์ผ่าน API อย่างถูกต้อง และตรวจสอบว่าผู้ใช้สามารถปรับขนาดและกำหนดค่าวิดเจ็ตได้
ในแอป ให้ใช้ประโยชน์จากความสามารถใหม่ๆ ของ API เพื่ออัปเดตหรือสร้างวิดเจ็ตใหม่ของบุคคลที่หนึ่ง (หากเป็นไปได้) สําหรับวิดเจ็ตแอปของบุคคลที่หนึ่งทั้งหมดในขอบเขตของคุณ ให้ทําตามรายการตรวจสอบสําหรับนักพัฒนาแอปด้านล่าง
- โดยลำดับความสำคัญจะอิงตามคำแนะนำจากแพลตฟอร์ม
- ดูรายละเอียดเกี่ยวกับคําแนะนําได้โดยไปที่ลิงก์ในคอลัมน์ "การเปลี่ยนแปลง"
พื้นที่ เปลี่ยน ลําดับความสําคัญของการใช้งาน ปรับปรุงประสบการณ์การใช้งานในบ้าน เพิ่มตัวอย่างเพลงที่ปรับขนาดได้ P1 เพิ่มคำอธิบายวิดเจ็ต P1 ปรับแต่งวิดเจ็ตได้ง่ายขึ้น P2 (ไม่บังคับ) เปิดใช้เพื่อทำให้ทรานซิชันราบรื่นยิ่งขึ้น P0 หลีกเลี่ยงการกระโดดข้ามช่อง P0 ใช้หลักเกณฑ์เกี่ยวกับวิดเจ็ต ปรับปรุงขนาดและเลย์เอาต์วิดเจ็ต P2 ใช้สีแบบไดนามิก P0 ใช้มุมมน P0 เพิ่มปุ่มคอมโพเนนต์ใหม่ P2 ลดความซับซ้อนของโค้ดวิดเจ็ตที่มีอยู่ ลดความซับซ้อนของคอลเล็กชัน RemoteView P2 ลดความซับซ้อนของรันไทม์ RemoteView P2
แหล่งข้อมูลเพิ่มเติม
การใช้สี SysUI
(accent1 = A1, accent2 = A2, accent3 = A3, neutral1 = N1, neutral2 = N2)
รูปที่ 4 การใช้สีแบบไดนามิกใน UI ของระบบ
การอัปเดตแอตทริบิวต์สีของคลังวัสดุ
Material จะอัปเดตแอตทริบิวต์ธีมในรุ่นที่จะเปิดตัวโดยสร้างบทบาทสีที่ใช้เพื่อกำหนดสีให้กับมุมมองที่เฉพาะเจาะจง
บทบาทของสี | แอตทริบิวต์ธีมของ Android | ธีมสว่าง สีแบบเปลี่ยนอัตโนมัติ |
ธีมมืด สีแบบเปลี่ยนอัตโนมัติ |
---|---|---|---|
เสียงหลัก | colorPrimary | system_accent1_600 | system_accent1_200 |
ในอุปกรณ์หลัก | colorOnPrimary | system_accent1_0 | system_accent1_800 |
เสียงรอง | colorSecondary | system_accent2_600 | system_accent2_200 |
บนอุปกรณ์รอง | colorOnSecondary | system_accent2_0 | system_accent2_800 |
ข้อผิดพลาด | colorError | ไม่มี (red_600) | ไม่มี (red_200) |
On Error | colorOnError | ไม่มี (สีขาว) | ไม่มี (red_900) |
ฉากหลัง | android:colorBackground | system_neutral1_10 | system_neutral1_900 |
ทำงานอยู่เบื้องหลัง | colorOnBackground | system_neutral1_900 | system_neutral1_100 |
พื้นผิว | colorSurface | system_neutral1_10 | system_neutral1_900 |
ใน Surface | colorOnSurface | system_neutral1_900 | system_neutral1_100 |
วัสดุจะอัปเดตแอตทริบิวต์สถานะด้วยเคอร์เซอร์ต่อไปนี้
บทบาทของสี | แอตทริบิวต์ธีมของ Android | ธีมสว่าง สีแบบเปลี่ยนอัตโนมัติ |
ธีมมืด สีแบบเปลี่ยนอัตโนมัติ |
---|---|---|---|
เนื้อหาสถานะหลัก | colorPrimaryStateContent | system_accent1_700 | system_accent1_200 |
เลเยอร์สถานะหลัก | colorPrimaryStateLayer | system_accent1_600 | system_accent1_300 |
เนื้อหาสถานะรอง | colorSecondaryStateContent | system_accent2_700 | system_accent2_200 |
เลเยอร์สถานะรอง | colorSecondaryStateLayer | system_accent2_600 | system_accent2_300 |
ในเนื้อหาสถานะหลัก | colorOnPrimaryStateContent | system_accent1_0 | system_accent1_800 |
ในเลเยอร์สถานะหลัก | colorOnPrimaryStateLayer | system_accent1_900 | system_accent1_800 |
เกี่ยวกับเนื้อหาของรัฐรอง | colorOnSecondaryStateContent | system_accent2_0 | system_accent2_800 |
ในเลเยอร์สถานะรอง | colorOnSecondaryStateLayer | system_accent2_900 | system_accent2_800 |
ในเนื้อหาสถานะคอนเทนเนอร์หลัก | colorOnPrimaryContainerStateContent | system_accent1_900 | system_accent1_900 |
ในเลเยอร์สถานะคอนเทนเนอร์หลัก | colorOnPrimaryContainerStateLayer | system_accent1_900 | system_accent1_900 |
เกี่ยวกับเนื้อหาสถานะคอนเทนเนอร์รอง | colorOnSecondaryContainerStateContent | system_accent2_900 | system_accent2_900 |
ในเลเยอร์สถานะคอนเทนเนอร์รอง | colorOnSecondaryContainerStateLayer | system_accent2_900 | system_accent2_900 |
เกี่ยวกับเนื้อหาสถานะคอนเทนเนอร์ระดับ 3 | colorOnTertiaryContainerStateContent | system_accent3_900 | system_accent3_900 |
ในเลเยอร์สถานะคอนเทนเนอร์ระดับ 3 | colorOnTertiaryContainerStateLayer | system_accent3_900 | system_accent3_900 |
เกี่ยวกับเนื้อหาสถานะของอุปกรณ์ | colorOnSurfaceStateContent | system_neutral1_900 | system_neutral1_100 |
เลเยอร์สถานะบนพื้นผิว | colorOnSurfaceStateLayer | system_neutral1_900 | system_neutral1_100 |
เกี่ยวกับเนื้อหาสถานะตัวแปรที่แสดง | colorOnSurfaceVariantStateContent | system_neutral2_700 | system_neutral2_200 |
เลเยอร์สถานะตัวแปรบนแพลตฟอร์ม | colorOnSurfaceVariantStateLayer | system_neutral2_700 | system_neutral2_200 |
เนื้อหาสถานะข้อผิดพลาด | colorErrorStateContent | red800 | red200 |
คำถามที่พบบ่อย
การดึงสี
เมื่อผู้ใช้เปลี่ยนวอลเปเปอร์ ระบบจะดึงข้อมูลสีโดยอัตโนมัติหรือต้องมีการเรียกให้ดึงข้อมูลจากที่ใดที่หนึ่ง
เมื่อใช้แพตช์ Android 12 การดึงสีวอลเปเปอร์จะเปิดอยู่โดยค่าเริ่มต้น
ThemeOverlayController.java
ทริกเกอร์ตรรกะด้วย ThemeOverlayController#mOnColorsChangedListener
และ WallpaperManager#onWallpaperColorsChanged
สำหรับวอลเปเปอร์เคลื่อนไหวหรือวอลเปเปอร์วิดีโอ โปรดบอกให้เราทราบว่าการแยกสีจะดึงสีจากหน้าจอเมื่อใด ผู้ใช้บางรายอาจต้องการสีจากเฟรมสุดท้ายเนื่องจากแสดงมากที่สุด
การสกัดสีจะทริกเกอร์เมื่อผู้ใช้ตั้งค่าวอลเปเปอร์หรือหลังจากหน้าจอเปิดและปิด (เพื่อตอบสนองต่อ WallpaperEngine#notifyColorsChanged
) ระบบจะใช้เหตุการณ์ WallpaperColors
รายการล่าสุด (จากวอลเปเปอร์สด) หลังจากที่ผู้ใช้ปิดหน้าจอและเปิดอีกครั้ง
เครื่องมือเลือกธีม/วอลเปเปอร์
ฉันจะเปิดใช้เครื่องมือเลือกธีมเพื่อแสดงสีต้นทางหลายสีให้ผู้ใช้เลือกแทนสีที่มีการใช้งานมากที่สุดได้อย่างไร มีวิธีรับสีเหล่านั้นจากตรรกะการดึงข้อมูลไหม
ได้ คุณใช้ ColorScheme#getSeedColors(wallpaperColors: WallpaperColors)
ในเครื่องมือเลือกธีมได้
มีฟีเจอร์ใน Pixel ที่ชื่อไอคอนตามธีม ปัญหานี้รวมอยู่ในแพตช์ 3 รายการที่คุณแชร์หรือไม่ OEM จะนำฟีเจอร์นี้ไปใช้ได้อย่างไร
ไม่ได้ ไอคอนธีมอยู่ในรุ่นเบต้าและไม่พร้อมใช้งานใน Android 12
มีวิธีใช้แอป Google Wallpapers โดยเปิดใช้ฟีเจอร์การเลือกและดึงสีไหม
ได้ คุณติดตั้งใช้งานฟีเจอร์เหล่านี้ได้ในแอป Google Wallpaper เวอร์ชันล่าสุดโดยทำตามขั้นตอนการผสานรวมที่อธิบายไว้ก่อนหน้านี้ในหน้านี้
โปรดติดต่อ TAM เพื่อขอรายละเอียดเพิ่มเติม
Google แชร์แอปหรือซอร์สโค้ดเพื่อให้ OEM นำตัวอย่างสีแบบไดนามิกเวอร์ชันของตัวเองไปใช้ในเมนูการตั้งค่าได้ไหม ซึ่งมีลักษณะคล้ายกับส่วนตัวอย่างที่แสดงในแอปเครื่องมือเลือกวอลเปเปอร์ของ Google
คลาสหลักที่แสดงตัวอย่าง ได้แก่
WallpaperPicker2
และ
Launcher3
หน้าจอตัวอย่างวอลเปเปอร์คือ WallpaperSectionController
วิธีใช้ตัวอย่างหลังจากเปลี่ยนสีตามที่แสดงในแอป Google Wallpapers
แอปเครื่องมือเลือกวอลเปเปอร์จะคาดหวังว่าจะมี ContentProvider
จาก Launcher (Launcher ที่ใช้ Launcher3
จะมี ContentProvider
) ตัวอย่างภาพมีให้โดย GridCustomizationsProvider
ใน Launcher ซึ่งควรอ้างอิงในข้อมูลเมตาของกิจกรรมหลักของ Launcher เพื่อให้วอลเปเปอร์และแอปสไตล์อ่านได้ ทั้งหมดนี้นำมาใช้ใน Launcher3 ของ AOSP และพร้อมให้บริการสำหรับ OEM