Jetpack Compose là xu hướng mới trong lập trình Android, giúp lập trình viên xây dựng giao diện UI nhanh chóng và linh hoạt hơn với Kotlin thuần, thay vì sử dụng XML truyền thống.
Jetpack Compose là gì?
Jetpack Compose là bộ UI toolkit do Google phát triển, cho phép bạn viết giao diện người dùng (UI) bằng Kotlin thành công cụ kiểu declarative. Compose thay thế XML bằng cách sử dụng hàm @Composable để định nghĩa UI.
Lý do nên dùng Jetpack Compose:
- Tách biệt logic và UI một cách rõ ràng
- Có thể reactive UI dựa trên LiveData, StateFlow, hoặc state
- Tích hợp tự nhiên với ViewModel, Navigation, Material 3
- Code ngắn gọn, dễ bảo trì, không còn layout XML phức tạp
Cài đặt Jetpack Compose trong Android Studio
1. Yêu cầu
- Android Studio Flamingo trở lên (hoặc Dolphin đã có Compose preview)
- Kotlin >= 1.9.0
2. Cấu hình trong build.gradle (Project)
buildscript {
ext {
compose_ui_version = '1.6.5'
}
dependencies {
classpath 'com.android.tools.build:gradle:8.3.0'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.9.22"
}
}
3. Cấu hình trong build.gradle (Module: app)
plugins {
id 'com.android.application'
id 'org.jetbrains.kotlin.android'
}
android {
namespace 'com.example.myapp'
compileSdk 34
defaultConfig {
applicationId "com.example.myapp"
minSdk 21
targetSdk 34
versionCode 1
versionName "1.0"
}
buildFeatures {
compose true
}
composeOptions {
kotlinCompilerExtensionVersion = "1.5.10"
}
kotlinOptions {
jvmTarget = '1.8'
}
}
dependencies {
implementation "androidx.core:core-ktx:1.12.0"
implementation "androidx.activity:activity-compose:1.9.0"
implementation "androidx.compose.ui:ui:$compose_ui_version"
implementation "androidx.compose.material3:material3:1.2.0"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
debugImplementation "androidx.compose.ui:ui-tooling:$compose_ui_version"
}
Viết Giao Diện UI Đầu Tiên Bằng Compose
1. Tạo Component Composable
@Composable
fun Greeting(name: String) {
Text(text = "Xin chào, $name!", fontSize = 24.sp)
}
2. Gọt trong MainActivity
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Greeting("Lập trình viên Kotlin")
}
}
}
}
Layout Compose: Column, Row, Button, TextField
@Composable
fun MyScreen() {
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
) {
Text("Chào mừng bạn đến với Compose!", fontSize = 20.sp)
Spacer(modifier = Modifier.height(16.dp))
TextField(
value = "",
onValueChange = {},
label = { Text("Nhập tên") }
)
Spacer(modifier = Modifier.height(8.dp))
Button(onClick = { Log.d("MyApp", "Nút đã được nhấn") }) {
Text("Bấm vào tôi")
}
}
}
So sánh Jetpack Compose và XML
| Tiêu chí | XML Truyền Thống | Jetpack Compose |
|---|---|---|
| Tốc độ phát triển | Chậm, nhiều file | Nhanh, code trong 1 chỗ |
| Debug UI | Dựa vào layout preview | Live Preview trong Android Studio |
| Reactive | Cần kết hợp LiveData/Binding | Native reactive support |
| Cài đặt ban đầu | Ít thay đổi | Cần khai báo Compose |
Tổng Kết
Jetpack Compose là tương lai của giao diện Android. Nó mang lại trải nghiệm mới mẻ cho nhà phát triển với:
- Code Kotlin gọn gàng, dễ đọc
- UI linh hoạt và tương tác trực quan
- Dễ tích hợp với ViewModel, State, Material Design
Hãy bắt đầu dự án Android của bạn với Compose ngay hôm nay!
Tài Nguyên Hỏ Trợ
