Jetpack Compose: základy, Composable funkce a State

Co je Jetpack Compose?

Jetpack Compose — UI framework Googlu postavený na principech reaktivního programování. Místo Activity s rozvrženími XML, FragmentManager a ViewBinding popisuje vývojář rozhraní pomocí funkcí Kotlin s anotací @Composable. Compose nepoužívá LayoutInflater — UI jsou čisté funkce Kotlin, zkompilované do bytekódu. Framework se skládá z několika knihoven: Compose UI (základní komponenty Text, Button, Column, Row), Compose Foundation (Material Design, Gesta, Fokus), Compose Material3 (Material You s Dynamic Colors) a Compose Runtime (State, Side Effects, Coroutines). Compose funguje na Android API 21+ (Android 5.0) a je plně kompatibilní s existujícím kódem View/XML prostřednictvím ComposeView — adaptéru AndroidView.

Compose vs View System

View System (2008) používá hierarchii objektů View s ručním řízením: vývojář vytvoří rozvržení XML, najde View přes findViewById, implementuje Adapter pro RecyclerView a volá notifyDataSetChanged při změně dat. Compose popisuje UI funkcionálně: při změně stavu framework restartuje (recompose) pouze změněné Composable funkce, vypočítá diff a aplikuje minimální změny na Canvas. Výkon Compose je srovnatelný s View System a ve scénářích se složitými seznamy (LazyColumn) často překonává RecyclerView díky přeskakování nepotřebných prvků pomocí parametru key. V IT Sectr se Compose používá pro nové moduly aplikací Android s minSdk 24+.

Composable funkce: stavební bloky UI

@Composable — anotace přeměňující obyčejnou funkci Kotlin na stavební blok UI. Composable funkce mohou volat jiné Composable funkce a tvořit strom komponent. Na rozdíl od View nemají Composable funkce ve výchozím stavu žádný stav — jsou stateless a překreslují se při každé změně vstupních parametrů nebo State. Kompilátor (Compose Compiler) transformuje @Composable funkce do kódu, který může být přerušen a obnoven (positional memoization) — to umožňuje Compose restartovat pouze změněné části bez úplného přestavění stromu.

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun UserProfile(name: String, avatarUrl: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        AsyncImage(
            model = avatarUrl,
            contentDescription = "User avatar",
            modifier = Modifier.size(48.dp)
        )
        Spacer(modifier = Modifier.width(12.dp))
        Text(
            text = name,
            style = MaterialTheme.typography.titleMedium
        )
    }
}

Funkce UserProfile přijímá name a avatarUrl jako parametry, vytváří řádek s avatarem a jménem. Modifier.fillMaxWidth() roztahuje komponent na celou šířku, .padding(16.dp) přidává okraje. MaterialTheme.typography.titleMedium používá systémový styl Material 3. Při změně parametrů name nebo avatarUrl Compose restartuje UserProfile — opětovné vytvoření komponentu s novými hodnotami.

State a Recomposition v Jetpack Compose

State v Compose — jakákoli hodnota, jejíž změna způsobuje rekompozici (restartování) závislých @Composable funkcí. Základním způsobem je mutableStateOf(), vytvářející MutableState<T> s podporou snapshot systému Compose. Snapshot — mechanismus sledování změn: při zápisu do State Compose označí aktuální Snapshot jako dirty a plánovač rekompozice restartuje pouze Composable funkce čtoucí tento State. Pro pozorovatelné kolekce používejte mutableStateListOf() a mutableStateMapOf(). Compose podporuje State z Lifecycle-Aware komponent prostřednictvím collectAsState() pro Kotlin Flow a observeAsState() pro LiveData.

