Jetpack Compose: vad det är, nyckelbegrepp och composable funktioner

Vad är Jetpack Compose?

Jetpack Compose — är ett deklarativt ramverk från Google för att bygga Android-användargränssnitt, tillkännagavs 2019 och nådde en stabil version 2021. Till skillnad från det gamla View System (XML + Activity/Fragment), använder Compose annoterade Kotlin-funktioner — @Composable. Gränssnittet beskrivs helt i Kotlin: det finns ingen uppdelning mellan XML och kod. Detta eliminerade en klass av fel relaterade till id-mismatch i XML och Kotlin (type-safe synthetic hjälpte inte vid refaktorering).

Compose är byggt på eget renderingssystem — Canvas, inte bundet till View-hierarkin. Varje Composable ritar direkt på Canvas, förbi onMeasure/onDraw i View System. Detta ger prestandaökning på komplexa skärmar: i Googles tester (2023) renderades en Compose-skärm med 200 element 40% snabbare än en analog på RecyclerView + ViewHolder.

Minimikrav och kompatibilitet

För Compose krävs minSdk 21 (Android 5.0) och Kotlin 1.9+. Compose BOM (Bill of Materials) synkroniserar versioner av alla Compose-bibliotek. Ramverket är kompatibelt med befintlig kod på View System: Compose bäddas in via ComposeView i XML, och gamla View via AndroidView i Compose-hierarkin. Enligt Google Play Console (2025) täcker Android 5.0+ 97% av aktiva enheter, så kompatibilitet är ingen begränsning för de flesta projekt.

Composable funktioner och komposition

@Composable — är en annotering som gör om en vanlig Kotlin-funktion till en UI-byggsten. En Composable funktion beskriver hur ett gränssnittsfragment — text, knapp, lista — ska se ut. Istället för att returnera ett värde avger funktionen UI-komponenter till kompositionen. Detta liknar en generator: varje funktion lägger till element på skärmen vid anrop.

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

Funktionen ProfileCard tar emot parametrar (name, avatarUrl) och avger Card → Row → AsyncImage + Text. Komposition — är ett träd av avgivna komponenter i ett varv. Om parametrar inte har ändrats hoppar Compose över funktionsanropet (recomposition skip). Om endast name har ändrats kommer endast Text att anropas, övriga element ritas inte om. Sådan intelligent recomposition — är den viktigaste prestandafördelen med Compose jämfört med manuell optimering av View System.

Slots och Content Lambda

Composable funktioner använder aktivt slots — trailing lambda, content: @Composable (() -> Unit). Detta gör det möjligt att skapa behållare: Card, Column, Row accepterar content-lambda och innehållet bäddas in på slot-platsen. Slot API ersatte XML-attribut som android:layout_gravity — nu bestäms placeringen av underordnade element av Kotlin-kod i content-blocket.

Tillståndshantering i Compose

Tillstånd i Compose — är varje värde som kan förändras över tid. När tillståndet ändras schemalägger Compose recomposition för alla komponenter som läser detta tillstånd. Mekanismen påminner om React hooks: mutableStateOf returnerar MutableState, läsning av .value prenumererar automatiskt den aktuella kompositionen på ändringar.

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

    Column(modifier = Modifier.padding(16.dp)) {
        Text("Tryckt: $count")
        Button(onClick = { count++ }) {
            Text("Öka")
        }
    }
}

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

remember bevarar värdet mellan rekompositioner — annars skulle mutableStateOf skapas på nytt vid varje UI-uppdatering. collectAsState() konverterar StateFlow från ViewModel till Compose-kompatibelt tillstånd. Rekommendation — för skärmtillstånd använd ViewModel med StateFlow, för lokalt tillstånd (t.ex. utfällt kort) — mutableStateOf. Denna uppdelning motsvarar principen om ”smarta/ dumma” komponenter.

State Hoisting

State Hoisting — mönster för att lyfta tillstånd från en underordnad komponent till en överordnad. Föräldern skickar värde och callback via parametrar, den underordnade anropar callback vid ändring. Föräldern lagrar mutableStateOf, den underordnade — endast parametrar. Detta gör komponenten återanvändbar och testbar: samma TextField kan användas med valfri datakälla.

