Trang này được dịch bởi Cloud Translation API.

Xây dựng một ứng dụng hoàn chỉnh bằng Relay và Jetpack Compose

1. Trước khi bắt đầu

Relay là một bộ công cụ cho phép các nhóm thiết kế thành phần giao diện người dùng trong Figma và sử dụng trực tiếp các thành phần đó trong dự án Jetpack Compose. Nhờ đó, bạn không cần phải đối mặt với thông số kỹ thuật thiết kế tẻ nhạt và chu kỳ đảm bảo chất lượng, giúp các nhóm nhanh chóng cung cấp giao diện người dùng Android tuyệt vời.

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách tích hợp Gói giao diện người dùng Relay vào quy trình phát triển Compose. Khóa học này tập trung vào các kỹ thuật tích hợp, chứ không phải quy trình làm việc toàn diện. Để tìm hiểu về quy trình làm việc chung cho Relay, hãy xem Hướng dẫn cơ bản về Relay.

Điều kiện tiên quyết

Kinh nghiệm cơ bản về Compose Hãy hoàn thành lớp học lập trình Kiến thức cơ bản về Jetpack Compose nếu bạn chưa thực hiện.
Có kinh nghiệm về cú pháp Kotlin.

Kiến thức bạn sẽ học được

Cách nhập Gói giao diện người dùng.
Cách tích hợp Gói giao diện người dùng với cấu trúc điều hướng và dữ liệu.
Cách gói Gói giao diện người dùng bằng logic bộ điều khiển.
Cách liên kết kiểu Figma với giao diện Compose.
Cách thay thế Gói giao diện người dùng bằng các thành phần kết hợp hiện có trong mã được tạo.

Sản phẩm bạn sẽ tạo ra

Thiết kế ứng dụng thực tế dựa trên các gói Relay do nhà thiết kế cung cấp. Ứng dụng này có tên là Reflect, một ứng dụng theo dõi hằng ngày giúp thúc đẩy chánh niệm và các thói quen tốt. Trình quản lý theo dõi chứa một bộ sưu tập các trình theo dõi thuộc nhiều loại và giao diện người dùng để thêm và quản lý các trình theo dõi đó. Ứng dụng sẽ có giao diện như hình sau:

Ứng dụng đã hoàn tất

Bạn cần có

Android Studio Electric Eel trở lên
Tài khoản Figma miễn phí và mã truy cập cá nhân

2. Bắt đầu thiết lập

Lấy mã

Để lấy mã cho lớp học lập trình này, hãy làm theo một trong những cách sau:

Sao chép kho lưu trữ relay-codelabs trên GitHub:

$ git clone https://github.com/googlecodelabs/relay-codelabs

Chuyển đến kho lưu trữ relay-codelabs trên GitHub, chọn nhánh mong muốn, sau đó nhấp vào Mã > Tải tệp zip xuống rồi giải nén tệp zip đã tải xuống.

Trong cả hai trường hợp, nhánh main chứa mã khởi đầu và nhánh end chứa mã giải pháp.

Cài đặt trình bổ trợ Relay for Android Studio (Chuyển tiếp cho Android Studio)

Nếu bạn chưa có trình bổ trợ Relay for Android Studio (Chuyển tiếp cho Android Studio), hãy làm theo các bước sau:

Trong Android Studio, hãy nhấp vào Settings > Plugins (Cài đặt > Trình bổ trợ).
Trong hộp văn bản, hãy nhập Relay for Android Studio.
Trên tiện ích xuất hiện trong kết quả tìm kiếm, hãy nhấp vào Cài đặt.

Cài đặt trình bổ trợ Android Studio

Nếu bạn thấy hộp thoại Lưu ý về quyền riêng tư của trình bổ trợ bên thứ ba, hãy nhấp vào Chấp nhận.
Nhấp vào OK > Khởi động lại.
Nếu bạn thấy hộp thoại Xác nhận thoát, hãy nhấp vào Thoát.

Kết nối Android Studio với Figma

Relay truy xuất Gói giao diện người dùng bằng Figma API. Để sử dụng tính năng này, bạn cần có tài khoản Figma miễn phí và mã truy cập cá nhân. Đó là lý do chúng được liệt kê trong phần Những gì bạn cần.

Nếu bạn chưa kết nối Android Studio với Figma, hãy làm theo các bước sau:

