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

เพื่อให้นักพัฒนาแอปใช้สีได้อย่างสอดคล้องกัน ชุดสี 5 โทนสี (accent1, accent2, accent3, neutral1, neutral2) และสีที่เกี่ยวข้อง 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 มีการเคลื่อนไหวของการเลื่อนผ่านขอบแบบไดนามิกและตอบสนองได้ดีขึ้นในรูปแบบของการยืดมุมมอง ซึ่งจะแสดงเมื่อผู้ใช้พยายามเลื่อนผ่านขอบของรายการ ตัวอย่างแสดงอยู่ด้านล่าง

การเลื่อนเกินใน Material You

รูปที่ 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 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