@Composable
fun LikeButton() {
    var liked by remember { mutableStateOf(false) }
    var count by remember { mutableStateOf(42) }
    
    Button(
        onClick = {
            liked = !liked
            if (liked) count++ else count--
        },
        colors = ButtonDefaults.buttonColors(
            containerColor = if (liked) MaterialTheme.colorScheme.primary
                else MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Text("♥ $count")
    }
}

Kód vytváří tlačítko «Like» se stavem liked (Boolean) a count (Int), uloženými prostřednictvím mutableStateOf(). Při stisknutí se liked převrátí, čítač se zvýší/sníží — Compose automaticky restartuje LikeButton. by delegate umožňuje používat State jako běžnou proměnnou: liked = !liked místo liked.value = !liked.value. Barva tlačítka se reaktivně mění mezi primary (lajkováno) a surfaceVariant (nelajkováno).

remember: ukládání mezi rekompozicemi

remember — funkce Compose ukládající hodnotu do mezipaměti mezi rekompozicemi. Bez remember každé restartování Composable funkce vytváří nový stav (mutableStateOf) — to narušuje logiku aplikace: při otočení obrazovky nebo změně nadřazeného State se čítač resetuje. remember přijímá lambda-kalkulátor a vypočítá hodnotu pouze při první kompozici; při následujících vrací uložený výsledek. Pro resetování mezipaměti používejte remember(key) — klíč určuje, kdy hodnotu přepočítat. remember(key1, key2) přepočítává při změně libovolného klíče. Pro dlouhodobé stavy (přežívající otočení obrazovky) používejte rememberSaveable — analog remember s ukládáním do Bundle přes SavedStateHandle.

@Composable
fun TimerScreen() {
    var seconds by rememberSaveable { mutableStateOf(0) }
    
    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            seconds++
        }
    }
    
    Column(
        modifier = Modifier.fillMaxSize().padding(32.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Uplynulo: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

rememberSaveable uchovává seconds při otočení obrazovky (změna konfigurace). LaunchedEffect spouští korutinu, která každou sekundu zvyšuje seconds. Při rekompozici TimerScreen (každou sekundu) se seconds díky rememberSaveable neresetuje. Používejte běžný remember pro stav, který by neměl přežít změny konfigurace (např. příznaky animace).

Modifier: řetězec nastavení Composable

Modifier — neměnný kontejnerový objekt implementující vzor Builder pro nastavení vzhledu, chování a rozvržení komponent Composable. Každé volání metody Modifier (.padding(), .width(), .clickable(), .background()) vrací nový Modifier s přidaným prvkem. Pořadí modifikátorů je důležité: .padding(16.dp).clickable { } — okraj se aplikuje před handlerem kliknutí, clickable sleduje celou oblast s ohledem na okraj. .clickable { }.padding(16.dp) — celá oblast před okrajem je klikatelná, okraj posouvá obsah dovnitř. Modifier podporuje vlastní implementace prostřednictvím then(otherModifier) a compositionLocal pro přístup k nadřazeným nastavením.

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Karta kliknuta") },
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Jetpack Compose", style = MaterialTheme.typography.titleLarge)
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                "Deklarativní UI pro Android s State a Modifier",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

CardExample demonstruje řetězec Modifier: fillMaxWidth + padding + clickable. Card — komponenta Material3 s vlastním nastavením elevation a colors. Vnořený Column má vnitřní okraj 16dp. Compose Material3 automaticky přizpůsobuje barvy Dynamic Color (Material You) na Android 12+. Card je jednou z 30+ vestavěných komponent Material3 v Compose.

State hoisting a architektura Compose

State hoisting — vzor zvedání stavu z Composable funkce do jejího volajícího, činící funkci stateless. Stateless komponent přijímá data a callbacky prostřednictvím parametrů, aniž by vlastnil vlastní State. To zvyšuje znovupoužitelnost a testovatelnost: komponent lze volat s různými Stavy a testovat v náhledu. Google doporučuje architekturu: ViewModel + StateFlow (nebo MutableStateFlow) + collectAsState() v Compose. ViewModel zvedá stav na úroveň obrazovky, Compose zobrazuje. Vedlejší efekty (LaunchedEffect, DisposableEffect) zpracovávají jednorázové události.