Trong tài khoản Figma, hãy nhấp vào biểu tượng hồ sơ ở đầu trang rồi chọn Cài đặt.
Trong phần Personal access tokens (Mã truy cập cá nhân), hãy nhập nội dung mô tả cho mã thông báo vào hộp văn bản, sau đó nhấn Enter (hoặc return trên macOS). Mã thông báo được tạo.
Nhấp vào Copy this token (Sao chép mã thông báo này).

Mã truy cập được tạo trong Figma

Trong Android Studio, hãy chọn Tools > Relay Settings (Công cụ > Cài đặt trình chuyển tiếp). Hộp thoại Cài đặt chuyển tiếp sẽ xuất hiện.
Trong hộp văn bản Figma Access Token (Mã truy cập Figma), hãy dán mã truy cập rồi nhấp vào OK. Môi trường của bạn đã được thiết lập.

3. Xem xét thiết kế của ứng dụng

Đối với ứng dụng Reflect, chúng tôi đã làm việc với một nhà thiết kế để xác định màu sắc, kiểu chữ, bố cục và hành vi của ứng dụng. Chúng tôi đã tạo các thiết kế này theo các quy ước của Material Design 3 để ứng dụng hoạt động liền mạch với các thành phần và giao diện Material.

Xem lại màn hình chính

Màn hình chính hiển thị danh sách trình theo dõi do người dùng xác định. Chế độ này cũng cung cấp các tính năng để thay đổi ngày hoạt động và tạo các trình theo dõi khác.

Màn hình chính

Trong Figma, nhà thiết kế của chúng tôi đã chia màn hình này thành nhiều thành phần, xác định API của các thành phần đó và đóng gói các thành phần đó bằng trình bổ trợ Chuyển tiếp cho Figma. Sau khi đóng gói các thành phần này, bạn có thể nhập các thành phần đó vào dự án Android Studio.

Thành phần màn hình chính

Xem lại màn hình thêm/chỉnh sửa

Màn hình thêm/chỉnh sửa cho phép người dùng thêm hoặc chỉnh sửa trình theo dõi. Biểu mẫu hiển thị sẽ hơi khác nhau tuỳ theo loại trình theo dõi.

Màn hình thêm/chỉnh sửa

Tương tự, màn hình này được chia thành nhiều thành phần đóng gói.

Thêm/chỉnh sửa thành phần màn hình

Xem lại giao diện

Màu sắc và kiểu chữ cho thiết kế này được triển khai dưới dạng kiểu Figma dựa trên tên mã thông báo Material Design 3. Điều này giúp tăng khả năng tương tác với các giao diện Compose và thành phần Material.

Kiểu Figma

4. Nhập gói giao diện người dùng

Lấy đường liên kết đến nguồn Figma

Trước khi có thể nhập Gói giao diện người dùng vào dự án, bạn cần tải nguồn thiết kế lên Figma.

Để lấy đường liên kết đến nguồn Figma, hãy làm theo các bước sau:

Trong Figma, hãy nhấp vào Import file (Nhập tệp) rồi chọn tệp ReflectDesign.fig trong thư mục dự án CompleteAppCodelab.
Nhấp chuột phải vào tệp đó rồi chọn Sao chép đường liên kết. Bạn sẽ cần đến nó trong phần tiếp theo.

Nhập Gói giao diện người dùng vào dự án

Trong Android Studio, hãy mở dự án ./CompleteAppCodelab.
Nhấp vào File > New > Import UI Packages (Tệp > Mới > Nhập 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) sẽ xuất hiện.
Trong hộp văn bản URL nguồn Figma, hãy dán URL mà bạn đã sao chép ở phần trước.

Trong hộp văn bản App theme (Giao diện ứng dụng), hãy nhập com.google.relay.example.reflect.ui.theme.ReflectTheme. Điều này đảm bảo rằng các bản xem trước được tạo sẽ sử dụng giao diện tuỳ chỉnh.
Nhấp vào Tiếp theo. Bạn sẽ thấy bản xem trước Gói giao diện người dùng của tệp.
Nhấp vào Tạo. Các gói sẽ được nhập vào dự án của bạn.
Chuyển đến thẻ Project (Dự án), sau đó nhấp vào mũi tên mở rộng bên cạnh thư mục ui-packages.

