Khi đưa Compose vào một ứng dụng hiện có, bạn cần di chuyển giao diện XML Material để dùng MaterialTheme cho các thành phần Compose. Như vậy, giao diện của ứng dụng sẽ có 2 nguồn đáng tin cậy: giao diện dựa trên Khung hiển thị và giao diện Compose. Mọi thay đổi đối với kiểu sẽ cần được thực hiện ở nhiều nơi. Sau khi ứng dụng của bạn được di chuyển hoàn toàn sang Compose, hãy xoá tính năng tạo giao diện bằng XML.
Bạn có thể sử dụng công cụ Material Theme Builder để di chuyển màu.
Khi bạn bắt đầu di chuyển từ XML sang Compose, hãy di chuyển việc tạo giao diện sang tính năng tạo giao diện Material 3 Compose.
Bảng chú giải thuật ngữ
| Thuật ngữ | Định nghĩa |
|---|---|
MaterialTheme |
Hàm có khả năng kết hợp cung cấp chủ đề (màu sắc, kiểu chữ, hình dạng) cho các thành phần giao diện người dùng Compose. |
Shape |
Một đối tượng Compose dùng để xác định các hình dạng thành phần tuỳ chỉnh cho một MaterialTheme. |
Typography |
Một đối tượng Compose dùng để xác định kiểu văn bản tuỳ chỉnh (bộ phông chữ, kích thước, độ đậm) cho một MaterialTheme. |
Color |
Một đối tượng Compose dùng để xác định bảng phối màu tuỳ chỉnh cho MaterialTheme. |
| Giao diện XML | Hệ thống tạo giao diện Android được xác định trong các tệp XML, do hệ thống View sử dụng. |
Các điểm hạn chế
Trước khi di chuyển, hãy lưu ý những hạn chế sau:
- Hướng dẫn này chỉ tập trung vào việc di chuyển sang Material 3. Để di chuyển từ các hệ thống thiết kế thay thế, hãy xem Material 2 hoặc Hệ thống thiết kế tuỳ chỉnh trong Compose.
- Mục tiêu cuối cùng là di chuyển hoàn toàn sang Compose, cho phép xoá tính năng tạo giao diện bằng XML. Hướng dẫn này giải thích cách di chuyển, nhưng không giải thích cách xoá hoàn toàn việc tạo giao diện bằng XML.
Bước 1: Đánh giá hệ thống thiết kế
Xác định hệ thống thiết kế được dùng trong dự án Khung hiển thị XML. Phân tích lộ trình di chuyển và các bước cần thiết để di chuyển hệ thống thiết kế hiện có sang Material 3 trong Compose.
Bước 2: Xác định các tệp nguồn của giao diện
Xác định và xác định vị trí của tất cả các tài nguyên và tệp XML cần thiết cho việc tạo giao diện: bảng phối màu sáng và tối, giao diện, hình dạng, kích thước, kiểu chữ, kiểu và các tệp có liên quan khác.
Bạn có thể sử dụng lại các tài nguyên như chuỗi mà không cần di chuyển.
Bước 3: Di chuyển màu
Di chuyển bảng phối màu tối và sáng từ XML sang các bảng phối màu tương đương trong Material 3 Compose.
Bước 4: Di chuyển hình dạng và kiểu chữ tuỳ chỉnh
Nếu ứng dụng của bạn dùng các hình dạng tuỳ chỉnh:
- Trong mã Compose, hãy xác định một đối tượng
Shapeđể sao chép các định nghĩa về hình dạng XML. Cung cấp đối tượng
Shapenày choMaterialThemecủa bạn.Để biết thêm thông tin, hãy xem phần hình dạng.
- Trong mã Compose, hãy xác định một đối tượng
Nếu ứng dụng của bạn sử dụng kiểu chữ tuỳ chỉnh:
- Trong mã Compose, hãy xác định một đối tượng
Typographytrong mã Compose để sao chép các kiểu văn bản và định nghĩa phông chữ XML. Cung cấp đối tượng
Typographynày choMaterialThemecủa bạn.Để biết thêm thông tin, hãy xem phần kiểu chữ.
- Trong mã Compose, hãy xác định một đối tượng
Bước 5: Xác thực quá trình di chuyển giao diện
Luôn sử dụng các giá trị giao diện hiện có từ giao diện XML ban đầu làm nguồn dữ liệu chính cho Giao diện Material mới trong Compose. Không bao giờ tạo ra các giá trị giao diện mới trong quá trình di chuyển để duy trì tính nhất quán của thương hiệu và tránh các lỗi về hình ảnh.
Xác minh rằng tất cả các giá trị giao diện Compose mới đều khớp với các giá trị XML hiện có. Đừng mã hoá cứng bất kỳ giá trị nào đã di chuyển.