Giới thiệu Jetpack Compose

1. Jetpack Compose là gì?

Jetpack Compose là bộ toolkit UI hiện đại của Android, sử dụng Kotlin để xây dựng giao diện theo phong cách declarative.

2. So sánh với XML Views

Aspect	XML Views	Jetpack Compose
Cách viết	Imperative	Declarative
Ngôn ngữ	XML + Kotlin/Java	Pure Kotlin
State management	Manual	Automatic
Preview	Layout Editor	@Preview
Reusability	Custom Views phức tạp	Functions đơn giản

3. Lợi ích của Compose

Ít code hơn: Viết ít hơn 50% so với XML
Declarative: Mô tả UI thay vì thao tác trực tiếp
Kotlin-first: Tận dụng sức mạnh của Kotlin
Reactive: UI tự động cập nhật khi state thay đổi
Tooling: Live preview, interactive preview
Interoperability: Tương thích với Views hiện có

4. Setup Compose

build.gradle.kts (Module: app)


plugins {
    alias(libs.plugins.android.application)
    alias(libs.plugins.kotlin.android)
    alias(libs.plugins.kotlin.compose)
}
 
android {
    buildFeatures {
        compose = true
    }
}
 
dependencies {
    implementation(platform(libs.androidx.compose.bom))
    implementation(libs.androidx.ui)
    implementation(libs.androidx.material3)
    implementation(libs.androidx.activity.compose)
    implementation(libs.androidx.ui.tooling.preview)
    debugImplementation(libs.androidx.ui.tooling)
}

5. Composable Function đầu tiên


import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
 
@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Đặc điểm:

Đánh dấu với @Composable
Function name viết PascalCase
Không return gì (emit UI)

6. MainActivity với Compose


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

7. Preview


@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Greeting("Preview")
}
 
// Multiple previews
@Preview(name = "Light", showBackground = true)
@Preview(name = "Dark", uiMode = UI_MODE_NIGHT_YES)
@Composable
fun Previews() {
    MaterialTheme {
        Greeting("Multi Preview")
    }
}

8. Modifier

Modifier thay đổi appearance và behavior:


@Composable
fun ModifiedText() {
    Text(
        text = "Hello Compose",
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .background(Color.LightGray)
            .clickable { /* handle click */ }
    )
}

9. Composition over Inheritance


// ❌ XML: Kế thừa CustomView
// class MyButton : AppCompatButton
 
// ✅ Compose: Composition
@Composable
fun PrimaryButton(
    text: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Button(
        onClick = onClick,
        modifier = modifier,
        colors = ButtonDefaults.buttonColors(
            containerColor = MaterialTheme.colorScheme.primary
        )
    ) {
        Text(text)
    }
}

10. Recomposition

Khi state thay đổi, Compose chỉ recompose những phần bị ảnh hưởng:


@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    
    Column {
        Text("Count: $count")  // Recompose khi count thay đổi
        Button(onClick = { count++ }) {
            Text("Increment")  // Không recompose
        }
    }
}

11. Thinking in Compose

Từ Imperative:


// XML Views
textView.text = "Hello"
button.setOnClickListener { 
    textView.text = "Clicked" 
}

Sang Declarative:


// Compose
@Composable
fun MyScreen() {
    var text by remember { mutableStateOf("Hello") }
    
    Column {
        Text(text)
        Button(onClick = { text = "Clicked" }) {
            Text("Click me")
        }
    }
}

📝 Tóm tắt

Jetpack Compose là toolkit UI declarative
@Composable functions emit UI
Modifier thay đổi appearance/behavior
State drives UI (Unidirectional Data Flow)
Recomposition tự động khi state thay đổi
Pure Kotlin, không cần XML