Thư mục ui-packages

Nhấp vào mũi tên mở rộng bên cạnh một trong các thư mục gói, sau đó lưu ý rằng thư mục đó chứa tệp nguồn JSON và các phần phụ thuộc thành phần.
Mở tệp nguồn JSON. Mô-đun Chuyển tiếp hiển thị bản xem trước của gói và API của gói.

Tạo và tạo mã

Ở đầu Android Studio, hãy nhấp vào Tạo dự án. Mã được tạo cho mỗi gói sẽ được thêm vào thư mục java/com.google.relay.example.reflect. Các thành phần kết hợp được tạo chứa tất cả thông tin bố cục và kiểu từ thiết kế Figma.
Mở tệp com/google/relay/example/reflect/range/Range.kt.
Lưu ý rằng bản xem trước Compose được tạo cho từng biến thể thành phần. Nếu cần, hãy nhấp vào Split (Phân tách) để bạn thấy ngăn mã và ngăn xem trước cạnh nhau.

5. Tích hợp thành phần

Trong phần này, bạn sẽ tìm hiểu kỹ hơn về mã được tạo cho trình theo dõi Switch.

Thiết kế cho trình theo dõi Switch

Trong Android Studio, mở tệp com/google/relay/example/reflect/switch/Switch.kt.

Switch.kt (đã tạo)

/**
 * This composable was generated from the UI Package 'switch'.
 * Generated code; don't edit directly.
 */
@Composable
fun Switch(
    modifier: Modifier = Modifier,
    isChecked: Boolean = false,
    emoji: String = "",
    title: String = ""
) {
    TopLevel(modifier = modifier) {
        if (isChecked) {
            ActiveOverlay(modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)) {}
        }
        TopLevelSynth(modifier = Modifier.rowWeight(1.0f)) {
            Label(modifier = Modifier.rowWeight(1.0f)) {
                Emoji(emoji = emoji)
                Title(
                    title = title,
                    modifier = Modifier.rowWeight(1.0f)
                )
            }
            Checkmark {
                if (isChecked) {
                    Icon()
                }
            }
        }
    }
}

Lưu ý những điều sau:

Tất cả bố cục và kiểu từ thiết kế Figma đều được tạo.
Các phần tử phụ được chia thành các thành phần kết hợp riêng biệt.
Bản xem trước thành phần kết hợp được tạo cho tất cả các biến thể thiết kế.
Kiểu chữ và màu sắc được mã hoá cứng. Bạn sẽ khắc phục vấn đề này sau.

Chèn trình theo dõi

Trong Android Studio, mở tệp java/com/google/relay/example/reflect/ui/components/TrackerControl.kt. Tệp này cung cấp dữ liệu và logic tương tác cho trình theo dõi thói quen.
Tạo bản dựng và chạy ứng dụng trong trình mô phỏng. Hiện tại, thành phần này xuất dữ liệu thô từ mô hình trình theo dõi.

Nhập gói com.google.relay.example.reflect.switch.Switch vào tệp.
Thay thế Text(text = trackerData.tracker.toString()) bằng một khối when xoay quanh trường trackerData.tracker.type.
Trong phần nội dung của khối when, hãy gọi hàm Switch() Composable khi loại là TrackerType.BOOLEAN.

Mã của bạn sẽ có dạng như sau:

TrackerControl.kt

// TODO: replace with Relay tracker components
when (trackerData.tracker.type) {
    TrackerType.BOOLEAN ->
        Switch(
          title = trackerData.tracker.name,
          emoji = trackerData.tracker.emoji
        )
    else ->
        Text(trackerData.tracker.toString())
}

Tạo lại dự án. Giờ đây, trang chủ hiển thị chính xác trình theo dõi Switch như được thiết kế bằng dữ liệu trực tiếp.

6. Thêm trạng thái và tương tác

Gói giao diện người dùng không có trạng thái. Nội dung hiển thị là kết quả đơn giản của các tham số được truyền vào. Nhưng các ứng dụng thực tế cần có hoạt động tương tác và trạng thái. Bạn có thể truyền trình xử lý tương tác vào các thành phần kết hợp đã tạo như mọi tham số khác, nhưng bạn lưu trữ trạng thái mà các trình xử lý đó thao tác ở đâu? Làm cách nào để tránh truyền cùng một trình xử lý đến mọi thực thể? Làm cách nào để bạn có thể trừu tượng hoá các thành phần của gói thành các thành phần kết hợp có thể sử dụng lại? Đối với những trường hợp này, bạn nên gói các gói đã tạo trong một hàm Composable tuỳ chỉnh.

