ดีไซน์ Material You

ตั้งแต่ 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 ขั้นตอน ดังที่แสดงด้านล่าง

ฟีเจอร์การเปลี่ยนสีของ Material You

รูปที่ 1 ขั้นตอนสีแบบเปลี่ยนอัตโนมัติของ Material You

  1. ผู้ใช้เปลี่ยนวอลเปเปอร์หรือธีมผ่านเครื่องมือเลือกของ OEM

  2. ผู้ใช้เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

    • ธีมของอุปกรณ์ เมื่อเลือกแล้ว Android จะเลือกสีจากแหล่งที่มาเพียงแหล่งเดียวที่ตรงตามข้อกำหนดโดยอัตโนมัติ

    • วอลเปเปอร์และธีมใหม่ เมื่อเลือก ตรรกะ AOSP จะเลือกสีจากแหล่งที่มาเดียวโดยอัตโนมัติจากวอลเปเปอร์ที่เลือก

  3. AOSP จะขยายสีจากแหล่งที่มาเดียวเป็นชุดสี 5 ชุดที่มีสีโทนต่างๆ 13 สีในแต่ละชุดตามตรรกะของ AOSP จากนั้นจะสร้างแอตทริบิวต์สี 65 รายการ

  4. UI ของแอปใช้แอตทริบิวต์สี 65 สีในลักษณะที่สอดคล้องกันทั่วทั้งระบบนิเวศของแอป Android เราขอแนะนำให้ใช้ชุดสีเดียวกันสำหรับ UI ระบบของอุปกรณ์และแอปสำหรับ OEM โดยเฉพาะ

แพตช์ Android 12

หากต้องการใช้ตรรกะจากต้นทางถึงปลายทางสำหรับการดึงข้อมูลสีวอลเปเปอร์และเพื่อให้อุปกรณ์ป้อนข้อมูล API 65 สีในลักษณะที่สอดคล้องกับระบบนิเวศ ให้รวมแพตช์ต่อไปนี้ไว้ในการใช้งาน Android 12

การระบุสีที่กำหนดเองใน 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 ถึง 1000) รวมทั้งหมด 65 สี ตรรกะที่ระบุไว้ในแพตช์ Android 12 ใช้การขยายสีนี้อย่างถูกต้อง โดยรายละเอียดที่ระบุไว้ด้านล่างจะอธิบายการใช้งาน

เพื่อความสอดคล้องของนักพัฒนาซอฟต์แวร์ ชุดสีโทน 5 สี (เน้นสี1, เน้นสี3, โทนกลาง1, โทนสีกลาง2) และสี 13 สีที่สอดคล้องกันจะต้องอิงตามสีแหล่งเดียวที่มีการเปลี่ยนแปลงโครมาและโทนสี CAM16 ตามที่ระบุด้านล่าง

  • system_accent1

    • โครมา: ใช้ "40" สำหรับสีที่ลงท้ายด้วย 0, 10, 50 และ 100 หรือ "48"
    • โทนสี: เหมือนกับแหล่งที่มา

  • system_accent2

    • Chroma: ใช้ "16"
    • โทนสี: เหมือนกับแหล่งที่มา

  • system_accent3

    • Chroma: ใช้ "32"
    • เฉดสี: หมุน 60 องศาตามเข็มนาฬิกา

  • system_neutral1

    • Chroma: ใช้ "4"
    • โทนสี: เหมือนกับต้นฉบับ

  • system_neutral2

    • 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 มีภาพคลื่นของการสัมผัสที่นุ่มนวลและละเอียดยิ่งขึ้นเพื่อแสดงผลลัพธ์ให้ผู้ใช้ทราบเมื่อแตะลง

ริปเปิลของ Material You

รูปที่ 3 เอฟเฟกต์ระลอกคลื่นของ Android 12 ที่มีภาพเคลื่อนไหวที่นุ่มนวลขึ้น

ตรวจสอบว่าเอฟเฟกต์กระเพื่อมในอุปกรณ์ของคุณคล้ายกับตัวอย่างที่แสดงด้านบน เพื่อให้นักพัฒนาแอปคาดการณ์ได้และมอบประสบการณ์การใช้งานที่ยอดเยี่ยมแก่ผู้ใช้ แม้ว่าคุณจะไม่ต้องทำตามขั้นตอนใดๆ ในการผสานรวมเพื่อรองรับผลกระทบแบบต่อเนื่อง แต่คุณควรทดสอบผลกระทบในอุปกรณ์เพื่อตรวจหาการถดถอยที่ไม่ตั้งใจซึ่งเกิดขึ้นในการใช้งาน

