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 xuống Android Studio 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.2.1"
        ...
    }
}

Định cấu hình Kotlin

Hãy đảm bảo bạn đang sử dụng Kotlin 1.7.0 trong dự án:

plugins {
    id 'kotlin-android'
}

Định cấu hình Gradle

Bạn cần đặt API tối thiểu của ứng dụng thành cấp 21 trở lên và bật Jetpack Compose trong tệp build.gradle của ứng dụng như nội dung minh họa dưới đây. Ngoài ra, hãy đặt phiên bản cho trình bổ trợ biên dịch Kotlin.

android {
    defaultConfig {
        ...
        minSdkVersion 21
    }

    buildFeatures {
        // Enables Jetpack Compose for this module
        compose true
    }
    ...

    // Set both the Java and Kotlin compilers to target Java 8.
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = "1.8"
    }

    composeOptions {
        kotlinCompilerExtensionVersion '1.2.0'
    }
}

Thêm các phần phụ thuộc vào bộ công cụ Jetpack Compose

Đưa các phần phụ thuộc của bộ công cụ Jetpack Compose vào tệp build.gradle của ứng dụng như nội dung minh họa bên dưới:

dependencies {
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.5.1'
    // Compose Material Design
    implementation 'androidx.compose.material:material:1.2.0'
    // Animations
    implementation 'androidx.compose.animation:animation:1.2.0'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.2.0'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.2.0'
}

Nhắc nhở: Hãy chú ý đến các phần phụ thuộc chuyển đổi mà Compose yêu cầu vì điều này có thể chạm một số phần phụ thuộc dùng trong ứng dụng. Ví dụ: để sử dụng phần phụ thuộc activity-compose, bạn cần cung cấp androidx.activity ở phiên bản 1.3.0.

Sử dụng lại chủ đề View của bạn trong Compose

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

Nếu bạn đang sử dụng thư viện MDC trong ứng dụng Android thì thư viện Trình chuyển đổi giao diện Compose MDC sẽ cho phép bạn dễ dàng sử dụng lại màu sắc, kiểu chữ và hình dạng sắp xếp theo chủ đề từ các chủ đề hiện có dựa trên View trong các thành phần có thể 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ạt dưới đây:

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

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

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

Giả sử chúng ta muốn di chuyển văn bản lời chào người dùng sang Jetpack Compose trong ứng dụng. Chúng ta có thể sử dụng nội dung sau trong bố cục XML:

<...>
    <!-- Other content -->

    <TextView
        android:id="@+id/greeting"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/margin_small"
        android:layout_marginEnd="@dimen/margin_small"
        android:gravity="center_horizontal"
        android:text="@string/greeting"
        android:textAppearance="?attr/textAppearanceHeadline5"
        ... />
</...>

Để di chuyển nội dung này sang Compose, chúng ta có thể thay thế TextView bằng một ComposeView và vẫn giữ nguyên các thông số bố cục và id: Tất cả các thuộc tính XML khác sẽ được di chuyển sang Compose:

<...>
    <!-- Other content -->

    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/greeting"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</...>

Sau đó, trong Activity hoặc Fragment sử dụng bố cục XML đó, chúng ta có được ComposeView từ đó và gọi phương thức setContent để thêm nội dung Compose vào đó:

class MyActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // ...

        val greeting = findViewById<ComposeView>(R.id.greeting)
        greeting.setContent {
            MdcTheme { // or AppCompatTheme
                Greeting()
            }
        }
    }
}

@Composable
private fun Greeting() {
    Text(
        text = stringResource(R.string.greeting),
        style = MaterialTheme.typography.h5,
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = dimensionResource(R.dimen.margin_small))
            .wrapContentWidth(Alignment.CenterHorizontally)
    )
}

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

Kiểm thử giao diện người dùng kết hợp

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 thử nghiệm và khả năng tương tác với Espresso.

Di chuyển

Nếu sử dụng Navigation Component trong ứng dụng, bạn 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ại và Compose trong giao diện người dùng hiện tại.