Jetpack Compose: co to je, klíčové pojmy a composable funkce

Co je Jetpack Compose?

Jetpack Compose — je deklarativní framework od Google pro vytváření uživatelských rozhraní Android, oznámený v roce 2019 a dosahující stabilního vydání v roce 2021. Na rozdíl od starého View System (XML + Activity/Fragment), Compose používá anotované funkce Kotlin — @Composable. Rozhraní je popsáno výhradně v Kotlinu: bez oddělení XML a kódu. To eliminovalo třídu chyb spojených s neshodou id v XML a Kotlinu (type-safe synthetic nepomáhal při refaktoringu).

Compose je postaven na vlastním vykreslovacím systému — Canvas, který není vázán na hierarchii View. Každý Composable kreslí přímo na Canvas, obchází onMeasure/onDraw View System. To přináší zvýšení výkonu na složitých obrazovkách: v testech Google (2023) se obrazovka Compose s 200 prvky vykreslovala o 40% rychleji než analogická na RecyclerView + ViewHolder.

Minimální požadavky a kompatibilita

Pro práci Compose vyžaduje minSdk 21 (Android 5.0) a Kotlin 1.9+. Compose BOM (Bill of Materials) synchronizuje verze všech knihoven Compose. Framework je kompatibilní s existujícím kódem na View System: Compose se vkládá přes ComposeView do XML a staré View přes AndroidView do hierarchie Compose. Podle Google Play Console (2025) pokrývá Android 5.0+ 97% aktivních zařízení, takže kompatibilita není pro většinu projektů omezením.

Composable funkce a kompozice

@Composable — je anotace, která mění běžnou funkci Kotlin na stavební blok UI. Composable funkce popisuje, jak má vypadat fragment rozhraní — text, tlačítko, seznam. Místo vrácení hodnoty funkce emituje komponenty UI do kompozice. To připomíná generátor: každá funkce při volání přidává prvky na obrazovku.

@Composable
fun ProfileCard(name: String, avatarUrl: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface
        )
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            AsyncImage(
                model = avatarUrl,
                contentDescription = "Avatar",
                modifier = Modifier.size(48.dp).clip(CircleShape)
            )
            Spacer(Modifier.width(12.dp))
            Text(
                text = name,
                style = MaterialTheme.typography.titleMedium
            )
        }
    }
}

Funkce ProfileCard přijímá parametry (name, avatarUrl) a emituje Card → Row → AsyncImage + Text. Kompozice — je strom emitovaných komponent v jednom průchodu. Pokud se parametry nezměnily, Compose přeskočí volání funkce (recomposition skip). Pokud se změnilo pouze name, bude volán pouze Text, ostatní prvky nebudou překresleny. Taková intelligent recomposition — je klíčová výhoda výkonu Compose oproti ruční optimalizaci View System.

Sloty a Content Lambda

Composable funkce aktivně používají sloty — trailing lambda, content: @Composable (() -> Unit). To umožňuje vytvářet kontejnery: Card, Column, Row přijímají content lambdu a obsah se vkládá na místo slotu. Slot API nahradilo XML atributy typu android:layout_gravity — nyní se poloha podřízených prvků určuje kódem Kotlin uvnitř content bloku.

Správa stavu v Compose

Stav v Compose — je jakákoli hodnota, která se může v čase měnit. Když se stav změní, Compose naplánuje recomposition pro všechny komponenty, které tento stav čtou. Mechanismus připomíná React hooks: mutableStateOf vrací MutableState, čtení .value automaticky přihlásí aktuální kompozici ke změnám.

@Composable
fun CounterExample() {
    var count by remember { mutableStateOf(0) }

    Column(modifier = Modifier.padding(16.dp)) {
        Text("Stisknuto: $count")
        Button(onClick = { count++ }) {
            Text("Zvýšit")
        }
    }
}

@Composable
fun UserScreen(viewModel: UserViewModel) {
    val userName by viewModel.userName.collectAsState()
    Text("Uživatel: $userName")
}

remember uchovává hodnotu mezi rekompozicemi — jinak by mutableStateOf byl vytvářen znovu při každé aktualizaci UI. collectAsState() převádí StateFlow z ViewModel na stav kompatibilní s Compose. Doporučení — pro stav obrazovky použijte ViewModel s StateFlow, pro lokální stav (např. rozbalená karta) — mutableStateOf. Toto rozdělení odpovídá principu „chytrých/hloupých” komponent.

State Hoisting

State Hoisting — vzor vynesení stavu z podřízené komponenty do nadřazené. Rodič předává hodnotu a callback přes parametry, podřízený volá callback při změně. Rodič ukládá mutableStateOf, podřízený — pouze parametry. To činí komponentu znovupoužitelnou a testovatelnou: stejný TextField lze použít s libovolným zdrojem dat.

