Thêm Jetpack Compose vào ứng dụng

Nếu muốn sử dụng Jetpack Compose trong một dự án hiện tại, bạn cần định cấu hình dự án của mình với các chế độ cài đặt và phần phụ thuộc bắt buộc.

Thiết lập môi trường phát triển

Cài đặt phiên bản Android Studio phù hợp

Để có trải nghiệm tốt nhất khi sử dụng Jetpack Compose, bạn nên tải Android Studio xuống và định cấu hình trình bổ trợ Android cho Gradle tương ứng với phiên bản Android Studio:

buildscript {
    ...
    dependencies {
        classpath "com.android.tools.build:gradle:7.4.1"
        ...
    }
}

Định cấu hình Kotlin

Bạn hãy nhớ sử dụng Kotlin 1.8.10 trong dự án:

plugins {
    id 'kotlin-android'
}

Định cấu hình Gradle

Bạn cần đặt cấp độ API tối thiểu là 21 cho ứng dụng của mình rồi bật Jetpack Compose trong tệp build.gradle của ứng dụng và thêm các phần phụ thuộc của thư viện, như trong hướng dẫn Bắt đầu nhanh.

Sử dụng lại chủ đề View (Khung hiển thị) của bạn trong Compose

Nếu vừa thêm ứng dụng Compose vào dự án, thì bạn nên để Compose kế thừa các giao diện có sẵn trong hệ thống Khung hiển thị thay vì viết lại từ đầu chủ đề Material trong Compose.

Nếu đang dùng thư viện MDC (Thành phần Material Design) trong ứng dụng Android, thì bạn có thể tận dụng thư viện MDC Compose Theme Adapter (Trình chuyển đổi giao diện Compose MDC) để dễ dàng sử dụng lại chủ đề màu, kiểu chữ và hình dạng từ các chủ đề hiện có dựa trên Khung hiển thị trong các thành phần kết hợp. Bạn có thể thực hiện điều này bằng cách sử dụng API MdcTheme.

Nếu bạn đang dùng giao diện XML của AppCompat, hãy dùng Trình chuyển đổi giao diện AppCompat Compose có chứa API AppCompatTheme.

Bao gồm phần phụ thuộc bạn cần trong tệp build.gradle của ứng dụng như nội dung minh hoạ dưới đây:

dependencies {
    // When using a MDC theme
    implementation "com.google.android.material:compose-theme-adapter:1.1.16"

    // When using a AppCompat theme
    implementation "com.google.accompanist:accompanist-appcompat-theme:0.28.0"
}

Bắt đầu chuyển sang công cụ Compose

Xem bài viết Chiến lược di chuyển để biết hướng dẫn về cách bắt đầu di chuyển sang Compose. Tại đó, bạn sẽ được tìm hiểu cách để từng bước đưa Compose vào cơ sở mã một cách an toàn.

Để biết thêm thông tin về ComposeView và các API có khả năng tương tác khác, hãy xem bài viết Hướng dẫn về API có khả năng tương tác. Để tìm hiểu thêm về các API tài nguyên khác trong Compose, hãy xem bài viết Hướng dẫn sử dụng tài nguyên trong Compose.

Kiểm thử giao diện người dùng hỗn hợp cho Compose/Khung hiển thị

Sau khi di chuyển các phần của ứng dụng sang Compose, việc kiểm thử là rất quan trọng để đảm bảo không có bất cứ vấn đề gì.

Khi một hoạt động hoặc mảnh sử dụng Compose thay vì ActivityScenarioRule, bạn cần sử dụng createAndroidComposeRule tích hợp ActivityScenarioRule với ComposeTestRule để kiểm thử cùng lúc mã View và Compose.

class MyActivityTest {
    @Rule
    @JvmField
    val composeTestRule = createAndroidComposeRule<MyActivity>()

    @Test
    fun testGreeting() {
        val greeting = InstrumentationRegistry.getInstrumentation()
            .targetContext.resources.getString(R.string.greeting)

        composeTestRule.onNodeWithText(greeting).assertIsDisplayed()
    }
}

Hãy xem bài viết Hướng dẫn kiểm thử bố cục Compose để tìm hiểu thêm về việc kiểm thử và khả năng tương tác với Espresso.

Nếu sử dụng Navigation Component trong ứng dụng, hãy kiểm tra phần khả năng tương tác trong hướng dẫn điều hướng với Compose.

Các bước tiếp theo

Bạn có thể tìm thêm thông tin về Compose trong chỉ mục tài liệu. Có nhiều cách sử dụng Compose trong ứng dụng. Hãy tìm hiểu thêm về các cách này trong phần hướng dẫn sử dụng Compose trong ứng dụng, trong đó liên kết đến các hướng dẫn khác, chẳng hạn như Compose trong cấu trúc hiện tạiCompose trong giao diện người dùng hiện tại.