Jetpack Compose: mi ez, kulcsfogalmak és composable függvények

Mi a Jetpack Compose?

A Jetpack Compose — egy deklaratív keretrendszer a Google-tól Android felhasználói felületek építéséhez, amelyet 2019-ben jelentettek be és 2021-ben ért el a stabil kiadást. A régi View System-től (XML + Activity/Fragment) eltérően a Compose annotált Kotlin függvényeket — @Composable — használ. A felület teljes egészében Kotlinban van leírva: nincs szétválasztás XML és kód között. Ez kiküszöbölte az XML és Kotlin közötti id-eltérésekkel kapcsolatos hibák osztályát (a type-safe synthetic nem segített refaktoráláskor).

A Compose saját renderelőrendszerre — Canvas — épül, amely nem kötődik a View hierarchiához. Minden Composable közvetlenül a Canvas-ra rajzol, megkerülve a View System onMeasure/onDraw metódusait. Ez teljesítménynövekedést biztosít összetett képernyőkön: a Google tesztjeiben (2023) egy 200 elemből álló Compose képernyő 40%-kal gyorsabban renderelődött, mint a RecyclerView + ViewHolder analógja.

Minimális követelmények és kompatibilitás

A Compose működéséhez minSdk 21 (Android 5.0) és Kotlin 1.9+ szükséges. A Compose BOM (Bill of Materials) szinkronizálja az összes Compose könyvtár verzióját. A keretrendszer kompatibilis a View System meglévő kódjával: a Compose a ComposeView segítségével ágyazható be XML-be, a régi View pedig AndroidView segítségével a Compose hierarchiába. A Google Play Console (2025) adatai szerint az Android 5.0+ az aktív eszközök 97%-át fedi le, így a kompatibilitás nem jelent korlátozást a legtöbb projekt számára.

Composable függvények és kompozíció

@Composable — egy annotáció, amely egy szokásos Kotlin függvényt UI építőelemré alakít. A Composable függvény leírja, hogyan kell kinéznie egy felületdarabnak — szöveg, gomb, lista —. Érték visszaadása helyett a függvény UI komponenseket bocsát ki a kompozícióba. Ez egy generátorra hasonlít: minden függvény meghívásakor elemeket ad a képernyőhöz.

@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
            )
        }
    }
}

A ProfileCard függvény paramétereket (name, avatarUrl) fogad és Card → Row → AsyncImage + Text komponenseket bocsát ki. Kompozíció — a kibocsátott komponensek fája egy menetben. Ha a paraméterek nem változtak, a Compose kihagyja a függvényhívást (recomposition skip). Ha csak a name változott, csak a Text kerül meghívásra, a többi elem nem rajzolódik újra. Ez az intelligent recomposition — a Compose teljesítménybeli fő előnye a View System kézi optimalizálásával szemben.

Slots és Content Lambda

A Composable függvények aktívan használják a slotokat — trailing lambda, content: @Composable (() -> Unit). Ez lehetővé teszi konténerek létrehozását: a Card, Column, Row content lambdát fogad, és a tartalom a slot helyére épül be. A Slot API felváltotta az olyan XML attribútumokat, mint az android:layout_gravity — most a gyermekelemek elhelyezkedését Kotlin kód határozza meg a content blokkon belül.

Állapotkezelés a Compose-ban

Az állapot a Compose-ban — bármely érték, amely idővel változhat. Amikor az állapot megváltozik, a Compose recomposition-t ütemez az állapotot olvasó összes komponens számára. A mechanizmus a React hooks-ra emlékeztet: a mutableStateOf egy MutableState objektumot ad vissza, a .value olvasása automatikusan feliratkoztatja az aktuális kompozíciót a változásokra.

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

    Column(modifier = Modifier.padding(16.dp)) {
        Text("Lenyomva: $count")
        Button(onClick = { count++ }) {
            Text("Növelés")
        }
    }
}

@Composable
fun UserScreen(viewModel: UserViewModel) {
    val userName by viewModel.userName.collectAsState()
    Text("Felhasználó: $userName")
}

A remember megőrzi az értéket a rekompozíciók között — egyébként a mutableStateOf minden UI frissítéskor újra létrejönne. A collectAsState() a ViewModel-ből származó StateFlow-t Compose-kompatibilis állapottá alakítja. Javaslat — képernyőállapothoz használjon ViewModel-t StateFlow-val, helyi állapothoz (pl. kinyitott kártya) — mutableStateOf-ot. Ez a felosztás megfelel az „okos/buta” komponensek elvének.

State Hoisting