วิดเจ็ต

วิดเจ็ตเป็นองค์ประกอบหลักของอุปกรณ์ Android Android 12 ประกอบด้วย API ใหม่ๆ และความสามารถของ API ที่ OEM ทั้งหมดควรรองรับ

แหล่งข้อมูลเพิ่มเติม

การใช้สี SysUI

(accent1 = A1, accent2 = A2, accent3 = A3, neutral1 = N1, neutral2 = N2)

การใช้สีใน Material You

รูปที่ 4 การใช้สีแบบไดนามิกใน UI ระบบ

การอัปเดตแอตทริบิวต์สีของคลังเนื้อหา

Material จะอัปเดตแอตทริบิวต์ธีมในรุ่นที่จะเปิดตัวโดยสร้างบทบาทสีที่ใช้เพื่อกำหนดสีให้กับมุมมองที่เฉพาะเจาะจง

บทบาทของสี แอตทริบิวต์ธีม Android ธีมสว่าง
สีแบบเปลี่ยนอัตโนมัติ		 ธีมมืด
สีแบบเปลี่ยนอัตโนมัติ
เสียงหลัก colorPrimary เครื่องหมาย_ระบบ1_600 system_accent1_200
ในอุปกรณ์หลัก colorOnPrimary system_accent1_0 system_accent1_800
เสียงรอง colorSecondary system_accent2_600 เครื่องหมาย_ระบบ2_200
บนอุปกรณ์รอง colorOnSecondary system_accent2_0 system_accent2_800
ข้อผิดพลาด colorError ไม่มี (red_600) ไม่มี (red_200)
เมื่อเกิดข้อผิดพลาด colorOnError ไม่มี (สีขาว) ไม่มี (red_900)
ฉากหลัง android:colorBackground system_neutral1_10 system_neutral1_900
ทำงานในเบื้องหลัง colorOnBackground system_neutral1_900 system_neutral1_100
พื้นผิว colorSurface ระบบกลาง1_10 ระบบกลาง1_900
ใน Surface colorOnSurface ระบบกลาง1_900 system_neutral1_100

วัสดุจะอัปเดตแอตทริบิวต์สถานะด้วยเคอร์เซอร์ต่อไปนี้

บทบาทของสี แอตทริบิวต์ธีม Android ธีมสว่าง
สีแบบเปลี่ยนอัตโนมัติ		 ธีมมืด
สีแบบไดนามิก
เนื้อหาสถานะหลัก colorPrimaryStateContent เครื่องหมายเน้นระบบ 1_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
ในเลเยอร์สถานะรอง colorOnรองสถานะLayer system_accent2_900 system_accent2_800
ในเนื้อหาสถานะคอนเทนเนอร์หลัก colorOnPrimaryContainerStateContent เครื่องหมาย_ระบบ1_900 system_accent1_900
ในเลเยอร์สถานะคอนเทนเนอร์หลัก colorOnPrimaryContainerStateLayer system_accent1_900 system_accent1_900
ในเนื้อหาสถานะของคอนเทนเนอร์รอง เนื้อหาสีบนรองคอนเทนเนอร์สถานะ เครื่องหมาย_ระบบ2_900 system_accent2_900
ในเลเยอร์สถานะคอนเทนเนอร์รอง colorOnsecondaryContainerStateLayer system_accent2_900 system_accent2_900
เกี่ยวกับเนื้อหาสถานะคอนเทนเนอร์ลำดับสาม colorOnTertiaryContainerStateContent system_accent3_900 system_accent3_900
ในเลเยอร์สถานะคอนเทนเนอร์ระดับ 3 colorOnTertiaryContainerStateLayer เครื่องหมาย_ระบบ3_900 system_accent3_900
เนื้อหาสถานะแพลตฟอร์ม colorOnSurfaceStateContent system_neutral1_900 system_neutral1_100
เลเยอร์สถานะบนพื้นผิว colorOnSurfaceStateLayer system_neutral1_900 system_neutral1_100
เนื้อหาสถานะตัวแปรใน Surface 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 ใช้งาน