Jetpack Compose u mobilnom razvoju: šta je to, ključni koncepti i kako radi

Osnove Jetpack Compose-a (@Composable, Composition, Recomposition)

@Composable — anotacija koja pretvara funkciju u Composable. Composable funkcije su gradivni blokovi UI-ja. One ne vraćaju View, već emituju elemente u Composition. Composition — UI stablo izgrađeno od poziva Composable funkcija. Compose poredi novo stablo sa starim i ažurira samo promenjene delove.

Recomposition

Recomposition — ponovno pokretanje Composable funkcija pri promeni stanja. Compose prati koja se stanja čitaju u svakoj funkciji. Kada se stanje promeni, Compose ponovo pokreće samo funkcije koje čitaju to stanje (Smart Recomposition). Recomposition je optimističan: može se pokrenuti više puta, stoga funkcije moraju biti čiste (bez sporednih efekata). Sporedni efekti idu u LaunchedEffect ili DisposableEffect. Composable funkcije ne mogu biti suspend. Pozivaju se iz drugih Composable funkcija. Redosled poziva nije garantovan (Compose može menjati redosled).

// Primer Composable-a sa State Hoisting i 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 — deklarativno stablo. Recomposition — pametno ponovno pokretanje. IT Sectr preporučuje praćenje stabilnosti tipova — nestabilni tipovi uzrokuju prekomernu rekompoziciju.

CompositionLocal

CompositionLocal — implicitno prosleđivanje podataka u Compose-u. Analogno @Environment u SwiftUI-ju. CompositionLocalProvider — postavljanje vrednosti. current — čitanje. Koristi se za: Theme (MaterialTheme), ContentScale, Density. Statički CompositionLocal — za konfiguraciju bez promena. Dinamički CompositionLocal — za promenljive vrednosti (teme). IT Sectr preporučuje korišćenje CompositionLocal-a za globalne konfiguracije i eksplicitnih parametara za podatke.

Stanje (remember, mutableStateOf, State Hoisting)

remember — čuva vrednost između rekompozicija. mutableStateOf — stvara vidljivo stanje (MutableState<T>). Pri promeni, pokreće rekompoziciju. State Hoisting — obrazac: stanje se podiže u roditeljsku komponentu, dete dobija vrednost + povratni poziv. State (nepromenljiv) — samo čitanje. MutableState — čitanje + pisanje. rememberSaveable — opstaje pri rotaciji/smrti procesa.

State Hoisting

State Hoisting — princip: state down, events up. Stanje se čuva u roditelju i prosleđuje komponentama deteta kroz parametre. Komponente deteta prijavljuju promene kroz lambda izraze (povratni poziv). Prednosti: mogućnost ponovnog korišćenja, testiranje, jedinstveni izvor istine. Primer: umesto da MyTextField čuva sopstveno stanje, roditelj čuva string i prosleđuje ga kroz value + onValueChange.

Izvedeno stanje

derivedStateOf — izračunato stanje, ponovo se izračunava samo kada se zavisnosti promene. Koristi se za filtriranje, konverziju, validaciju. snapshotFlow — pretvara State u Flow. Koristi se za reaktivne lance. collectAsState — prikuplja Flow u State unutar Composable-a. IT Sectr preporučuje derivedStateOf za izračunate vrednosti i snapshotFlow za povezivanje State-a sa korutinama.

Kontejneri (Column, Row, Box, LazyColumn)

Column — vertikalni raspored (analogno LinearLayout vertikalnom). Row — horizontalni raspored. Box — složeni raspored (analogno FrameLayout-u). LazyColumn — vertikalna lista koja se može pomerati sa lenjim učitavanjem. LazyRow — horizontalna lista koja se može pomerati. Scaffold — glavna struktura ekrana: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — gornja traka. BottomNavigation — donja navigacija (NavigationBar u Material 3). Modifier — lanac: .fillMaxWidth().padding(8.dp).clickable { }. Redosled modifikatora je važan — svaki stvara novi omotač.

Optimizacija LazyColumn-a

LazyColumn — virtuelizovana lista. Prikazuje samo vidljive elemente. Optimizacija: 1) key — jedinstveni ključ za stavku, 2) contentType — grupisanje stavki po tipu, 3) itemContent — minimizacija rekompozicije unutar stavke, 4) LazyVerticalGrid / LazyHorizontalGrid — za mreže. LazyLayout — prilagođeni lenji raspored. Paging 3 + Compose — paginacija kroz collectAsLazyPagingItems. IT Sectr preporučuje key(item) za sve LazyColumn za predvidivu rekompoziciju.

Navigacija (NavController, NavHost)