Gói các gói giao diện người dùng trong hàm `Composable` của trình điều khiển

Việc gói Gói giao diện người dùng trong hàm Composable của trình điều khiển cho phép bạn tuỳ chỉnh bản trình bày hoặc logic nghiệp vụ và nếu cần, hãy quản lý trạng thái cục bộ. Nhà thiết kế vẫn có thể tự do cập nhật Gói giao diện người dùng ban đầu trong Figma mà không cần bạn cập nhật mã trình bao bọc.

Để tạo trình điều khiển cho trình theo dõi Switch, hãy làm theo các bước sau:

Trong Android Studio, mở tệp java/com/google/relay/example/reflect/ui/components/SwitchControl.kt.
Trong hàm SwitchControl() Composable, hãy truyền các tham số sau:

trackerData: đối tượng TrackerData
modifier: đối tượng trang trí
onLongClick: lệnh gọi lại tương tác để cho phép nhấn và giữ trình theo dõi để chỉnh sửa và xoá

Chèn một hàm Switch() và truyền vào một đối tượng sửa đổi combinedClickable để xử lý lượt nhấp và nhấn và giữ.
Truyền các giá trị từ đối tượng TrackerData đến hàm Switch(), bao gồm cả phương thức isToggled().

Hàm SwitchControl() hoàn chỉnh sẽ có dạng như đoạn mã sau:

SwitchControl.kt

package com.google.relay.example.reflect.ui.components

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.google.relay.example.reflect.model.Tracker
import com.google.relay.example.reflect.model.TrackerData
import com.google.relay.example.reflect.model.TrackerType
import com.google.relay.example.reflect.switch.Switch

/*
 * A component for controlling switch-type trackers.
 *
 * SwitchControl is responsible for providing interaction and state management to the stateless
 * composable [Switch] generated by Relay. [onLongClick] provides a way for callers to supplement
 * the control's intrinsic interactions with, for example, a context menu.
 */
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SwitchControl(
    trackerData: TrackerData,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
) {
    Switch(
        modifier
            .clip(shape = RoundedCornerShape(size = 32.dp))
            .combinedClickable(onLongClick = onLongClick) {
                trackerData.toggle()
            },
        emoji = trackerData.tracker.emoji,
        title = trackerData.tracker.name,
        isChecked = trackerData.isToggled(),
    )
}

@Preview
@Composable
fun SwitchControllerPreview() {
    val data = TrackerData(
        Tracker(
            emoji = "🍕",
            name = "Ate Pizza",
            type = TrackerType.BOOLEAN
        )
    )
    SwitchControl(data)
}

Trong tệp TrackerControl.kt, hãy xoá lệnh nhập Switch, sau đó thay thế hàm Switch() bằng lệnh gọi đến hàm SwitchControl().
Thêm các trường hợp cho hằng số bộ đếm TrackerType.RANGE và TrackerType.COUNT.

Khối when hoàn chỉnh sẽ có dạng như đoạn mã sau:

TrackerControl.kt

when (trackerData.tracker.type) {
    TrackerType.BOOLEAN ->
        SwitchControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
    TrackerType.RANGE ->
        RangeControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
    TrackerType.COUNT ->
        ValueControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
}

Tạo lại dự án. Giờ đây, bạn có thể hiển thị và tương tác với trình theo dõi. Màn hình chính đã hoàn tất.

7. Ánh xạ các thành phần hiện có

Relay cho phép nhà phát triển tuỳ chỉnh mã được tạo bằng cách thay thế Gói giao diện người dùng bằng các thành phần kết hợp hiện có. Đây là một cách tuyệt vời để xuất các thành phần có sẵn hoặc thậm chí là các hệ thống thiết kế tuỳ chỉnh trong mã của bạn.

Liên kết trường văn bản

Hình ảnh sau đây là thiết kế cho thành phần Tracker Settings trong hộp thoại Thêm/chỉnh sửa trình theo dõi:

