วัสดุที่คุณออกแบบ

ตั้งแต่ Android 12 เป็นต้นไป การออกแบบ Material You จะเน้นไปที่การแสดงออกและความลื่นไหลในระบบปฏิบัติการ Android โดยมีเป้าหมายเพื่อช่วยให้ผู้ใช้สร้างและเป็นเจ้าของประสบการณ์เดียวที่เชื่อมโยงกันซึ่งตอบสนองความต้องการของพวกเขา ในฐานะพันธมิตร Android ขอแนะนำให้รวมวัสดุที่คุณออกแบบไว้ในอุปกรณ์ Android ของคุณในด้านต่อไปนี้:

  • สีแบบไดนามิก
  • การเคลื่อนไหว
  • วิดเจ็ต

สีแบบไดนามิก

สีแบบไดนามิกคือหัวใจสำคัญของการออกแบบ Material You และเป็นส่วนสำคัญของกลยุทธ์หลายปีของ Android เพื่อนำการปรับแต่งที่เรียบง่ายและลึกซึ้งยิ่งขึ้นมาสู่ผู้ใช้ในแบบที่ไม่มีอุปกรณ์อื่นทำ วัสดุที่คุณนำเสนอ:

  • ผู้ใช้และนักพัฒนามีเรื่องราวความเป็นส่วนตัวที่หลากหลายและสม่ำเสมอซึ่งมีอยู่ในอุปกรณ์ Android ทุกรุ่น

  • โอกาสในการ OEM ของ Android ในการพัฒนา UI ของระบบและแอปบุคคลที่หนึ่งต่อไปในลักษณะที่สอดคล้องกับฮาร์ดแวร์และสีแบรนด์ ผู้ผลิต และรูปแบบ

หากต้องการใช้ประโยชน์จากสีแบบไดนามิก ให้ใช้เรื่องราวการแยกสีของ Android 12 Material You เป็นส่วนสำคัญของซอฟต์แวร์ที่เสนอให้กับผู้ใช้ บนอุปกรณ์ ให้ใช้ตรรกะการแยกสีที่อยู่ใน AOSP โดยเฉพาะตรรกะที่ใช้สีต้นฉบับของวอลเปเปอร์หรือธีมเดียวแล้วส่งออกผ่าน API สี 65 สี สำหรับข้อกำหนดสีไดนามิก โปรดดูที่ การใช้สีไดนามิก

การไหลของสีไดนามิกเต็มรูปแบบประกอบด้วยสี่ขั้นตอน ดังภาพด้านล่าง:

วัสดุที่คุณไหลสี

รูปที่ 1 วัสดุ คุณไดนามิกสีไหล

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

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

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

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

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

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

แพตช์ Android 12

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

การระบุสีที่กำหนดเองบน ThemePicker

หากคุณใช้แอป AOSP ThemePicker แอป WallpaperPicker จะแสดงส่วนสีหากตรงตามเงื่อนไข ทั้งสอง ข้อต่อไปนี้:

  • flag_monet บน frameworks/base/packages/SystemUI/res/values/flags.xml เป็น true
  • APK stub ระบบที่มีชื่อแพ็กเกจถูกกำหนดไว้ใน themes_stub_package ในไฟล์ packages/apps/ThemePicker/res/values/override.xml

รูปแบบ Stub APK

เวอร์ชันตัวอย่างของ 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 (และทั้งสองสีควรมีสีเดียวกัน) ค่าสำหรับรายการ 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 โทนสี (สำเนียง 1, สำเนียง 2, สำเนียง 3, เป็นกลาง 1, เป็นกลาง 2) และ 13 สีที่สอดคล้องกันจะต้องขึ้นอยู่กับสีต้นทางเดียวโดยมีการเปลี่ยนแปลงตามลำดับกับค่าโครมาและเฉดสี CAM16 ตามที่เขียนไว้ด้านล่าง:

  • system_accent1

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

  • system_accent2

    • โครมา: ใช้ "16"
    • เว้: เช่นเดียวกับแหล่งที่มา

  • system_accent3

    • โครมา: ใช้ "32"
    • ฮิว: หมุนไปในทางบวก 60 องศา

  • system_neutral1

    • โครมา: ใช้ "4"
    • เว้: เช่นเดียวกับแหล่งที่มา

  • system_neutral2

    • โครมา: ใช้ "8"
    • เว้: เช่นเดียวกับแหล่งที่มา

