การกำหนดธีม Material ใน Wear
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
การกำหนดธีม Wear Material คือความสามารถในการปรับแต่ง Material Design ของ Wear อย่างเป็นระบบให้แสดงถึงแบรนด์ของคุณ เมื่อคุณเริ่มเปลี่ยนแง่มุมต่างๆ ของ UI เช่น สีและแบบอักษร เครื่องมือธีม Material ของ Wear จะนำวิสัยทัศน์การออกแบบของคุณไปใช้ตลอดทั้งประสบการณ์ของผู้ใช้ เครื่องมือนี้ช่วยให้คุณสลับระหว่างเวิร์กโฟลว์การออกแบบกับเวิร์กโฟลว์โค้ดได้อย่างง่ายดายโดยระบุค่าที่เฉพาะเจาะจงสำหรับแอตทริบิวต์ที่กำหนดเองได้ทั้งหมด การปรับแต่งค่าแอตทริบิวต์จะสร้างธีมวัสดุ Wear สำหรับผลิตภัณฑ์
ใช้การกำหนดธีม Material ของ Wear
ธีม Material ของ Wear ประกอบด้วยการดำเนินการหลัก 3 อย่าง ได้แก่ การปรับแต่งธีม การใช้ธีมในการออกแบบจำลอง และการใช้ธีมในโค้ด
Wear Material Design มีธีมในตัวที่ใช้ได้เลย
ปรับแต่งธีมในตัวเพื่อให้ Material เหมาะกับผลิตภัณฑ์ของคุณ
การใช้ธีม
ธีมจะส่งผลต่อ UI ทั้งหมด รวมถึงคอมโพเนนต์แต่ละรายการ เช่น ชิป
ตัวอย่างต่อไปนี้แสดงวิธีปรับแต่งค่าเริ่มต้นของคอมโพเนนต์ชิป
ชิปที่บรรจุจะมีค่าสำหรับสี รูปร่าง และตระกูลประเภทที่เฉพาะเจาะจง ปรับค่าเริ่มต้นให้เหมาะกับสไตล์ของแอป
| ก่อน
ชิป Wear Material พื้นฐานที่มีสไตล์เริ่มต้น
|
หลัง
ชิป Wear Material ที่กําหนดเอง
|
สี
ระบบสีรองรับการตั้งค่าสีที่กำหนดเองสำหรับคอมโพเนนต์ ข้อความ ไอคอน และพื้นผิว ตั้งค่าสีธีมสำหรับหมวดหมู่ต่อไปนี้ 13 หมวดหมู่
เสียงหลัก
ตัวแปรหลัก
เสียงรอง
ตัวแปรรอง
ฉากหลัง
พื้นผิว
ข้อผิดพลาด
ในอุปกรณ์หลัก
บนอุปกรณ์รอง
ทำงานอยู่เบื้องหลัง
ใน Surface
ตัวแปรบนพื้นผิว
On Error
การพิมพ์
ระบบแบบอักษรรองรับ 11 หมวดหมู่ที่รวมกันเป็นรูปแบบตัวอักษร
รูปแบบตัวอักษรนี้กำหนดรูปแบบและขนาดตัวอักษรต่างๆ ที่ปรากฏบนหน้าจอ ตั้งแต่ข้อความเนื้อหาไปจนถึงข้อความปุ่ม
แอตทริบิวต์การจัดรูปแบบตัวอักษรจะควบคุมโดยค่าที่ปรับแต่งได้สำหรับตระกูลแบบอักษร แบบอักษร ตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ ขนาด และระยะห่าง
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-27 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-07-27 UTC"],[],[],null,["# Wear Material Theming is the ability to systematically customize Wear Material\nDesign to reflect your brand. When you begin changing aspects of your UI such\nas color and typography, Wear Material Theming tools apply your design vision\nthroughout your user experience. The tools allow easy switching between\ndesign and code workflows by providing specific values for all customizable\nattributes. Customizing the attribute values creates a Wear Material Theme for\nyour product.\n\nUse Wear Material Theming\n-------------------------\n\nWear Material Theming consists of three main actions: customizing your theme,\napplying it across your design mocks, and using it in code.\n\nWear Material Design comes with a built-in theme that can be used as is.\nCustomize the built-in theme to make Material work for your product.\n\n### Theming in practice\n\nTheming affects your entire UI, including individual components such as chips.\nThe following example shows how to customize a chip component's default values.\n\nA contained chip is assigned values for a specific color, shape, and type\nfamily. Adjust the default values to suit your app's style.\n\n|---------------------------------------------------------------|--------------------------------------------|\n| **Before** A baseline Wear Material chip with default styles. | **After** A customized Wear Material chip. |\n\nColor\n-----\n\nThe color system supports setting custom colors for components, text, icons, and\nsurfaces. Set your theme colors for the 13 following categories:\n\n1. Primary\n\n2. Primary Variant\n\n3. Secondary\n\n4. Secondary Variant\n\n5. Background\n\n6. Surface\n\n7. Error\n\n8. On Primary\n\n9. On Secondary\n\n10. On Background\n\n11. On Surface\n\n12. On Surface Variant\n\n13. On Error\n\nTypography\n----------\n\nThe typography system supports 11 categories that together form the type scale.\nThis type scale determines the various type styles and sizes that appear\non-screen, ranging from body copy to button text.\n\nTypography attributes are controlled by values that can be customized for the\ntype family, font, case, size, and tracking."]]