Modifier — konfiguration av utseende

Modifier — är ett objekt som beskriver transformationer av en Composable: storlek, mellanrum, bakgrund, klickhantering, animation, scrollning. Modifierare tillämpas via en anropskedja: Modifier.fillMaxWidth().padding(16.dp).background(Color.Blue).clickable { }. Varje anrop returnerar en ny Modifier med den tillagda egenskapen — utan mutation av det ursprungliga objektet.

Ordningen på modifierare är viktig. Modifier.padding(16.dp).background(Color.Blue) färgar området med mellanrum. Modifier.background(Color.Blue).padding(16.dp) färgar den inre rektangeln medan mellanrummet förblir transparent. Mekanik liknar CSS box-modell: padding → background fungerar som margin + background; background → padding — som background + padding inuti. Utvecklaren behöver bara komma ihåg: padding först = yttre mellanrum, padding sedan = inre.

Anpassade modifierare

Om inbyggda modifierare inte räcker skapas en anpassad modifierare via Modifier.composed { ... } eller Modifier.then(). Inuti en anpassad modifierare kan layoutmätningar (Modifier.layout { measurable, constraints -> ... }), ritning (Modifier.drawWithContent { ... }), gester (Modifier.pointerInput { ... }) användas. Exempel: modifierare för pulserande animation vid tryckning — mäter storlek, vid klick startar skalningsanimation via animateFloatAsState.

För animationer tillhandahåller Compose animate*AsState (animateFloatAsState, animateColorAsState, animateDpAsState) — värden animeras mellan gammalt och nytt tillstånd vid ändring. Om animation för visning/försvinnande behövs — AnimatedVisibility och AnimatedContent med inbyggda övergångar (fade, slide, expand). Alla animationer fungerar på graphics layer, utan att orsaka onödig komposition.

Side Effects: LaunchedEffect, DisposableEffect, remember

Composable funktioner bör inte utföra sidoeffekter direkt (nätverksförfrågningar, timer, prenumerationer) — de anropas vid varje rekomposition, vilket skulle leda till dubblerade förfrågningar. För sidoeffekter tillhandahåller Compose Effect-funktionsfamiljen: LaunchedEffect startar en coroutine vid inträde i kompositionen och avbryter vid utträde, DisposableEffect — för resurser som kräver explicit rensning (sensorer, 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("Värde: $sensorValue")
}

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

LaunchedEffect(userId) startas om om userId har ändrats — föregående coroutine avbryts, en ny startar med det nya userId. Detta eliminerar manuell hantering av avbrott av förfrågningar. DisposableEffect(Unit) — effekt med fast nyckel Unit, utlöses vid inträde i kompositionen och anropar onDispose vid utträde. SensorReader registrerar en lyssnare och avregistrerar sig vid lämnande av skärmen — utan risk för minnesläckor.

rememberCoroutineScope

Om en coroutine måste startas inte vid inträde i kompositionen utan vid en händelse (knapptryckning), används rememberCoroutineScope(). Den returnerar en CoroutineScope bunden till Composable-objektets livscykel, utan att kräva DisposableEffect. Exempel: starta en nätverksförfrågan vid klick på en knapp — scope.launch { viewModel.loadData() }.

Jetpack Compose vs View System: jämförelse

Valet mellan Compose och View System — den viktigaste arkitekturfrågan för Android-utvecklaren 2026. Båda teknologierna stöds av Google, men Compose är den huvudsakliga riktningen som Google lägger resurser på. View System får endast kritiska korrigeringar och utvecklas inte. Skillnaden visas i syntax, tillståndshantering, prestanda och utvecklingstid.

För nya projekt rekommenderar Google Jetpack Compose som standard för UI-utveckling. View System finns kvar för stöd av kod skriven före 2021 och fall där minimal APK-storlek krävs (t.ex. för tillväxtmarknader med enheter på nybörjarnivå). Compose minskar mängden UI-kod med 30–50% jämfört med View System tack vare deklarativ syntax och inbyggda animationer.