Quy trình công việc của Android Studio

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:

1. Chọn File > New > Import UI Packages… (Tệp > Mới > Nhập Gói giao diện người dùng...)

   

2. Nhập URL của tệp Figma chứa Gói giao diện người dùng.

   

3. Nhấp vào Next (Tiếp theo).

4. 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”).

   

   Lưu ý: Gói giao diện người dùng lồng trong một Gói giao diện người dùng khác sẽ được nhập tự động nếu đã chọn gói giao diện mẹ.

5. 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:

• 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

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ặc generateReleaseRelayCode 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:

1. 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.
2. 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ảnh báo: Thông thường, mã sẽ tạo lại trong bản dựng nếu Gói giao diện người dùng được cập nhật kể từ bản dựng gần đây nhất. Tuy nhiên, việc cập nhật một phần phụ thuộc nằm bên ngoài thư mục ui-packages không buộc phải tạo lại mã khi bạn xây dựng dự án. Điều này có thể xảy ra khi tệp đó là một tệp ánh xạ giao diện hoặc một tệp thành phần tham chiếu.

Giải pháp: Để buộc cập nhật mã đã tạo, hãy dọn dẹp dự án (chuyển đến Build > dọn sạch Dự án) hoặc xoá thư mục mã đã tạo liên kết với Gói giao diện người dùng cần cập nhật. Sau đó, hãy xây dựng lại ứng dụng.

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.

1. 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.

   

2. 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.

   

Lưu ý: Nếu bạn không thấy thư mục ui-packages trong chế độ xem Android, hãy chuyển đến chế độ xem Dự án, sau đó chuyển đến src/main/ui-packages trong mô-đun. Bạn cũng có thể nhấp chuột phải vào thư mục cấp cao nhất rồi chọn "Reload from Disk" (Tải lại từ ổ đĩa).