Để có trải nghiệm tốt nhất khi phát triển bằng Compose, hãy tải Android Studio xuống và cài đặt. Android Studio có nhiều tính năng trình chỉnh sửa thông minh, chẳng hạn như mẫu dự án mới và tính năng xem trước ngay giao diện người dùng cũng như ảnh động của Compose.
Hãy làm theo hướng dẫn dưới đây để tạo dự án về ứng dụng Compose mới, thiết lập Compose cho một dự án ứng dụng hiện có, hoặc nhập một ứng dụng mẫu được viết bằng Compose.
Tạo ứng dụng mới có hỗ trợ Compose
Nếu bạn muốn bắt đầu một dự án mới có hỗ trợ Compose theo mặc định, thì Android Studio sẽ cung cấp các mẫu dự án mới để giúp bạn bắt đầu. Để tạo một dự án mới có thiết lập Compose chính xác, hãy tiến hành như sau:
- Nếu bạn đang ở cửa sổ Chào mừng bạn đến với Android Studio (Welcome to Android Studio), vui lòng nhấp vào nút Bắt đầu dự án Android Studio mới (Start a new Android Studio project). Nếu bạn đã mở một dự án Android Studio, hãy chọn Tệp > Mới > Dự án mới (File > New > New Project) trong thanh trình đơn.
- Trong cửa sổ Select a Project Template (Chọn mẫu dự án), hãy chọn Empty (Trống) Activity (Hoạt động) rồi nhấp vào Next (Tiếp theo).
- Trong cửa sổ Configure your project (Định cấu hình dự án), hãy làm như sau:
- Đặt Name, Package name (Tên, Tên gói) và Save location (Vị trí lưu) như bình thường. Lưu ý rằng trong trình đơn thả xuống Language (Ngôn ngữ), Kotlin là tuỳ chọn duy nhất được cung cấp vì Jetpack Compose chỉ hoạt động với các lớp được viết bằng Kotlin.
- Trong trình đơn thả xuống Minimum API level (Cấp độ API tối thiểu), hãy chọn API cấp 21 trở lên.
- Nhấp vào Finish (Hoàn tất).
Giờ đây, bạn đã sẵn sàng bắt đầu phát triển một ứng dụng bằng Jetpack Compose. Để giúp bạn bắt đầu và tìm hiểu những việc bạn có thể làm với bộ công cụ này, hãy xem bài viết Hướng dẫn về Jetpack Compose.
Thiết lập Compose cho ứng dụng hiện có
Trước tiên, hãy định cấu hình trình biên dịch Compose bằng thuộc tính Compose Trình bổ trợ Gradle của trình biên dịch.
Sau đó, hãy thêm định nghĩa sau vào tệp build.gradle
của ứng dụng:
Groovy
android {
buildFeatures {
compose true
}
}
Kotlin
android {
buildFeatures {
compose = true
}
}
Đặt cờ compose
thành true
bên trong BuildFeatures
của Android
khối này sẽ bật chức năng Compose trong Android Studio.
Cuối cùng, hãy thêm Bảng kê khai thành phần (BOM) của Compose và một nhóm nhỏ các phần phụ thuộc của thư viện Compose bạn cần cho các phần phụ thuộc từ khối sau:
Groovy
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2024.06.00')
implementation composeBom
androidTestImplementation composeBom
// Choose one of the following:
// Material Design 3
implementation 'androidx.compose.material3:material3'
// or Material Design 2
implementation 'androidx.compose.material:material'
// or skip Material Design and build directly on top of foundational components
implementation 'androidx.compose.foundation:foundation'
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation 'androidx.compose.ui:ui'
// Android Studio Preview support
implementation 'androidx.compose.ui:ui-tooling-preview'
debugImplementation 'androidx.compose.ui:ui-tooling'
// UI Tests
androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
debugImplementation 'androidx.compose.ui:ui-test-manifest'
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation 'androidx.compose.material:material-icons-core'
// Optional - Add full set of material icons
implementation 'androidx.compose.material:material-icons-extended'
// Optional - Add window size utils
implementation 'androidx.compose.material3:material3-window-size-class'
// Optional - Integration with activities
implementation 'androidx.activity:activity-compose:1.9.0'
// Optional - Integration with ViewModels
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'
// Optional - Integration with LiveData
implementation 'androidx.compose.runtime:runtime-livedata'
// Optional - Integration with RxJava
implementation 'androidx.compose.runtime:runtime-rxjava2'
}
Kotlin
dependencies {
val composeBom = platform("androidx.compose:compose-bom:2024.06.00")
implementation(composeBom)
androidTestImplementation(composeBom)
// Choose one of the following:
// Material Design 3
implementation("androidx.compose.material3:material3")
// or Material Design 2
implementation("androidx.compose.material:material")
// or skip Material Design and build directly on top of foundational components
implementation("androidx.compose.foundation:foundation")
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation("androidx.compose.ui:ui")
// Android Studio Preview support
implementation("androidx.compose.ui:ui-tooling-preview")
debugImplementation("androidx.compose.ui:ui-tooling")
// UI Tests
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-test-manifest")
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation("androidx.compose.material:material-icons-core")
// Optional - Add full set of material icons
implementation("androidx.compose.material:material-icons-extended")
// Optional - Add window size utils
implementation("androidx.compose.material3:material3-window-size-class")
// Optional - Integration with activities
implementation("androidx.activity:activity-compose:1.9.0")
// Optional - Integration with ViewModels
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
// Optional - Integration with LiveData
implementation("androidx.compose.runtime:runtime-livedata")
// Optional - Integration with RxJava
implementation("androidx.compose.runtime:runtime-rxjava2")
}
Dùng thử các ứng dụng mẫu trong Jetpack Compose
Cách nhanh nhất để thử nghiệm các khả năng của Jetpack Compose là dùng thử các ứng dụng mẫu trong Jetpack Compose được lưu trữ trên GitHub. Để nhập dự án ứng dụng mẫu từ Android Studio, hãy tiến hành như sau:
- Nếu bạn đang ở cửa sổ Chào mừng bạn đến với Android Studio (Welcome to Android Studio), hãy chọn Nhập mã mẫu Android (Import an Android code sample). Nếu bạn đã mở một dự án Android Studio, hãy chọn File > New > Import Sample (Tệp > Mới > Nhập mẫu) trong thanh trình đơn.
- Trong thanh tìm kiếm gần phía trên cùng của trình hướng dẫn Browse Samples (Duyệt qua mẫu), hãy nhập "Compose".
- Chọn một trong những ứng dụng mẫu Jetpack Compose từ kết quả tìm kiếm và nhấp vào Tiếp theo (Next).
- Thay đổi Application name (Tên ứng dụng) và Project location (Vị trí dự án) hoặc giữ nguyên giá trị mặc định.
- Nhấp vào Finish (Hoàn tất).
Android Studio tải ứng dụng mẫu xuống đường dẫn mà bạn chỉ định rồi mở dự án. Sau đó, bạn có thể kiểm tra MainActivity.kt
thuộc mỗi ví dụ để xem các API của Jetpack Compose, chẳng hạn như ảnh động chuyển đổi, các thành phần tuỳ chỉnh, bằng cách sử dụng kiểu chữ và hiển thị màu sáng cũng như tối ở chế độ xem trước trong IDE.
Để dùng Jetpack Compose cho Wear OS, hãy xem bài viết Thiết lập Jetpack Compose trên Wear OS.
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Điều hướng bằng Compose
- Kiểm thử bố cục Compose
- Thể hiện cảm xúc để tập trung