Navigation Compose — biblioteka za navigaciju. NavController — upravlja stekom odredišta. NavHost — kontejner za graf navigacije. composable("route") — registracija odredišta. navController.navigate("route") — navigacija. popBackStack() — povratak. Argumenti: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). Duboko povezivanje kroz intentFilter. BottomNavigation — integracija sa NavController-om: NavBarItem → navigate + popUpTo.

Napredna navigacija

Višestruki stekovi unazad — odvojeni stek unazad za svaku karticu BottomNavigation-a. SavedStateHandle — čuvanje argumenata pri smrti procesa. NavArgs — tipski bezbedni argumenti (Kotlin 2.0+). Duboki linkovi — URL šeme za spoljne linkove. Prediktivni gest unazad (Android 14+) — podrška za gest unazad sa pregledom. IT Sectr preporučuje korišćenje NavArgs za tipsku sigurnost i višestruke stekove unazad za BottomNavigation.

Efekti (LaunchedEffect, DisposableEffect)

LaunchedEffect — pokreće suspend blok u Composition-u. Otkazuje se pri napuštanju Composition-a. Ponovo se pokreće pri promeni keys. Koristi se za: učitavanje podataka, tajmere, animacije. DisposableEffect — za resurse koji zahtevaju čišćenje: onDispose { } — odjava sa listener-a, zatvaranje veza. SideEffect — sinhroni efekat (svaka rekompozicija). Koristi se za: evidentiranje, sinhronizaciju sa ne-Compose kodom. IT Sectr preporučuje LaunchedEffect za učitavanje podataka i DisposableEffect za čišćenje.

Compose — funkcija + modifikator. SwiftUI — struct + modifikator. Koncepti su slični, sintaksa je drugačija. IT Sectr preporučuje učenje oba frejmvorka — razumevanje jednog olakšava učenje drugog.

Obrasci efekata

rememberCoroutineScope — pristup CoroutineScope-u izvan LaunchedEffect-a (npr. pri kliku na dugme). snapshotFlow — pretvaranje State-a u Flow za lance. produceState — pretvaranje ne-Compose izvora u State. animateFloatAsState i animateColorAsState — animacije kroz efekte. IT Sectr preporučuje rememberCoroutineScope za UI događaje i LaunchedEffect za automatsko učitavanje.

Temiranje (MaterialTheme, Material3)

MaterialTheme — globalna tema Compose-a. Boje, tipografija, oblici. MaterialTheme { } — obavija celu aplikaciju. Material3 (M3) — Google dizajn sistem 2023+. Dynamic Colors — prilagođavanje pozadini (Android 12+). TextStyle — konfiguracija teksta: fontSize, fontWeight, lineHeight. Shape — zaobljavanje uglova. Elevation — senke. IT Sectr preporučuje Material3 podrazumevano i Dynamic Colors za moderne uređaje.

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

Animacije (animate*, AnimatedVisibility)

animateFloatAsState — animira Float vrednost. animateColorAsState — animira boju. animateDpAsState — animira veličinu. AnimatedVisibility — prikaži/sakrij sa .animateEnterExit(). AnimatedContent — animacija pri promeni sadržaja (crossfade, slide). updateTransition — animacija zasnovana na enum stanju. Animatable — prilagođena animacija kroz Animatable interfejs. IT Sectr preporučuje AnimatedVisibility za liste i AnimatedContent za promene ekrana.

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

Testiranje (Compose UI Test)

Compose UI Test — testiranje Compose ekrana. createComposeRule() — JUnit pravilo. setContent { } — postavljanje Composable-a. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — pronalaženje elemenata. performClick, performTextInput, performScrollTo — akcije. assertIsDisplayed, assertTextEquals — tvrdnje. Semantics — Semantics stablo za pristupačnost i testove. IdlingResource — čekanje asinhronih operacija. Testovi snimaka ekrana — Papercuts, Roborazzi. IT Sectr preporučuje UI testove za svaki ekran i jedinične testove za ViewModel.

WindowSizeClass — prilagođavanje veličini ekrana (Compact, Medium, Expanded). Povezano sa responzivnim rasporedima Material3. Koristi se u Adaptive Navigation Suite za automatsko prebacivanje sa BottomNavigation na NavigationRail. IT Sectr preporučuje WindowSizeClass za prilagođavanje Compose-a na tabletima i računarima.

Paging 3 + Compose — biblioteka za paginaciju od Google-a. PagingData — tok stranica. PagingConfig — podešavanja (pageSize, prefetchDistance). collectAsLazyPagingItems() — prikupljanje u Compose-u. PagingSource — prilagođeni izvor. RemoteMediator — hibridno učitavanje (mreža + BP). Paging 3 je standard za liste sa beskonačnim skrolovanjem u Compose-u.