Thiết kế cho thành phần cài đặt của công tắc

Nhà thiết kế của chúng tôi đã sử dụng ReflectTextField trong thiết kế, chúng tôi đã có cách triển khai trong mã được xây dựng dựa trên các trường văn bản Material Design 3. Figma không hỗ trợ các trường văn bản gốc, vì vậy, mã mặc định do Relay tạo chỉ trông giống như thiết kế; đây không phải là một thành phần điều khiển chức năng.

Cách kiểm thử cách triển khai hiện tại cho TrackerSettings:

Trong Android Studio, hãy tạo và chạy ứng dụng trong trình mô phỏng.
Nhấn và giữ một hàng trình theo dõi rồi chọn Chỉnh sửa.
Nhấn vào trường văn bản Title và lưu ý rằng trường này không phản hồi hoạt động tương tác.

Để thay thế phương thức triển khai thực tế cho phần tử này, bạn cần có hai thứ: gói giao diện người dùng trường văn bản và tệp ánh xạ. May mắn là nhà thiết kế của chúng tôi đã đóng gói các thành phần hệ thống thiết kế trong Figma và sử dụng thành phần trường văn bản trong thiết kế của họ cho Tracker Settings. Theo mặc định, gói lồng nhau này được tạo dưới dạng phần phụ thuộc, nhưng bạn có thể sử dụng tính năng ánh xạ thành phần để hoán đổi gói này.

Thành phần Figma cho trường văn bản có trình bổ trợ Relay được phủ lên

Tạo tệp ánh xạ

Trình bổ trợ Relay for Android Studio (Chuyển tiếp cho Android Studio) cung cấp một lối tắt để tạo tệp ánh xạ thành phần.

Để tạo tệp ánh xạ, hãy làm theo các bước sau:

Trong Android Studio, hãy nhấp chuột phải vào gói giao diện người dùng text_field rồi chọn Tạo tệp ánh xạ.

Tạo mục trình đơn theo bối cảnh của tệp ánh xạ

Hộp thoại tệp ánh xạ sẽ xuất hiện. Nhập các tuỳ chọn sau:

Trong Target composable (Thành phần kết hợp mục tiêu), hãy chọn Use existing composable (Sử dụng thành phần kết hợp hiện có) rồi nhập com.google.relay.example.reflect.ui.components.ReflectTextField
Trong Generated file (Tệp đã tạo), hãy đánh dấu vào Generate implementation (Tạo phương thức triển khai) và bỏ đánh dấu Generate Compose Preview (Tạo bản xem trước Compose)

Nhấp vào Tạo tệp ánh xạ. Thao tác này sẽ tạo tệp ánh xạ sau:

text_field.json

{
  "target": "ReflectTextField",
  "package": "com.google.relay.example.reflect.ui.components",
  "generateImplementation": true,
  "generatePreviews": false,
}

Tệp ánh xạ thành phần xác định một mục tiêu và gói lớp Compose, cũng như một tập hợp các đối tượng fieldMapping không bắt buộc. Các mối liên kết trường này cho phép bạn chuyển đổi các tham số gói thành các tham số Compose dự kiến. Trong trường hợp này, các API giống hệt nhau, vì vậy, bạn chỉ cần chỉ định lớp mục tiêu.

Tạo lại dự án.
Trong tệp trackersettings/ TrackerSettings.kt, hãy tìm hàm có khả năng kết hợp TitleFieldStyleFilledStateEnabledTextConfigurationsInputText() đã tạo và lưu ý rằng hàm này bao gồm một thành phần ReflectTextField đã tạo.

TrackerSettings.kt (đã tạo)

@Composable
fun TitleFieldStyleFilledStateEnabledTextConfigurationsInputText(
    onTitleChanged: (String) -> Unit,
    title: String,
    modifier: Modifier = Modifier
) {
    ReflectTextField(
        onChange = onTitleChanged,
        labelText = "Title",
        leadingIcon = "search",
        trailingIcon = "cancel",
        supportingText = "Supporting text",
        inputText = title,
        state = State.Enabled,
        textConfigurations = TextConfigurations.InputText,
        modifier = modifier.fillMaxWidth(1.0f).requiredHeight(56.0.dp)
    )
}

Tạo lại dự án. Giờ đây, bạn có thể tương tác với các trường cài đặt trình theo dõi. Màn hình chỉnh sửa đã hoàn tất.

