Jetpack Compose: ce este, concepte cheie și funcții composable

Ce este Jetpack Compose?

Jetpack Compose — este un framework declarativ de la Google pentru construirea interfețelor de utilizator Android, anunțat în 2019 și care a atins o versiune stabilă în 2021. Spre deosebire de vechiul View System (XML + Activity/Fragment), Compose utilizează funcții Kotlin adnotate — @Composable. Interfața este descrisă integral în Kotlin: nu există separare între XML și cod. Aceasta a eliminat clasa de erori legate de nepotrivirea id-urilor în XML și Kotlin (type-safe synthetic nu ajuta la refactorizare).

Compose este construit pe propriul sistem de randare — Canvas, nelegat de ierarhia View. Fiecare Composable desenează direct pe Canvas, ocolind onMeasure/onDraw al View System. Aceasta oferă un câștig de performanță pe ecrane complexe: în testele Google (2023), un ecran Compose cu 200 de elemente s-a randat cu 40% mai rapid decât unul analog pe RecyclerView + ViewHolder.

Cerințe minime și compatibilitate

Pentru funcționare, Compose necesită minSdk 21 (Android 5.0) și Kotlin 1.9+. Compose BOM (Bill of Materials) sincronizează versiunile tuturor bibliotecilor Compose. Framework-ul este compatibil cu codul existent pe View System: Compose se încorporează prin ComposeView în XML, iar View-urile vechi prin AndroidView în ierarhia Compose. Conform datelor Google Play Console (2025), Android 5.0+ acoperă 97% din dispozitivele active, astfel că compatibilitatea nu este o limitare pentru majoritatea proiectelor.

Funcții Composable și compoziție

@Composable — este o adnotare care transformă o funcție obișnuită Kotlin într-un bloc de construcție UI. Funcția Composable descrie cum ar trebui să arate un fragment de interfață — text, buton, listă. În loc să returneze o valoare, funcția emite componente UI în compoziție. Aceasta seamănă cu un generator: fiecare funcție adaugă elemente pe ecran la apelare.

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

Funcția ProfileCard primește parametri (name, avatarUrl) și emite Card → Row → AsyncImage + Text. Compoziția — este un arbore de componente emise într-o singură trecere. Dacă parametrii nu s-au modificat, Compose omite apelul funcției (recomposition skip). Dacă s-a modificat doar name, va fi apelat doar Text, celelalte elemente nu vor fi redesenate. O astfel de intelligent recomposition — este avantajul cheie de performanță al Compose față de optimizarea manuală a View System.

Sloturi și Content Lambda

Funcțiile Composable utilizează activ sloturi — trailing lambda, content: @Composable (() -> Unit). Aceasta permite crearea containerelor: Card, Column, Row primesc lambda content, iar conținutul se încorporează în locul slotului. Slot API a înlocuit atributele XML de tip android:layout_gravity — acum poziționarea elementelor copil se stabilește prin cod Kotlin în interiorul blocului content.

Gestionarea stării în Compose

Starea în Compose — este orice valoare care se poate modifica în timp. Când starea se modifică, Compose planifică recomposition pentru toate componentele care citesc această stare. Mecanismul amintește de React hooks: mutableStateOf returnează MutableState, citirea .value abonează automat compoziția curentă la modificări.

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

    Column(modifier = Modifier.padding(16.dp)) {
        Text("Apăsat: $count")
        Button(onClick = { count++ }) {
            Text("Mărește")
        }
    }
}

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

remember păstrează valoarea între recompoziții — altfel mutableStateOf ar fi creat din nou la fiecare actualizare UI. collectAsState() convertește StateFlow din ViewModel într-o stare compatibilă cu Compose. Recomandare — pentru starea ecranului utilizați ViewModel cu StateFlow, pentru starea locală (de exemplu, card extins) — mutableStateOf. Această separare corespunde principiului componentelor „inteligente/proaste".

State Hoisting

State Hoisting — este un model de extragere a stării din componenta copil în componenta părinte. Părintele transmite valoarea și callback-ul prin parametri, copilul apelează callback-ul la modificare. Părintele stochează mutableStateOf, copilul — doar parametrii. Aceasta face componenta reutilizabilă și testabilă: același TextField poate fi utilizat cu orice sursă de date.

