Android Academy · leksjon

Hva er Jetpack Compose?

Forstå deklarativt brukergrensesnitt i Android.

Leksjon 1 av 413 trinn

Hva er Jetpack Compose? er en gratis leksjon i Android Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Android Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Android Academy inneholder totalt 4 leksjoner.

Hva er Jetpack Compose?

Jetpack Compose er Androids moderne verktøysett for å bygge native brukergrensesnitt. I stedet for å skrive XML-layoutfiler beskriver De UI-et direkte i Kotlin-kode.

Compose er deklarativt: De forteller det hvordan skjermen skal se ut for en bestemt tilstand, og det finner selv ut hvordan den skal tegnes og oppdateres.

Den gamle måten: XML-visninger

Tradisjonelt trengte en Android-skjerm to deler:

En XML-layout-fil som beskrev komponentene.
Kotlin-/Java-kode som finner visningene med findViewById og endrer dem.

Det var omstendelig og feilutsatt å holde XML-filen og koden synkronisert.

<!-- res/layout/activity_main.xml -->
<TextView
    android:id="@+id/greeting"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Imperativt kontra deklarativt

Med XML-visninger skriver De imperativ kode: hent en visning, og endre den deretter trinn for trinn.

Med Compose skriver De deklarativ kode: beskriv det endelige resultatet som en funksjon av dataene. Når dataene endres, tegner Compose automatisk det som trengs, på nytt.

// Imperative (old views)
val tv = findViewById<TextView>(R.id.greeting)
tv.text = "Hello"
tv.visibility = View.VISIBLE

Komponerbare funksjoner

Byggeklossen i Compose er den komponerbare funksjonen: en vanlig Kotlin-funksjon merket med @Composable som produserer UI.

Komponerbare funksjoner kan kalle andre komponerbare funksjoner, slik at De kan bygge skjermer av små, gjenbrukbare deler.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Ingen findViewById

I Compose finnes det ingen findViewById og ingen visnings-ID-er. UI-et er funksjonskallet. Hvis De vil vise en annen tekst, sender De ganske enkelt inn et annet argument og lar Compose komponere UI-et på nytt.

@Composable
fun Screen() {
    Greeting(name = "Ada")
    Greeting(name = "Linus")
}

UI som en funksjon av tilstanden

En sentral idé er: UI = f(state). Skjermen er resultatet av de komponerbare funksjonene gitt den gjeldende tilstanden. Endre tilstanden, så produserer den samme funksjonen et nytt UI.

Dette gjør UI-er forutsigbare og enklere å forstå.

Alt er Kotlin

Fordi komponerbare funksjoner er Kotlin-funksjoner, kan De bruke løkker, betingelser og variabler til å bygge UI. Det kreves ikke noe eget malspråk.

@Composable
fun Items(names: List<String>) {
    for (n in names) {
        Text(text = n)
    }
}

Mindre standardkode

Compose fjerner store mengder limkode. Det er ingen XML-inflatering, ingen adaptere for enkle lister og ingen manuell kobling mellom layout og logikk.

Resultatet er: færre filer og færre feil.

Kan brukes sammen med visninger

De trenger ikke å skrive om en hel app. Compose kan brukes sammen med det gamle View-systemet. De kan bygge inn Compose i en eksisterende XML-skjerm eller bygge inn en View i Compose.

Dette gjør at team kan migrere gradvis.

Dette trenger De

For å bruke Compose trenger De:

En nyere versjon av Android Studio.
Compose-avhengighetene i Gradle-filen.
En aktivitet som kaller setContent { } for å være vert for komponerbare funksjoner.

En liten skjerm

Her er en komplett, minimal Compose-skjerm. setContent er broen fra Android-Activity til Compose-verdenen.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "World")
        }
    }
}

Hurtigsjekk

Hva beskriver Jetpack Compose best?

Besvar den i den interaktive leksjonen

Oppsummering

De har lært at Jetpack Compose er et deklarativt, Kotlin-fokusert UI-verktøysett. Viktige ideer:

UI bygges av @Composable-funksjoner.
Ingen XML og ingen findViewById.
UI = f(state) — endre tilstanden, så tegner Compose UI-et på nytt.

Gratis å komme i gang

Lær deg Kotlin med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 36
Leksjoner: 152

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Hva er Jetpack Compose?» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Android Academy, inkludert «Hva er Jetpack Compose?», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Android Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Hva er Jetpack Compose?»?

Forstå deklarativt brukergrensesnitt i Android. Du øver på Android Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Android Academy?

Ingen tidligere erfaring er nødvendig. Android Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Hva er Jetpack Compose?»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Android Academy-leksjonen?

Ja. Alle Android Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Android Academy