Jetpack Compose v mobilním vývoji: co to je, klíčové koncepty a jak to funguje

Základy Jetpack Compose (@Composable, Composition, Recomposition)

@Composable — anotace, která mění funkci na Composable. Composable funkce jsou stavební bloky UI. Nevracejí View, emitují prvky do Composition. Composition — UI strom vytvořený z volání Composable funkcí. Compose porovnává nový strom se starým a aktualizuje pouze změněné části.

Recomposition

Recomposition — restart Composable funkcí při změně stavu. Compose sleduje, které stavy jsou v každé funkci čteny. Když se stav změní, Compose restartuje pouze funkce, které tento stav čtou (Smart Recomposition). Recomposition je optimistická: může běžet vícekrát, proto funkce musí být čisté (bez vedlejších efektů). Vedlejší efekty jdou do LaunchedEffect nebo DisposableEffect. Composable funkce nemohou být suspend. Jsou volány z jiných Composable funkcí. Pořadí volání není zaručeno (Compose může přeuspořádat).

// Příklad Composable se State Hoisting a LazyColumn
@Composable
fun ItemList(
    items: List<String>,
    onItemClick: (String) -> Unit
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(items) { item ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { onItemClick(item) }
                    .padding(8.dp)
            ) {
                Text(
                    text = item,
                    style = MaterialTheme.typography.bodyLarge
                )
            }
        }
    }
}

@Composable
fun MainScreen() {
    var text by remember { mutableStateOf("") }
    val items = listOf("Item 1", "Item 2", "Item 3")

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Compose App") })
        }
    ) { padding ->
        ItemList(
            items = items,
            onItemClick = { selected -> text = selected }
        )
    }
}

Composition — deklarativní strom. Recomposition — inteligentní restart. IT Sectr doporučuje sledovat stabilitu typů — nestabilní typy způsobují nadměrnou rekompozici.

CompositionLocal

CompositionLocal — implicitní předávání dat v Compose. Analogie k @Environment ve SwiftUI. CompositionLocalProvider — nastavení hodnoty. current — čtení. Používá se pro: Theme (MaterialTheme), ContentScale, Density. Statický CompositionLocal — pro konfiguraci beze změn. Dynamický CompositionLocal — pro měnitelné hodnoty (témata). IT Sectr doporučuje používat CompositionLocal pro globální konfigurace a explicitní parametry pro data.

Stav (remember, mutableStateOf, State Hoisting)

remember — uchovává hodnotu mezi rekompozicemi. mutableStateOf — vytváří pozorovatelný stav (MutableState<T>). Při změně spouští rekompozici. State Hoisting — vzor: stav je zvednut do rodičovské komponenty, dítě obdrží hodnotu + zpětné volání. State (neměnný) — pouze pro čtení. MutableState — čtení + zápis. rememberSaveable — přetrvává při otáčení/ukončení procesu.

State Hoisting

State Hoisting — princip: state down, events up. Stav je uložen v rodiči a předáván potomkům prostřednictvím parametrů. Potomci hlásí změny prostřednictvím lambd (zpětné volání). Výhody: znovupoužitelnost, testovatelnost, jediný zdroj pravdy. Příklad: místo aby MyTextField ukládal svůj vlastní stav, rodič ukládá řetězec a předává ho prostřednictvím value + onValueChange.

Odvozený stav

derivedStateOf — vypočítaný stav, přepočítává se pouze při změně závislostí. Používá se pro filtrování, konverzi, validaci. snapshotFlow — převádí State na Flow. Používá se pro reaktivní řetězce. collectAsState — sbírá Flow do State uvnitř Composable. IT Sectr doporučuje derivedStateOf pro vypočítané hodnoty a snapshotFlow pro propojení State s korutinami.

Kontejnery (Column, Row, Box, LazyColumn)

Column — vertikální rozvržení (analogie k LinearLayout vertical). Row — horizontální rozvržení. Box — rozvržení překrývání (analogie k FrameLayout). LazyColumn — vertikální posouvatelný seznam s líným načítáním. LazyRow — horizontální posouvatelný seznam. Scaffold — hlavní struktura obrazovky: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — horní lišta. BottomNavigation — dolní navigace (NavigationBar v Material 3). Modifier — řetězec: .fillMaxWidth().padding(8.dp).clickable { }. Pořadí modifikátorů je důležité — každý vytváří nový obal.

Optimalizace LazyColumn

LazyColumn — virtualizovaný seznam. Vykresluje pouze viditelné prvky. Optimalizace: 1) key — jedinečný klíč pro položku, 2) contentType — seskupení položek podle typu, 3) itemContent — minimalizace rekompozice uvnitř položky, 4) LazyVerticalGrid / LazyHorizontalGrid — pro mřížky. LazyLayout — vlastní líné rozvržení. Paging 3 + Compose — stránkování pomocí collectAsLazyPagingItems. IT Sectr doporučuje key(item) pro všechny LazyColumn pro předvídatelnou rekompozici.

Navigace (NavController, NavHost)