8. Ánh xạ đến giao diện Compose

Theo mặc định, Relay tạo các giá trị cố định cho màu sắc và kiểu chữ. Điều này đảm bảo tính chính xác của bản dịch, nhưng ngăn các thành phần sử dụng hệ thống giao diện Compose. Điều này rất rõ ràng khi bạn xem ứng dụng ở chế độ tối:

Bản xem trước màn hình chính sử dụng chế độ tối và hiển thị màu không chính xác

Thành phần điều hướng theo ngày gần như không hiển thị và màu sắc không chính xác. Để khắc phục vấn đề này, bạn có thể sử dụng tính năng ánh xạ kiểu trong Relay để liên kết các kiểu Figma với mã thông báo giao diện Compose trong mã được tạo. Điều này giúp tăng tính nhất quán về hình ảnh giữa Relay và các thành phần Material Design 3, đồng thời hỗ trợ chế độ tối.

Tạo tệp ánh xạ kiểu

Trong Android Studio, hãy chuyển đến thư mục src/main/ui-package-resources rồi tạo một thư mục mới có tên style-mappings. Trong thư mục đó, hãy tạo một tệp figma_styles.json chứa mã sau:

figma_styles.json

{
  "figma": {
    "colors": {
      "Reflect Light/background": "md.sys.color.background",
      "Reflect Dark/background": "md.sys.color.background",
      "Reflect Light/on-background": "md.sys.color.on-background",
      "Reflect Dark/on-background": "md.sys.color.on-background",
      "Reflect Light/surface": "md.sys.color.surface",
      "Reflect Dark/surface": "md.sys.color.surface",
      "Reflect Light/on-surface": "md.sys.color.on-surface",
      "Reflect Dark/on-surface": "md.sys.color.on-surface",
      "Reflect Light/surface-variant": "md.sys.color.surface-variant",
      "Reflect Dark/surface-variant": "md.sys.color.surface-variant",
      "Reflect Light/on-surface-variant": "md.sys.color.on-surface-variant",
      "Reflect Dark/on-surface-variant": "md.sys.color.on-surface-variant",
      "Reflect Light/primary": "md.sys.color.primary",
      "Reflect Dark/primary": "md.sys.color.primary",
      "Reflect Light/on-primary": "md.sys.color.on-primary",
      "Reflect Dark/on-primary": "md.sys.color.on-primary",
      "Reflect Light/primary-container": "md.sys.color.primary-container",
      "Reflect Dark/primary-container": "md.sys.color.primary-container",
      "Reflect Light/on-primary-container": "md.sys.color.on-primary-container",
      "Reflect Dark/on-primary-container": "md.sys.color.on-primary-container",
      "Reflect Light/secondary-container": "md.sys.color.secondary-container",
      "Reflect Dark/secondary-container": "md.sys.color.secondary-container",
      "Reflect Light/on-secondary-container": "md.sys.color.on-secondary-container",
      "Reflect Dark/on-secondary-container": "md.sys.color.on-secondary-container",
      "Reflect Light/outline": "md.sys.color.outline",
      "Reflect Dark/outline": "md.sys.color.outline",
      "Reflect Light/error": "md.sys.color.error",
      "Reflect Dark/error": "md.sys.color.error"
    },
    "typography": {
      "symbols": {
        "Reflect/headline/large": "md.sys.typescale.headline-large",
        "Reflect/headline/medium": "md.sys.typescale.headline-medium",
        "Reflect/headline/small": "md.sys.typescale.headline-small",
        "Reflect/title/large": "md.sys.typescale.title-large",
        "Reflect/title/medium": "md.sys.typescale.title-medium",
        "Reflect/title/small": "md.sys.typescale.title-small",
        "Reflect/body/large": "md.sys.typescale.body-large",
        "Reflect/body/medium": "md.sys.typescale.body-medium",
        "Reflect/body/small": "md.sys.typescale.body-small",
        "Reflect/label/large": "md.sys.typescale.label-large",
        "Reflect/label/medium": "md.sys.typescale.label-medium",
        "Reflect/label/small": "md.sys.typescale.label-small"
      },
      "subproperties": {
        "fontFamily": "font",
        "fontWeight": "weight",
        "fontSize": "size",
        "letterSpacing": "tracking",
        "lineHeightPx": "line-height"
      }
    }
  },
  "compose": {
    "colors": {
      "md.sys.color.background": "MaterialTheme.colorScheme.background",
      "md.sys.color.error": "MaterialTheme.colorScheme.error",
      "md.sys.color.error-container": "MaterialTheme.colorScheme.errorContainer",
      "md.sys.color.inverse-on-surface": "MaterialTheme.colorScheme.inverseOnSurface",
      "md.sys.color.inverse-surface": "MaterialTheme.colorScheme.inverseSurface",
      "md.sys.color.on-background": "MaterialTheme.colorScheme.onBackground",
      "md.sys.color.on-error": "MaterialTheme.colorScheme.onError",
      "md.sys.color.on-error-container": "MaterialTheme.colorScheme.onErrorContainer",
      "md.sys.color.on-primary": "MaterialTheme.colorScheme.onPrimary",
      "md.sys.color.on-primary-container": "MaterialTheme.colorScheme.onPrimaryContainer",
      "md.sys.color.on-secondary": "MaterialTheme.colorScheme.onSecondary",
      "md.sys.color.on-secondary-container": "MaterialTheme.colorScheme.onSecondaryContainer",
      "md.sys.color.on-surface": "MaterialTheme.colorScheme.onSurface",
      "md.sys.color.on-surface-variant": "MaterialTheme.colorScheme.onSurfaceVariant",
      "md.sys.color.on-tertiary": "MaterialTheme.colorScheme.onTertiary",
      "md.sys.color.on-tertiary-container": "MaterialTheme.colorScheme.onTertiaryContainer",
      "md.sys.color.outline": "MaterialTheme.colorScheme.outline",
      "md.sys.color.primary": "MaterialTheme.colorScheme.primary",
      "md.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
      "md.sys.color.secondary": "MaterialTheme.colorScheme.secondary",
      "md.sys.color.secondary-container": "MaterialTheme.colorScheme.secondaryContainer",
      "md.sys.color.surface": "MaterialTheme.colorScheme.surface",
      "md.sys.color.surface-variant": "MaterialTheme.colorScheme.surfaceVariant",
      "md.sys.color.tertiary": "MaterialTheme.colorScheme.tertiary",
      "md.sys.color.tertiary-container": "MaterialTheme.colorScheme.tertiaryContainer"
    },
    "typography": {
      "symbols": {
        "md.sys.typescale.display-large": "MaterialTheme.typography.displayLarge",
        "md.sys.typescale.display-medium": "MaterialTheme.typography.displayMedium",
        "md.sys.typescale.display-small": "MaterialTheme.typography.displaySmall",
        "md.sys.typescale.headline-large": "MaterialTheme.typography.headlineLarge",
        "md.sys.typescale.headline-medium": "MaterialTheme.typography.headlineMedium",
        "md.sys.typescale.headline-small": "MaterialTheme.typography.headlineSmall",
        "md.sys.typescale.title-large": "MaterialTheme.typography.titleLarge",
        "md.sys.typescale.title-medium": "MaterialTheme.typography.titleMedium",
        "md.sys.typescale.title-small": "MaterialTheme.typography.titleSmall",
        "md.sys.typescale.body-large": "MaterialTheme.typography.bodyLarge",
        "md.sys.typescale.body-medium": "MaterialTheme.typography.bodyMedium",
        "md.sys.typescale.body-small": "MaterialTheme.typography.bodySmall",
        "md.sys.typescale.label-large": "MaterialTheme.typography.labelLarge",
        "md.sys.typescale.label-medium": "MaterialTheme.typography.labelMedium",
        "md.sys.typescale.label-small": "MaterialTheme.typography.labelSmall"
      },
      "subproperties": {
        "font": "fontFamily",
        "weight": "fontWeight",
        "size": "fontSize",
        "tracking": "letterSpacing",
        "line-height": "lineHeight"
      }
    },
    "options": {
      "packages": {
        "MaterialTheme": "androidx.compose.material3"
      }
    }
  }
}

