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

    Tuỳ chọn Import UI Packages… (Nhập Gói giao diện người dùng...) trong trình đơn File (Tệp)

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

    Hộp thoại Import UI Packages (Nhập 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”).

    Xem trước thành phần

  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:

Màn hình nhập Gói giao diện người dùng
  • 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

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

    Cập nhật 5 tuỳ chọn Gói giao diện người dùng trong trình đơn theo bối cảnh

  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.

    Cập nhật tuỳ chọn All UI Packages (Mọi Gói giao diện người dùng) trong trình đơn theo bối cảnh