Jetpack Compose Kotlin: Xây dựng ứng dụng Android hiện đại

Jetpack Compose Kotlin đang cách đẳng cách phát triển giao diện Android bằng cách thay thế XML bằng mã Kotlin khai báo. Công cụ này giúp developer tạo UI linh hoạt, dễ bảo trì và tích hợp liền mạch với kiến trúc MVVM. Trong bài viết này, chúng ta sẽ khám phá cách bắt đầu với Jetpack Compose, thiết kế layout responsive và tối ưu hiệu suất cho ứng dụng Android.

Từ khóa chính: Jetpack Compose Kotlin, Android UI toolkit, declarative UI, composable functions, Material Design 3.

Cài đặt môi trường phát triển Jetpack Compose

Trước khi bắt đầu, bạn cần cài đặt Android Studio Chipmunk hoặc phiên bản mới nhất, đồng thời bật tính năng Compose trong Gradle. Theo tài liệu chính thức của Android Developers, các bước cài đặt cơ bản bao gồm:

// build.gradle (Module)
android {
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.5.0'
    }
}
dependencies {
    implementation "androidx.core:core-ktx:1.9.0"
    implementation "androidx.activity:activity-compose:1.6.1"
    implementation "androidx.compose.ui:ui-tooling-preview:1.5.0"
    implementation "androidx.compose.material3:material3:1.1.0"
}

Sau khi đồng bộ Gradle, bạn có thể bắt đầu viết mã Compose ngay trong hàm setContent của Activity. Hệ thống sẽ tự động chuyển đổi các composable thành UI thực tế trên màn hình thiết bị.

Xây dựng giao diện cơ bản với Composable Functions

Jetpack Compose sử dụng hàm composable (được đánh dấu bằng annotation @Composable) để mô tả UI. Ví dụ đơn giản nhất là hiển thị một chuỗi văn bản:

@Composable
fun Greeting(name: String) {
    Text(text = "Xin chào, $name!", fontSize = 24.sp, fontWeight = FontWeight.Bold)
}

@Composable
fun MyApp() {
    Greeting(name = "Android Developer")
}

Trong đoạn mã trên, hàm Greeting là composable nhận tham số name và hiển thị văn bản. Hàm MyApp gọi composable này để khởi tạo ứng dụng. Mỗi composable là một hàm Kotlin thuần túy, cho phép tái sử dụng và kiểm thử dễ dàng.

Thiết kế layout phức tạp với Column, Row và Box

Để tạo giao diện có nhiều thành phần, bạn sử dụng các layout composable cơ bản:

Column: sắp xếp các thành phần theo chiều dọc (tương tự LinearLayout vertical)
Row: sắp xếp theo chiều ngang (tương tự LinearLayout horizontal)
Box: xếp chồng các thành phần lên nhau (tương tự FrameLayout)

Kết hợp các layout này cho phép xây dựng mọi giao diện phức tạp mà không cần file XML riêng biệt. Ví dụ tạo thẻ hồ sơ người dùng (Profile Card):

@Composable
fun ProfileCard() {
    Column(modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
        .background(color = MaterialTheme.colorScheme.surface)
        .shadow(elevation = 4.dp)) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Image(
                painter = painterResource(id = R.drawable.avatar),
                contentDescription = "Avatar người dùng",
                modifier = Modifier.size(64.dp).clip(CircleShape)
            )
            Column {
                Text("Nguyễn Văn A", fontSize = 18.sp, fontWeight = FontWeight.Bold)
                Text("[email protected]", fontSize = 14.sp, color = MaterialTheme.colorScheme.onSurfaceVariant)
            }
            Icon(Icons.Default.Favorite, contentDescription = "Yêu thích", tint = MaterialTheme.colorScheme.error)
        }
        Spacer(modifier = Modifier.height(12.dp))
        Text("Lập trình Android với Jetpack Compose", style = MaterialTheme.typography.bodyMedium)
    }
}

State Management và Recomposition trong Compose

Một khái niệm cốt lõi của Jetpack Compose là quản lý trạng thái (state). Khi trạng thái thay đổi, Compose tự động chạy lại (recompose) các composable liên quan. Sử dụng remember và mutableStateOf để lưu trữ state:

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text("Đếm: $count", fontSize = 48.sp)
        Button(onClick = { count++ }) {
            Text("Tăng", fontSize = 24.sp)
        }
    }
}

Để tránh recomposition không cần thiết, hãy sử dụng derivedStateOf cho các tính toán phức tạp và remember cho các object đắt giá. Nguyên tắc: chỉ đọc state trong composable, ghi state trong event handler.

Tối ưu hiệu suất và Best Practices

Để đạt hiệu suất tốt nhất với Jetpack Compose Kotlin:

Tránh tái tạo composable không cần thiết bằng remember và derivedStateOf
Sử dụng LazyColumn và LazyRow cho danh sách dài thay vì Column/Row
Tách UI thành các composable nhỏ, đơn nhiệm để tái sử dụng và test
Bật chế độ Preview trong Android Studio để kiểm tra nhanh trên nhiều kích thước màn hình
Áp dụng Material Design 3 qua MaterialTheme để đảm bảo tính nhất quán

Với Jetpack Compose Kotlin, bạn có thể xây dựng ứng dụng Android hiện đại, nhanh chóng và dễ bảo trì hơn nhiều so với cách tiếp cận XML truyền thống. Hệ thống tooling mạnh mẽ của Android Studio (Layout Inspector, Live Edit, Compose Preview) giúp quy trình phát triển trở nên mượt mà và hiệu quả.

Preview, debug và triển khai ứng dụng Compose

Android Studio cung cấp Compose Preview cho phép bạn xem trước giao diện ngay trong IDE mà không cần cài đặt trên thiết bị. Thêm annotation @Preview vào một hàm composable:

@Preview(showBackground = true, name = "Light")
@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES, name = "Dark")
@Composable
fun MyAppPreview() {
    MyAppTheme {
        MyApp()
    }
}

Bạn cũng có thể kết hợp Compose với View truyền thống thông qua AndroidView hoặc ComposeView, giúp di chuyển dần hệ thống giao diện hiện có sang Compose mà không cần viết lại toàn bộ.

Nguồn tham khảo: Android Developers – Jetpack Compose, Compose Documentation, Jetpack Compose Pathway