Tìm hiểu về Gói giao diện người dùng và mã được tạo

Gói giao diện người dùng

Gói giao diện người dùng là một phương pháp mới linh hoạt để trao đổi thông tin giao diện người dùng. Nhà thiết kế sử dụng trình bổ trợ Chuyển tiếp cho Figma (Relay for Figma) để tạo Gói giao diện người dùng từ các thành phần trong Figma. Gói này khai báo rằng thiết kế đã sẵn sàng để các nhà phát triển sử dụng. Sau đó, nhà thiết kế cung cấp cho nhà phát triển URL của tệp thiết kế Figma.

Nhà phát triển sử dụng trình bổ trợ của Android Studio để nhập các gói giao diện người dùng từ tệp thiết kế Figma. Trong dự án Android Studio, Gói giao diện người dùng chứa nội dung khai báo về các thành phần Figma đã nhập cùng với các tài sản liên quan, bao gồm cả tệp phông chữ, hình ảnh và SVG.

Gói giao diện người dùng là cấu phần phần mềm ổn định và có thể được cam kết kiểm soát nguồn. Khi nhà phát triển nhập một gói Figma trong một dự án Android Studio, các tệp sẽ được thêm vào dự án, trong thư mục ui-packages. Dưới đây là một mẫu có nhập 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, rồi chuyển đến src/main/ui-packages. 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).

Một dự án có Gói giao diện người dùng đã nhập chứa các tệp sau:

• [component_name].json – Tệp JSON mô tả thành phần (ví dụ: story_card.json).
• config.json – Lưu trữ siêu dữ liệu cho Gói giao diện người dùng cụ thể.
• fonts/ – Thư mục lưu trữ các tài sản phông chữ mà thành phần sử dụng (nếu có).
• *.png – Tài sản hình ảnh (ví dụ: menu.png) được sử dụng trong thành phần (nếu có).
• [component_name]_preview.png – Hình ảnh xem trước của thành phần (ví dụ: story_card_preview.png).
• *.svg – Thành phần đồ hoạ vectơ (ví dụ: hình tam giác) dùng trong thành phần (nếu có).
• FONTS.txt – Danh sách các phông chữ đã dùng (nếu có).
• DEPS.txt – Tên của bất cứ thành phần con nào.
• VERSION.txt – Phiên bản của Relay dùng để tạo và nhập Gói giao diện người dùng.

Các dữ liệu này được lưu trữ trong src/main/ui-packages/[package_name].

Xoá gói giao diện người dùng

Để xoá một gói giao diện người dùng khỏi dự án, bạn có thể xoá thư mục đó trong ui-packages/. Việc tạo lại bản dựng dự án sau khi xoá thư mục cũng sẽ xoá mã đã tạo của dự án đó.

Cảnh báo: Trong Android Studio, việc hoàn tác thư mục Gói giao diện người dùng đã xoá có thể không thành công

Nếu bạn hoàn tác thao tác xoá thư mục Gói giao diện người dùng, thì bất cứ tệp nào trong thư mục đó chưa được mở trước khi xoá có thể không được khôi phục đúng cách.

Nếu gặp sự cố này, hãy nhập lại phiên bản tệp Figma mà bạn cần bằng cách nhấn vào Tệp > Mới > Nhập gói giao diện người dùng… (File > New > Import UI Packages…) Bạn cũng có thể nhấp vào mọi tệp trong thư mục Gói giao diện người dùng khi nhập để đảm bảo các tệp đó sẽ được khôi phục đúng cách.

Cấu trúc của thư mục Mã đã tạo

Khi tạo bản dựng dự án, các Gói giao diện người dùng này được chuyển thành mã được tạo chứa các hàm @Composable mà nhà phát triển có thể gọi. Các hàm này được lưu trữ trong build/generated/. Ở chế độ xem Android, dữ liệu này sẽ hiển thị dưới dạng java (generated) và res trong thư mục mô-đun (trong trường hợp này là thư mục app).