Tệp ánh xạ giao diện được cấu trúc bằng hai đối tượng cấp cao nhất: figma và compose. Bên trong các đối tượng này, các định nghĩa về màu sắc và loại được liên kết giữa cả hai môi trường thông qua các mã thông báo trung gian. Điều này cho phép nhiều kiểu Figma liên kết với một mục giao diện Compose. Điều này rất hữu ích khi bạn hỗ trợ giao diện sáng và tối.

Xem lại tệp ánh xạ, đặc biệt là cách tệp này ánh xạ lại các thuộc tính kiểu chữ từ Figma thành nội dung mà Compose mong đợi.

Nhập lại Gói giao diện người dùng

Sau khi tạo tệp ánh xạ, bạn cần nhập lại tất cả Gói giao diện người dùng vào dự án vì tất cả giá trị kiểu Figma đã bị loại bỏ khi nhập lần đầu do không cung cấp tệp ánh xạ.

Để nhập lại Gói giao diện người dùng, hãy làm theo các bước sau:

Trong Android Studio, hãy nhấp vào File > New > Import UI Packages (Tệp > Mới > Nhập 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) sẽ xuất hiện.
Trong hộp văn bản URL nguồn Figma, hãy nhập URL của tệp nguồn Figma.
Chọn hộp đánh dấu Dịch kiểu Figma sang giao diện Compose.
Chọn Nhập cấu hình tuỳ chỉnh. Nhấp vào biểu tượng thư mục rồi chọn tệp bạn vừa tạo: src/main/ui-package-resources/style-mappings/figma_styles.json.
Nhấp vào Tiếp theo. Bạn sẽ thấy bản xem trước Gói giao diện người dùng của tệp.
Nhấp vào Tạo. Các gói sẽ được nhập vào dự án của bạn.