Modifier — konfigurace vzhledu

Modifier — je objekt popisující transformace Composable: velikost, mezery, pozadí, zpracování kliknutí, animaci, rolování. Modifikátory se aplikují přes řetězec volání: Modifier.fillMaxWidth().padding(16.dp).background(Color.Blue).clickable { }. Každé volání vrací nový Modifier s přidanou vlastností — bez mutace původního objektu.

Pořadí modifikátorů je důležité. Modifier.padding(16.dp).background(Color.Blue) barví oblast s mezerou. Modifier.background(Color.Blue).padding(16.dp) barví vnitřní obdélník, mezera zůstává průhledná. Mechanika připomíná CSS box model: padding → background funguje jako margin + background; background → padding — jako background + padding uvnitř. Vývojář si stačí zapamatovat: padding nejprve = vnější mezera, padding potom = vnitřní.

Vlastní modifikátory

Pokud vestavěné modifikátory nestačí, vytvoří se vlastní přes Modifier.composed { ... } nebo Modifier.then(). Uvnitř vlastního modifikátoru lze použít měření rozvržení (Modifier.layout { measurable, constraints -> ... }), kreslení (Modifier.drawWithContent { ... }), gesta (Modifier.pointerInput { ... }). Příklad: modifikátor pro pulzující animaci při stisku — změří velikost, při kliknutí spustí animaci měřítka přes animateFloatAsState.

Pro animace Compose poskytuje animate*AsState (animateFloatAsState, animateColorAsState, animateDpAsState) — hodnoty se animují mezi starým a novým stavem při změně. Pokud je potřeba animace objevení/zmizení — AnimatedVisibility a AnimatedContent s vestavěnými přechody (fade, slide, expand). Všechny animace pracují na graphics layer, nezpůsobují zbytečnou kompozici.

Side Effects: LaunchedEffect, DisposableEffect, remember

Composable funkce by neměly provádět vedlejší akce přímo (síťové požadavky, časovače, předplatná) — jsou volány při každé rekompozici, což by vedlo k duplicitě požadavků. Pro vedlejší efekty Compose poskytuje rodinu funkcí Effect: LaunchedEffect spouští korutinu při vstupu do kompozice a ruší ji při výstupu, DisposableEffect — pro zdroje vyžadující explicitní čištění (senzory, BroadcastReceiver).

@Composable
fun SensorReader() {
    val context = LocalContext.current
    var sensorValue by remember { mutableStateOf(0f) }

    DisposableEffect(Unit) {
        val sensor = registerSensorListener(context) { value ->
            sensorValue = value
        }
        onDispose {
            unregisterSensorListener(sensor)
        }
    }

    Text("Hodnota: $sensorValue")
}

@Composable
fun UserGreeting(userId: String) {
    LaunchedEffect(userId) {
        val profile = api.fetchProfile(userId)
        // aktualizace stavu
    }
}

LaunchedEffect(userId) se restartuje, pokud se userId změnilo — předchozí korutina je zrušena, nová startuje s novým userId. To eliminuje ruční správu rušení požadavků. DisposableEffect(Unit) — efekt s pevným klíčem Unit, spouští se při vstupu do kompozice a volá onDispose při výstupu. SensorReader registruje posluchače a odhlašuje se při opuštění obrazovky — bez rizika úniku paměti.

rememberCoroutineScope

Pokud má být korutina spuštěna ne při vstupu do kompozice, ale na událost (stisk tlačítka), použije se rememberCoroutineScope(). Vrací CoroutineScope vázaný na životní cyklus Composable, nevyžaduje DisposableEffect. Příklad: spuštění síťového požadavku při kliknutí na tlačítko — scope.launch { viewModel.loadData() }.

Jetpack Compose vs View System: srovnání

Volba mezi Compose a View System — hlavní architektonická otázka vývojáře Android v roce 2026. Obě technologie jsou podporovány Google, ale Compose je hlavní směr, do kterého Google investuje zdroje. View System dostává pouze kritické opravy a nerozvíjí se. Rozdíl se projevuje v syntaxi, správě stavu, výkonu a času vývoje.

Pro nové projekty Google doporučuje Jetpack Compose jako standard vývoje UI. View System zůstává pro podporu kódu napsaného před rokem 2021 a případy, kdy je vyžadována minimální velikost APK (např. pro rozvíjející se trhy se zařízeními základní úrovně). Compose snižuje objem UI kódu o 30–50% oproti View System díky deklarativní syntaxi a vestavěným animacím.