Navigation Compose — navigační knihovna. NavController — spravuje zásobník cílů. NavHost — kontejner pro navigační graf. composable("route") — registrace cíle. navController.navigate("route") — navigace. popBackStack() — návrat. Argumenty: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). Deep linking přes intentFilter. BottomNavigation — integrace s NavController: NavBarItem → navigate + popUpTo.

Pokročilá navigace

Vícenásobné zásobníky zpět — samostatný zásobník zpět pro každou kartu BottomNavigation. SavedStateHandle — uchování argumentů při ukončení procesu. NavArgs — typově bezpečné argumenty (Kotlin 2.0+). Deep linky — URL schémata pro externí odkazy. Prediktivní gesto zpět (Android 14+) — podpora gesta zpět s náhledem. IT Sectr doporučuje používat NavArgs pro typovou bezpečnost a vícenásobné zásobníky zpět pro BottomNavigation.

Efekty (LaunchedEffect, DisposableEffect)

LaunchedEffect — spouští suspend blok v Composition. Zrušen při opuštění Composition. Restartován při změně keys. Používá se pro: načítání dat, časovače, animace. DisposableEffect — pro zdroje vyžadující vyčištění: onDispose { } — odhlášení z listenerů, uzavření spojení. SideEffect — synchronní efekt (při každé rekompozici). Používá se pro: logování, synchronizaci s ne-Compose kódem. IT Sectr doporučuje LaunchedEffect pro načítání dat a DisposableEffect pro čištění.

Compose — funkce + modifikátor. SwiftUI — struct + modifikátor. Koncepty jsou podobné, syntaxe je odlišná. IT Sectr doporučuje učit se oba frameworky — pochopení jednoho usnadňuje učení druhého.

Vzory efektů

rememberCoroutineScope — přístup k CoroutineScope mimo LaunchedEffect (např. při kliknutí na tlačítko). snapshotFlow — převod State na Flow pro řetězce. produceState — převod ne-Compose zdroje na State. animateFloatAsState a animateColorAsState — animace prostřednictvím efektů. IT Sectr doporučuje rememberCoroutineScope pro UI události a LaunchedEffect pro automatické načítání.

Témata (MaterialTheme, Material3)

MaterialTheme — globální téma Compose. Barvy, typografie, tvary. MaterialTheme { } — obaluje celou aplikaci. Material3 (M3) — designový systém Google 2023+. Dynamic Colors — přizpůsobení tapetě (Android 12+). TextStyle — konfigurace textu: fontSize, fontWeight, lineHeight. Shape — zaoblení rohů. Elevation — stíny. IT Sectr doporučuje výchozí Material3 a Dynamic Colors pro moderní zařízení.

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) {
        darkColorScheme(
            primary = Color(0xFFBB86FC),
            secondary = Color(0xFF03DAC6)
        )
    } else {
        lightColorScheme(
            primary = Color(0xFF6200EE),
            secondary = Color(0xFF03DAC6)
        )
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(
            bodyLarge = TextStyle(fontSize = 16.sp)
        )
    ) { content() }
}

Animace (animate*, AnimatedVisibility)

animateFloatAsState — animuje hodnotu Float. animateColorAsState — animuje barvu. animateDpAsState — animuje velikost. AnimatedVisibility — zobrazit/skrýt s .animateEnterExit(). AnimatedContent — animace při změně obsahu (crossfade, slide). updateTransition — animace založená na stavu enum. Animatable — vlastní animace přes rozhraní Animatable. IT Sectr doporučuje AnimatedVisibility pro seznamy a AnimatedContent pro přechody obrazovek.

@Composable
fun AnimatedCounter(count: Int) {
    val animatedCount by animateFloatAsState(
        targetValue = count.toFloat(),
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )

    AnimatedContent(targetState = count) { targetCount ->
        Text(
            text = "$targetCount",
            style = MaterialTheme.typography.displayLarge,
            modifier = Modifier.animateContentSize()
        )
    }
}

Testování (Compose UI Test)

Compose UI Test — testování obrazovek Compose. createComposeRule() — pravidlo JUnit. setContent { } — nastavení Composable. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — hledání prvků. performClick, performTextInput, performScrollTo — akce. assertIsDisplayed, assertTextEquals — tvrzení. Semantics — strom Semantics pro přístupnost a testy. IdlingResource — čekání na asynchronní operace. Testy snímků obrazovky — Papercuts, Roborazzi. IT Sectr doporučuje UI testy pro každou obrazovku a unit testy pro ViewModel.

WindowSizeClass — přizpůsobení velikosti obrazovky (Compact, Medium, Expanded). Související s responzivními rozvrženími Material3. Používá se v Adaptive Navigation Suite pro automatické přepnutí z BottomNavigation na NavigationRail. IT Sectr doporučuje WindowSizeClass pro přizpůsobení Compose na tabletech a desktopu.

Paging 3 + Compose — knihovna stránkování od Google. PagingData — proud stránek. PagingConfig — nastavení (pageSize, prefetchDistance). collectAsLazyPagingItems() — sběr v Compose. PagingSource — vlastní zdroj. RemoteMediator — hybridní načítání (síť + DB). Paging 3 je standard pro seznamy s nekonečným posouváním v Compose.