Jetpack Compose: alapok, Composable függvények és State

Mi az a Jetpack Compose?

Jetpack Compose — a Google reaktív programozási elvekre épülő UI-keretrendszere. Az Activity XML-elrendezések, FragmentManager és ViewBinding helyett a fejlesztő a felületet @Composable annotációjú Kotlin-függvényekkel írja le. A Compose nem használ LayoutInflater-t — az UI tiszta Kotlin-függvényekből áll, amelyek bájtkódra fordulnak. A keretrendszer több könyvtárból áll: Compose UI (alapkomponensek Text, Button, Column, Row), Compose Foundation (Material Design, Gesztusok, Fókusz), Compose Material3 (Material You Dynamic Colors színekkel) és Compose Runtime (State, Side Effects, Coroutines). A Compose Android API 21+ (Android 5.0) rendszeren működik, és teljes mértékben kompatibilis a meglévő View/XML kóddal a ComposeView — AndroidView adapter segítségével.

Compose vs View System

View System (2008) View objektumok hierarchiáját használja manuális kezeléssel: a fejlesztő XML-elrendezést hoz létre, findViewById segítségével megkeresi a View-t, Adapter-t implementál a RecyclerView-hoz, és notifyDataSetChanged-et hív adatváltozáskor. A Compose funkcionálisan írja le az UI-t: állapotváltozáskor a keretrendszer csak a megváltozott Composable függvényeket indítja újra (recompose), kiszámítja a diff-et, és minimális változtatásokat alkalmaz a Canvas-on. A Compose teljesítménye összehasonlítható a View System-ével, összetett listák (LazyColumn) esetén pedig gyakran felülmúlja a RecyclerView-t a key paraméter segítségével történő felesleges elemek átugrásával. Az IT Sectr-nél a Compose-t minSdk 24+ rendelkező Android alkalmazások új moduljaiban használják.

Composable függvények: az UI építőkövei

@Composable — annotáció, amely egy közönséges Kotlin-függvényt az UI építőkövévé alakít. A Composable függvények más Composable függvényeket hívhatnak, komponensfát alkotva. A View-val ellentétben a Composable függvények alapértelmezés szerint nem rendelkeznek állapottal — stateless-ek, és minden bemeneti paraméter vagy State változásakor újrarajzolódnak. A fordító (Compose Compiler) a @Composable függvényeket megszakítható és folytatható kóddá alakítja (positional memoization) — ez lehetővé teszi a Compose számára, hogy a fa teljes újraépítése nélkül csak a megváltozott részeket indítsa újra.

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

A UserProfile függvény name és avatarUrl paramétereket fogad, sort épít avatárral és névvel. A Modifier.fillMaxWidth() teljes szélességűre nyújtja a komponenst, a .padding(16.dp) távolságokat ad hozzá. A MaterialTheme.typography.titleMedium a Material 3 rendszerstílusát használja. A name vagy avatarUrl paraméterek változásakor a Compose újraindítja a UserProfile-t — a komponens újbóli létrehozása új értékekkel.

State és Recomposition a Jetpack Compose-ban

State a Compose-ban — bármely érték, amelynek változása a függő @Composable függvények rekompozícióját (újraindítását) okozza. Az alapvető módszer a mutableStateOf(), amely MutableState<T>-t hoz létre a Compose snapshot-rendszerének támogatásával. Snapshot — változások követésének mechanizmusa: State-be íráskor a Compose az aktuális Snapshot-ot piszkosnak jelöli, és a rekompozíció-ütemező csak az ezt a State-et olvasó Composable függvényeket indítja újra. Megfigyelhető gyűjteményekhez használja a mutableStateListOf() és mutableStateMapOf() függvényeket. A Compose támogatja a State-et Lifecycle-Aware komponensekből a collectAsState() segítségével Kotlin Flow-hoz és az observeAsState() segítségével LiveData-hoz.

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