State Hoisting — az állapot gyermekkomponensből szülőkomponensbe történő kiemelésének mintája. A szülő paramétereken keresztül adja át az értéket és a callback-et, a gyermek változáskor meghívja a callback-et. A szülő tárolja a mutableStateOf-ot, a gyermek csak a paramétereket. Ez újrafelhasználhatóvá és tesztelhetővé teszi a komponenst: ugyanaz a TextField bármely adatforrással használható.

Modifier — a megjelenés konfigurálása

A Modifier — egy objektum, amely leírja a Composable transzformációit: méret, hézagok, háttér, kattintáskezelés, animáció, görgetés. A módosítók hívási láncon keresztül alkalmazhatók: Modifier.fillMaxWidth().padding(16.dp).background(Color.Blue).clickable { }. Minden hívás egy új Modifier-t ad vissza a hozzáadott tulajdonsággal — az eredeti objektum nem változik.

A módosítók sorrendje fontos. A Modifier.padding(16.dp).background(Color.Blue) hézaggal színezi a területet. A Modifier.background(Color.Blue).padding(16.dp) a belső téglalapot színezi, a hézag pedig átlátszó marad. Mechanika hasonlít a CSS box modellre: padding → background úgy működik, mint a margin + background; background → padding — mint a background + padding belül. A fejlesztőnek elég megjegyeznie: padding először = külső hézag, padding utána = belső.

Egyedi módosítók

Ha a beépített módosítók nem elegendőek, egyedi módosító hozható létre a Modifier.composed { ... } vagy Modifier.then() segítségével. Az egyedi módosítóban elrendezésmérések (Modifier.layout { measurable, constraints -> ... }), rajzolás (Modifier.drawWithContent { ... }), gesztusok (Modifier.pointerInput { ... }) használhatók. Példa: módosító pulzáló animációhoz nyomáskor — megméri a méretet, kattintáskor elindítja a skálázási animációt az animateFloatAsState segítségével.

Az animációkhoz a Compose animate*AsState (animateFloatAsState, animateColorAsState, animateDpAsState) függvényeket kínál — az értékek a régi és új állapot között animálódnak változáskor. Ha megjelenés/eltűnés animációra van szükség — AnimatedVisibility és AnimatedContent beépített átmenetekkel (fade, slide, expand). Minden animáció a graphics layer-en működik, nem okoz felesleges kompozíciót.

Side Effects: LaunchedEffect, DisposableEffect, remember

A Composable függvények nem hajthatnak végre közvetlenül mellékhatásokat (hálózati kérések, időzítők, feliratkozások) — minden rekompozíciókor meghívódnak, ami a kérések duplikálódásához vezetne. A mellékhatásokhoz a Compose az Effect függvények családját kínálja: LaunchedEffect egy korutint indít a kompozícióba lépéskor és megszakítja kilépéskor, DisposableEffect — az explicit tisztítást igénylő erőforrásokhoz (érzékelők, 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("Érték: $sensorValue")
}

@Composable
fun UserGreeting(userId: String) {
    LaunchedEffect(userId) {
        val profile = api.fetchProfile(userId)
        // állapot frissítése
    }
}

LaunchedEffect(userId) újraindul, ha az userId megváltozott — az előző korutin megszakad, egy új indul az új userId-val. Ez kiküszöböli a kérések megszakításának kézi kezelését. DisposableEffect(Unit) — hatás rögzített Unit kulccsal, a kompozícióba lépéskor aktiválódik és kilépéskor meghívja az onDispose-t. A SensorReader regisztrál egy hallgatót és leiratkozik a képernyő elhagyásakor — memóriaszivárgás kockázata nélkül.

rememberCoroutineScope

Ha egy korutint nem a kompozícióba lépéskor, hanem egy eseményre (gombnyomás) kell elindítani, a rememberCoroutineScope() használható. Ez egy CoroutineScope-ot ad vissza, amely a Composable életciklusához kötődik, nem igényel DisposableEffect-et. Példa: hálózati kérés indítása gombra kattintáskor — scope.launch { viewModel.loadData() }.

Jetpack Compose vs View System: összehasonlítás

A Compose és a View System közötti választás — az Android fejlesztő fő építészeti kérdése 2026-ban. Mindkét technológiát támogatja a Google, de a Compose a fő irány, amelyre a Google erőforrásokat fordít. A View System csak kritikus javításokat kap és nem fejlődik. A különbség a szintaxisban, az állapotkezelésben, a teljesítményben és a fejlesztési időben nyilvánul meg.

Új projektekhez a Google a Jetpack Compose-t ajánlja a UI fejlesztés szabványaként. A View System a 2021 előtt írt kód támogatására és azokban az esetekben marad, ahol minimális APK méret szükséges (pl. fejlődő piacokon belépő szintű eszközökkel). A Compose 30–50%-kal csökkenti a UI kód mennyiségét a View System-hez képest a deklaratív szintaxisnak és a beépített animációknak köszönhetően.