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'
}
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.