Giới thiệu 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