Lưu ý: Tuỳ thuộc vào phiên bản Trình bổ trợ Android cho Gradle, trong Android, mã đã tạo có thể nằm trong thư mục java thay vì thư mục java (generated).

Các ảnh chụp màn hình sau đây sẽ hướng dẫn từng bước về các tệp trong thư mục này:

• Các tài nguyên, chẳng hạn như phông chữ và hình ảnh, sẽ được sao chép vào build/generated/res/relay/.

  

• Mỗi gói giao diện người dùng có mã được tạo trong build/generated/source/relay/. Mỗi thư mục mã được tạo của Gói giao diện người dùng có một tệp duy nhất tương ứng với thành phần đã được nhập. Nội dung này cũng chứa một tệp có đuôi là Fonts.kt, chứa thông tin tham chiếu đến tài sản phông chữ mà thành phần sử dụng.

  

• Ngoài ra, còn có một thư viện thời gian chạy com.google.relay.compose cung cấp chức năng mà mã đã tạo sử dụng.

  

Lưu ý: Nếu bạn không thấy mã được tạo trong khung hiển thị Dự án hoặc Android, hãy 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).

Cấu trúc mã đã tạo

Thành phần kết hợp

Các thành phần trong Figma bao gồm các lớp. Ví dụ: thiết kế này chứa một lớp khung Hello Card chứa hai lớp con, Hình ảnh (một lớp hình ảnh) và Tiêu đề (một lớp văn bản):

Khi thiết kế được dịch thành mã, chúng ta tạo các hàm có khả năng kết hợp riêng biệt cho từng lớp, trong đó tên của lớp Figma là tên của hàm có khả năng kết hợp (được sửa đổi để phù hợp với cú pháp Kotlin). Các lớp được dịch như sau:

1. Lớp Hello Card:

   @Composable
   fun HelloCard(
     modifier: Modifier = Modifier,
     title: String
   ) {
     TopLevel(modifier = modifier) {
         Image()
         Title(title = title)
     }
   ]
   

2. Lớp Image:

   @Composable
   fun Image(modifier: Modifier = Modifier) {
     Image(...)
   }
   

3. Lớp Title:

   @Composable
   fun Title(
     title: String,
     modifier: Modifier = Modifier
   ) {
     Text(...)
   }
   

Các biến thể và tham số Figma đã dịch

Nếu một thành phần Figma có nhiều biến thể, thì mã được tạo sẽ có một enum cho mỗi thuộc tính biến thể. Các giá trị trong mỗi enum biến thể tương ứng với giá trị của thuộc tính biến thể đó. Thành phần kết hợp đưa vào một tham số cho từng enum biến thể.

// Design to select for NewsCard
enum class View {
    HeroItem,
    ArticleItem,
    AudioItem
}

/**
 *   This composable was generated from the UI Package 'news_card'.
 *   Generated code; do not edit directly
 */
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem,
    onNewsCardTapped: () -> Unit = {},
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onMenuTapped: () -> Unit = {}
) {
       when (view) {
           View.HeroItem -> TopLevelViewHeroItem(...) {
               ContentViewHeroItem { ... }
           }
           View.ArticleItem -> TopLevelViewArticleItem(...) {
               ContentViewArticleItem { ... }
           }
           View.AudioItem -> TopLevelViewAudioItem(...) {
               ContentViewAudioItem { ... }
           }
       }
   }
}

Mỗi tham số nội dung và trình xử lý tương tác của một thành phần Figma đều được chuyển đổi thành tham số của thành phần kết hợp. Thành phần kết hợp NewsCard dưới đây có 4 tham số nội dung (1 hình ảnh và 3 chuỗi) và 2 trình xử lý tương tác (2 tham số cuối cùng).

/**
 *   This composable was generated from the UI Package 'news_card'.
 *   Generated code; do not edit directly
 */
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem,
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onNewsCardTapped: () -> Unit = {},
    onMenuTapped: () -> Unit = {}
) {...}