Dùng Material để tạo giao diện Wear
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Việc dùng Material để tạo giao diện Wear là khả năng tuỳ chỉnh một cách có hệ thống các thiết kế Material Design cho Wear để phản ánh thương hiệu của bạn. Khi bạn bắt đầu thay đổi các khía cạnh của giao diện người dùng như màu sắc và kiểu chữ, các công cụ Sắp xếp theo chủ đề Material cho Wear sẽ áp dụng tầm nhìn thiết kế của bạn trong suốt trải nghiệm người dùng. Các công cụ này cho phép dễ dàng chuyển đổi giữa quy trình thiết kế và quy trình mã bằng cách cung cấp các giá trị cụ thể cho tất cả các thuộc tính có thể tuỳ chỉnh. Việc tuỳ chỉnh các giá trị thuộc tính sẽ tạo Giao diện Wear bằng Material cho sản phẩm của bạn.
Sử dụng công cụ Material Theming cho Wear
Công cụ Material Theming cho Wear bao gồm ba hành động chính: tuỳ chỉnh giao diện, áp dụng giao diện đó trên các mô hình thiết kế và sử dụng giao diện này trong mã.
Material Design cho Wear tích hợp sẵn một giao diện có thể sử dụng được. Tuỳ chỉnh giao diện tích hợp sẵn để áp dụng Material cho sản phẩm của bạn.
Giao diện trong thực tế
Giao diện ảnh hưởng đến toàn bộ giao diện người dùng, bao gồm cả các thành phần riêng lẻ như khối.
Ví dụ sau đây cho thấy cách tuỳ chỉnh các giá trị mặc định của thành phần khối.
Một khối chứa được gán các giá trị cho một nhóm màu, hình dạng và kiểu cụ thể. Điều chỉnh các giá trị mặc định cho phù hợp với kiểu của ứng dụng.
| Trước
Một khối Wear Material cơ sở với các kiểu mặc định.
|
Sau
Một khối Wear Material tuỳ chỉnh.
|
Màu
Hệ thống màu hỗ trợ việc đặt màu tuỳ chỉnh cho các thành phần, văn bản, biểu tượng và giao diện. Đặt màu giao diện cho 13 danh mục sau:
Primary (Chính)
Primary Variant (Biến thể chính)
Secondary (Phụ)
Secondary Variant (Biến thể phụ)
Background
Surface
Error
On Primary
On Secondary
On Background
On Surface
On Surface Variant
On Error (Trên Lỗi)
Kiểu chữ
Hệ thống kiểu chữ hỗ trợ 11 danh mục tạo thành một tỷ lệ kiểu chữ.
Tỷ lệ kiểu chữ này xác định các kiểu chữ và kích cỡ xuất hiện trên màn hình, từ văn bản nội dung cho đến văn bản nút.
Các thuộc tính kiểu chữ được kiểm soát bằng các giá trị có thể được tuỳ chỉnh cho nhóm kiểu, phông chữ, chữ hoa chữ thường, kích cỡ và tracking (điều chỉnh khoảng cách các chữ cái trong một từ).
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-07-27 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 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."]]