CTS มีการทดสอบเพื่อตรวจสอบความส่องสว่างและการเรียก API ของสี หากต้องการรัน ให้ใช้ atest SystemPalette

ขั้นตอนที่ 4: ใช้สีไดนามิกในแอปและ UI ของระบบ

หลังจากตั้งค่าสีไดนามิกบนอุปกรณ์แล้ว แอพจะปฏิบัติตามหลักเกณฑ์ด้านวัสดุเพื่อใช้สีต่างๆ หลักเกณฑ์ด้านวัสดุมีกำหนดเผยแพร่บน Material.io ภายในวันที่ 26 ตุลาคม 2021 เพื่อให้แอปของบุคคลที่สามนำไปใช้ สำหรับ System 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 เพื่อรองรับตัวแปรสีที่แตกต่างกัน ขณะนี้เรามีสี่รูปแบบใน codebase ดังนี้:

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 ) เนื่องจากแอปของบุคคลที่สามส่วนใหญ่ใช้ ส่วนประกอบวัสดุสำหรับ Android เพื่อแสดงสีไดนามิก เราจึงใช้ รายการที่อนุญาต แบบฮาร์ดโค้ดเพื่อบอกว่าอุปกรณ์ใดได้รวมฟีเจอร์ ชุดโทนสีไดนามิก ไว้

การเคลื่อนไหว

การเคลื่อนไหวที่ลื่นไหลทำให้อุปกรณ์รู้สึกทันสมัยและพรีเมียม ในการสร้างและรักษาความไว้วางใจและความสุขของนักพัฒนา การเลื่อนและการกระเพื่อมเป็นสองส่วนสำคัญของการเคลื่อนไหวที่ลื่นไหลซึ่งจำเป็นต้องมีลักษณะและความรู้สึกที่สอดคล้องกัน

การใช้ Overscroll ในระบบปฏิบัติการของคุณ

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 ทั้งหมดควรรองรับ

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

การใช้สี SysUI

(สำเนียง1 = A1, สำเนียง2 = A2, สำเนียง3 = A3, เป็นกลาง1 = N1, เป็นกลาง2 = N2)

วัสดุที่คุณใช้สี

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

การอัปเดตแอตทริบิวต์สีของไลบรารีวัสดุ

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

บทบาทสี แอตทริบิวต์ธีม Android ธีมแสง
สีไดนามิก		 ธีมสีเข้ม
สีไดนามิก
หลัก สีหลัก system_accent1_600 system_accent1_200
ในระดับประถมศึกษา colorOnPrimary system_accent1_0 system_accent1_800
รอง สีรอง system_accent2_600 system_accent2_200
ในระดับมัธยมศึกษา colorOnSecondary system_accent2_0 system_accent2_800
ข้อผิดพลาด สีข้อผิดพลาด ไม่มี (red_600) ไม่มี (red_200)
เมื่อเกิดข้อผิดพลาด colorOnError ไม่มี (สีขาว) ไม่มี (red_900)
พื้นหลัง android:colorBackground system_neutral1_10 system_neutral1_900
บนพื้นหลัง สีบนพื้นหลัง system_neutral1_900 system_neutral1_100
พื้นผิว สีพื้นผิว system_neutral1_10 system_neutral1_900
บนพื้นผิว สีบนพื้นผิว system_neutral1_900 system_neutral1_100

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

บทบาทสี แอตทริบิวต์ธีม Android ธีมแสง
สีไดนามิก		 ธีมสีเข้ม
สีไดนามิก
เนื้อหาของรัฐหลัก colorPrimaryStateเนื้อหา system_accent1_700 system_accent1_200
เลเยอร์สถานะหลัก colorPrimaryStateLayer system_accent1_600 system_accent1_300
เนื้อหาของรัฐรอง colorSecondaryStateเนื้อหา system_accent2_700 system_accent2_200
เลเยอร์สถานะทุติยภูมิ colorSecondaryStateLayer system_accent2_600 system_accent2_300
เกี่ยวกับเนื้อหาของรัฐหลัก เนื้อหา colorOnPrimaryState 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
เกี่ยวกับเนื้อหาสถานะคอนเทนเนอร์ระดับอุดมศึกษา colorOnTertiaryContainerStateContent system_accent3_900 system_accent3_900
บนเลเยอร์สถานะคอนเทนเนอร์ระดับอุดมศึกษา colorOnTertiaryContainerStateLayer system_accent3_900 system_accent3_900
บนเนื้อหาสถานะพื้นผิว เนื้อหา colorOnSurfaceState 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
เนื้อหาสถานะข้อผิดพลาด colorErrorStateเนื้อหา สีแดง800 สีแดง200