Modifier — configurarea aspectului

Modifier — este un obiect care descrie transformările Composable: dimensiune, spațieri, fundal, procesarea clicurilor, animația, derularea. Modificatorii se aplică printr-un lanț de apeluri: Modifier.fillMaxWidth().padding(16.dp).background(Color.Blue).clickable { }. Fiecare apel returnează un nou Modifier cu proprietatea adăugată — fără mutarea obiectului original.

Ordinea modificatorilor este importantă. Modifier.padding(16.dp).background(Color.Blue) colorează zona cu spațiere. Modifier.background(Color.Blue).padding(16.dp) colorează dreptunghiul interior, iar spațierea rămâne transparentă. Mecanica seamănă cu modelul CSS box: padding → background funcționează ca margin + background; background → padding — ca background + padding în interior. Dezvoltatorul trebuie să rețină: padding mai întâi = spațiere externă, padding după = internă.

Modificatori personalizați

Dacă modificatorii încorporați nu sunt suficienți, se creează unul personalizat prin Modifier.composed { ... } sau Modifier.then(). În interiorul modificatorului personalizat pot fi utilizate măsurători de layout (Modifier.layout { measurable, constraints -> ... }), desenare (Modifier.drawWithContent { ... }), gesturi (Modifier.pointerInput { ... }). Exemplu: modificator pentru animație pulsantă la apăsare — măsoară dimensiunea, la clic pornește animația de scalare prin animateFloatAsState.

Pentru animații, Compuse oferă animate*AsState (animateFloatAsState, animateColorAsState, animateDpAsState) — valorile se animează între starea veche și cea nouă la modificare. Dacă este necesară animația apariției/dispariției — AnimatedVisibility și AnimatedContent cu tranziții încorporate (fade, slide, expand). Toate animațiile funcționează pe graphics layer, fără a provoca compoziție suplimentară.

Side Effects: LaunchedEffect, DisposableEffect, remember

Funcțiile Composable nu ar trebui să execute acțiuni secundare direct (cereri de rețea, temporizatoare, abonamente) — ele sunt apelate la fiecare recompoziție, ceea ce ar duce la duplicarea cererilor. Pentru efecte secundare, Compose oferă familia de funcții Effect: LaunchedEffect pornește o corutină la intrarea în compoziție și o anulează la ieșire, DisposableEffect — pentru resurse care necesită curățare explicită (senzori, 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("Valoare: $sensorValue")
}

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

LaunchedEffect(userId) se repornește dacă userId s-a modificat — corutina anterioară este anulată, una nouă pornește cu noul userId. Aceasta elimină gestionarea manuală a anulării cererilor. DisposableEffect(Unit) — efect cu cheia fixă Unit, se declanșează la intrarea în compoziție și apelează onDispose la ieșire. SensorReader înregistrează un ascultător și se dezabonează la părăsirea ecranului — fără risc de scurgere de memorie.

rememberCoroutineScope

Dacă corutina trebuie pornită nu la intrarea în compoziție, ci la un eveniment (apăsarea unui buton), se utilizează rememberCoroutineScope(). Acesta returnează un CoroutineScope legat de ciclul de viață al Composable, fără a necesita DisposableEffect. Exemplu: pornirea unei cereri de rețea la clic pe buton — scope.launch { viewModel.loadData() }.

Jetpack Compose vs View System: comparație

Alegerea între Compose și View System — principala întrebare arhitecturală a dezvoltatorului Android în 2026. Ambele tehnologii sunt suportate de Google, dar Compose este direcția principală în care Google investește resurse. View System primește doar remedieri critice și nu se dezvoltă. Diferența se manifestă în sintaxă, gestionarea stării, performanță și timpul de dezvoltare.

Pentru proiecte noi, Google recomandă Jetpack Compose ca standard de dezvoltare UI. View System rămâne pentru suportul codului scris înainte de 2021 și cazurile în care este necesară o dimensiune minimă APK (de exemplu, pentru piețe emergente cu dispozitive entry-level). Compose reduce volumul codului UI cu 30–50% față de View System datorită sintaxei declarative și animațiilor încorporate.