Hộp thoại Import UI Packages (Nhập gói giao diện người dùng)

Tạo lại dự án rồi mở tệp switch/Switch.kt để xem mã đã tạo.

Switch.kt (đã tạo)

@Composable
fun ActiveOverlay(
    modifier: Modifier = Modifier,
    content: @Composable RelayContainerScope.() -> Unit
) {
    RelayContainer(
        backgroundColor = MaterialTheme.colorScheme.surfaceVariant,
        isStructured = false,
        radius = 32.0,
        content = content,
        modifier = modifier.fillMaxWidth(1.0f).fillMaxHeight(1.0f)
    )
}

Hãy lưu ý cách tham số backgroundColor được đặt thành trường MaterialTheme.colorScheme.surfaceVariant trong đối tượng giao diện Compose.
Chạy dự án và bật chế độ tối trong trình mô phỏng. Giao diện được áp dụng chính xác và các lỗi hình ảnh đã được khắc phục.

9. Xin chúc mừng

Xin chúc mừng! Bạn đã tìm hiểu cách tích hợp tính năng Chuyển tiếp vào ứng dụng Compose!

Xây dựng một ứng dụng hoàn chỉnh bằng Relay và Jetpack Compose

1. Trước khi bắt đầu

Điều kiện tiên quyết

Kiến thức bạn sẽ học được

Sản phẩm bạn sẽ tạo ra

Bạn cần có

2. Bắt đầu thiết lập

Lấy mã

Cài đặt trình bổ trợ Relay for Android Studio (Chuyển tiếp cho Android Studio)

Kết nối Android Studio với Figma

3. Xem xét thiết kế của ứng dụng

Xem lại màn hình chính

Xem lại màn hình thêm/chỉnh sửa

Xem lại giao diện

4. Nhập gói giao diện người dùng

Lấy đường liên kết đến nguồn Figma

Nhập Gói giao diện người dùng vào dự án

Tạo và tạo mã

5. Tích hợp thành phần

Switch.kt (đã tạo)

Chèn trình theo dõi

TrackerControl.kt

6. Thêm trạng thái và tương tác

Gói các gói giao diện người dùng trong hàm Composable của trình điều khiển

SwitchControl.kt

TrackerControl.kt

7. Ánh xạ các thành phần hiện có

Liên kết trường văn bản

Tạo tệp ánh xạ

text_field.json

TrackerSettings.kt (đã tạo)

8. Ánh xạ đến giao diện Compose

Tạo tệp ánh xạ kiểu

figma_styles.json

Nhập lại Gói giao diện người dùng

Switch.kt (đã tạo)

9. Xin chúc mừng

Tìm hiểu thêm

Gói các gói giao diện người dùng trong hàm `Composable` của trình điều khiển