Nhập một Gói giao diện người dùng (UI Package)
Sau khi tạo Gói giao diện người dùng trong Figma, bạn có thể nhập gói này vào dự án Android Studio. Sau khi dự án được xây dựng, Relay sẽ tạo mã Jetpack Compose.
Cách nhập Gói giao diện người dùng vào dự án Android Studio:
Chọn File > New > Import UI Packages… (Tệp > Mới > Nhập Gói giao diện người dùng...)
Nhập URL của tệp Figma chứa Gói giao diện người dùng.
Nhấp vào Next (Tiếp theo).
Chọn Gói giao diện người dùng bạn muốn nhập. Các thành phần được xuất hiện tuỳ thuộc vào việc dán thành phần, trang hay đường liên kết đến tệp. Nếu đã nhập một gói giao diện người dùng, gói này sẽ được gắn nhãn “UPDATED” (“ĐÃ CẬP NHẬT”). Nếu chưa được nhập, gói sẽ có nhãn “NEW” (“MỚI”).
Nhấp vào Finish (Hoàn tất) để nhập các gói và phần phụ thuộc đã chọn vào thư mục
ui-packages
.
Màn hình nhập Gói giao diện người dùng
Màn hình nhập bao gồm những thông tin sau:
![Màn hình nhập Gói giao diện người dùng](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/android-studio-workflow/ui-package-summary.png?authuser=9&hl=vi)
- Hình ảnh xem trước và các biến thể của thành phần.
- Tiêu đề và nội dung mô tả.
- Danh sách tên và thuộc tính của các biến thể.
- Danh sách tên và loại của các tham số nội dung.
- Danh sách tên và loại của các trình xử lý tương tác.
Cửa sổ công cụ Gói giao diện người dùng
![Thanh bên chứa Gói giao diện người dùng](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/android-studio-workflow/ui-package-sidebar.png?authuser=9&hl=vi)
Trình bổ trợ của Android Studio thêm một cửa sổ công cụ có tên UI Package (Gói giao diện người dùng). Tệp này sẽ mở bất cứ khi nào bạn chọn một tệp trong thư mục Gói giao diện người dùng (ví dụ:
app/src/main/ui-packages/mycomponent/
). Cửa sổ công cụ sẽ hiện một bản tóm tắt về
Gói giao diện người dùng và nội dung của gói.
Xây dựng dự án Android
Khi bạn xây dựng một dự án Android Studio chứa Gói giao diện người dùng, trình bổ trợ Gradle chuyển tiếp sẽ tạo mã và biên dịch gói này. Tài sản phông chữ cũng được tải xuống và sao chép vào dự án.
Nếu chỉ muốn xây dựng các Gói giao diện người dùng đã nhập mà không cần tạo toàn bộ dự án, bạn có thể chạy những tác vụ Gradle cụ thể sau:
generateDebugRelayCode
hoặcgenerateReleaseRelayCode
tạo các phiên bản gỡ lỗi hoặc phát hành của mã phát sinh từ Gói giao diện người dùng.generateRelayRuntimeCode
tạo thư viện thời gian chạy mà mã được tạo sử dụng.
Trong quá trình xây dựng:
- Mã được tạo từ Gói giao diện người dùng và lưu trữ trong các thư mục riêng.
- Hình ảnh và phông chữ sao chép vào thư mục tài nguyên được tạo chung.
Vị trí của các thư mục được ghi lại trong bài viết Tìm hiểu gói giao diện người dùng và mã đã tạo.
Cập nhật Gói giao diện người dùng
Khi phiên bản mới của thiết kế đã sẵn sàng, nhà thiết kế nên tạo một phiên bản mới đã đặt tên của tệp Figma.
Trong Android Studio, đảm bảo cửa sổ công cụ Dự án đang ở chế độ xem Android.
Trong thư mục
ui-packages
thuộc mô-đun, nhấp chuột phải vào thư mục (các) Gói giao diện người dùng bạn muốn cập nhật rồi chọn Cập nhật (các) gói giao diện người dùng. Trong ví dụ sau, chúng tôi đã chọn 5 Gói giao diện người dùng để cập nhật.Bạn cũng có thể nhấp chuột phải vào thư mục
ui-packages
để cập nhật mọi Gói giao diện người dùng.
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Tìm hiểu về Gói giao diện người dùng và mã đã tạo
- Hạn chế và biện pháp khắc phục sự cố
- Ánh xạ các thành phần với mã hiện có