A kód egy «Like» gombot hoz létre liked (Boolean) és count (Int) állapottal, amelyeket a mutableStateOf() tárol. Megnyomáskor a liked megfordul, a számláló nő/csökken — a Compose automatikusan újraindítja a LikeButton-t. A by delegate lehetővé teszi a State használatát közönséges változóként: liked = !liked a liked.value = !liked.value helyett. A gomb színe reaktívan változik a primary (kedvelt) és surfaceVariant (nem kedvelt) között.

remember: gyorsítótárazás rekompozíciók között

remember — Compose függvény, amely gyorsítótárazza az értéket a rekompozíciók között. A remember nélkül minden Composable függvény újraindítás új állapotot (mutableStateOf) hoz létre — ez megtöri az alkalmazás logikáját: képernyőelforgatáskor vagy szülő State változásakor a számláló alaphelyzetbe áll. A remember egy kalkulátor-lambdát fogad, és csak az első kompozíciónál számítja ki az értéket; a következőknél a gyorsítótárazott eredményt adja vissza. A gyorsítótár alaphelyzetbe állításához használja a remember(key) függvényt — a kulcs határozza meg, mikor kell újraszámolni az értéket. A remember(key1, key2) bármely kulcs változásakor újraszámol. Hosszú élettartamú állapotokhoz (amelyek túlélik a képernyőelforgatást) használja a rememberSaveable-t — a remember megfelelője mentéssel a Bundle-be SavedStateHandle segítségével.

@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 = "Eltelt: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

A rememberSaveable megőrzi a seconds értéket képernyőelforgatáskor (konfigurációváltozás). A LaunchedEffect elindít egy korutint, amely másodpercenként növeli a seconds értékét. A TimerScreen rekompozíciójakor (másodpercenként) a seconds nem áll alaphelyzetbe a rememberSaveable-nek köszönhetően. Használjon sima remember-t olyan állapothoz, amelynek nem szabad túlélnie a konfigurációváltozásokat (pl. animációs jelzők).

Modifier: a Composable beállítások lánca

Modifier — megváltoztathatatlan konténerobjektum, amely a Builder mintát implementálja a Composable komponensek megjelenésének, viselkedésének és elrendezésének beállításához. A Modifier metódusának minden hívása (.padding(), .width(), .clickable(), .background()) egy új Modifier-t ad vissza a hozzáadott elemmel. A módosítók sorrendje fontos: .padding(16.dp).clickable { } — a távolság a kattintás-kezelő előtt kerül alkalmazásra, a clickable a teljes területet figyeli a távolság figyelembevételével. .clickable { }.padding(16.dp) — a távolság előtti teljes terület kattintható, a távolság befelé mozgatja a tartalmat. A Modifier támogatja az egyéni implementációkat a then(otherModifier) és a compositionLocal segítségével a szülő beállítások eléréséhez.

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Kártyára kattintva") },
        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(
                "Deklaratív UI Androidhoz State és Modifier segítségével",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

A CardExample bemutatja a Modifier láncot: fillMaxWidth + padding + clickable. A Card — Material3 komponens saját elevation és colors beállításokkal. A beágyazott Column belső padding értéke 16dp. A Compose Material3 automatikusan igazítja a színeket a Dynamic Color-hoz (Material You) Android 12+ rendszeren. A Card a Compose 30+ beépített Material3 komponensének egyike.

State hoisting és a Compose architektúrája

State hoisting — az állapot felemelésének mintája a Composable függvényből a hívóba, ami stateless-sé teszi a függvényt. A stateless komponens adatokat és callback-eket fogad paramétereken keresztül, nem rendelkezik saját State-tel. Ez növeli az újrafelhasználhatóságot és tesztelhetőséget: a komponens különböző State-ekkel hívható meg és előnézetben tesztelhető. A Google az alábbi architektúrát ajánlja: ViewModel + StateFlow (vagy MutableStateFlow) + collectAsState() a Compose-ban. A ViewModel felemeli az állapotot képernyő szintre, a Compose megjeleníti. A mellékhatások (LaunchedEffect, DisposableEffect) egyszeri eseményeket kezelnek.