คำถามที่พบบ่อย

การสกัดสี

เมื่อผู้ใช้เปลี่ยนวอลเปเปอร์ การแยกสีจะดำเนินการโดยอัตโนมัติหรือจำเป็นต้องเรียกใช้จากที่ใดที่หนึ่งหรือไม่

ด้วย แพตช์ Android 12 การแยกสีวอลเปเปอร์จะ เปิดตามค่าเริ่มต้น

ThemeOverlayController.java ทริกเกอร์ตรรกะด้วย ThemeOverlayController#mOnColorsChangedListener และ WallpaperManager#onWallpaperColorsChanged

สำหรับ วอลเปเปอร์สด หรือ วอลเปเปอร์วิดีโอ เราจะรู้ได้ไหมว่า การแยกสี จะนำสีออกจากหน้าจอเมื่อใด ผู้ใช้บางรายอาจต้องการสีจากเฟรมสุดท้ายเนื่องจากจะแสดงเป็นส่วนใหญ่

การแยกสีจะถูกทริกเกอร์เมื่อผู้ใช้ตั้งค่าวอลเปเปอร์หรือหลังจากรอบพลังงานหน้าจอ (เพื่อตอบสนองต่อ WallpaperEngine#notifyColorsChanged ) เหตุการณ์ WallpaperColors สุดท้าย (จากวอลเปเปอร์เคลื่อนไหว) จะถูกนำไปใช้หลังจากที่ผู้ใช้ปิดหน้าจอแล้วเปิดใหม่อีกครั้ง

เครื่องมือเลือกธีม/วอลเปเปอร์

ฉันจะเปิดใช้งานตัวเลือกธีมเพื่อแสดงสีต้นฉบับหลายสีเพื่อให้ผู้ใช้เลือกนอกเหนือจากสีความถี่สูงสุดได้อย่างไร มีวิธีรับสีเหล่านั้นจากตรรกะการแยกหรือไม่?

ใช่. ในตัวเลือกธีมของคุณ คุณสามารถใช้ ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) ได้

มีฟีเจอร์ชื่อ Pixel เป็น ไอคอนธีม มันรวมอยู่ในแพตช์ทั้งสามที่คุณแชร์หรือไม่? OEM สามารถนำสิ่งนั้นไปใช้ได้อย่างไร?

ไม่ ไอคอนตามธีมยังอยู่ในรุ่นเบต้าและไม่มีให้บริการใน Android 12

มีวิธีใช้แอป Google Wallpaper โดยเปิดใช้งานการแยกสีและคุณสมบัติการเลือกหรือไม่?

ใช่. คุณสมบัตินี้สามารถนำไปใช้ในแอป Google Wallpaper เวอร์ชันล่าสุดได้โดยทำตามขั้นตอนการรวมที่อธิบายไว้ก่อนหน้าของหน้านี้

ติดต่อ TAM ของคุณเพื่อขอรายละเอียดเพิ่มเติม

Google สามารถแชร์แอปหรือซอร์สโค้ดเพื่อให้ OEM สามารถใช้การแสดงตัวอย่างสีไดนามิกเวอร์ชันของตนเองในเมนูการตั้งค่า ซึ่งมีลักษณะคล้ายกับส่วนแสดงตัวอย่างที่แสดงในแอปตัวเลือกวอลเปเปอร์ของ Google ได้หรือไม่

คลาสหลักที่แสดงตัวอย่างคือ WallpaperPicker2 และ Launcher3

หน้าจอแสดงตัวอย่างวอลเปเปอร์คือ WallpaperSectionController

จะใช้ การแสดงตัวอย่าง หลังจากเปลี่ยนสีตามที่แสดงในแอป Google Wallpaper ได้อย่างไร

แอพตัวเลือกวอลเปเปอร์คาดว่า ContentProvider จะพร้อมใช้งานจาก Launcher (ตัวเรียกใช้งานที่ใช้ Launcher3 มีอยู่แล้ว) การแสดงตัวอย่างจัดทำโดย GridCustomizationsProvider ใน Launcher ซึ่งควรอ้างอิงใน ข้อมูลเมตา ของกิจกรรมหลักของ Launcher เพื่อให้แอปวอลเปเปอร์และสไตล์สามารถอ่านได้ ทั้งหมดนี้ถูกนำมาใช้ใน Launcher3 ของ AOSP และพร้อมใช้งานสำหรับ OEM