Jetpack Compose Academy · Lektion

setContent: Här börjar ditt gränssnitt

Koppla ditt Composable-träd till Activity.

Lektion 4 av 413 steg

setContent: Här börjar ditt gränssnitt är en gratis lektion i Jetpack Compose Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Jetpack Compose Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Jetpack Compose Academy innehåller totalt 4 lektioner.

Anslut Compose till Android

Era Composables behöver en plats att visas på. Anropet setContent inuti en Activity fungerar som bryggan som överlämnar ert gränssnittsträd till Android-skärmen. 🔗

Inuti onCreate

Ni anropar setContent från onCreate i en Activity. Det är då Android meddelar appen att det är dags att visa en skärm.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent { Greeting() }
}

Det kräver en lambda

setContent tar emot en lambda, och inuti det blocket anropar ni era Composables. Allt inom klamrarna blir skärmens innehåll.

setContent {
    Greeting("Compose")
}

Lambdan är Composable

Lambdan är själv ett @Composable-omfång. Därför kan ni anropa vilken Composable som helst direkt i den utan någon ytterligare konfiguration.

En rot-Composable

En välstrukturerad app anropar här en enda root-Composable, ofta hela appen eller temat, som sedan nästlar in allt annat under sig.

setContent {
    MyApp()
}

Omslut med ert tema

De flesta appar omsluter roten med sitt theme så att färger och teckensnitt används överallt. Temat är bara ytterligare en Composable runt gränssnittet.

setContent {
    MyAppTheme {
        MyApp()
    }
}

Ersätter setContentView

I det äldre View-systemet anropade ni setContentView med en XML-layout. Compose ersätter det med setContent och en Composable-lambda.

Utökar ComponentActivity

Den Activity som använder setContent utökar vanligtvis ComponentActivity, den lättviktiga basklass som Compose är utformat för att fungera med.

class MainActivity : ComponentActivity() {
    // onCreate with setContent
}

Där trädet monteras

setContent är startpunkten. Härifrån bygger, placerar och ritar Compose hela trädet av Composables som ni anropar inuti det.

Lägg till Surface som bakgrund

Om ni omsluter innehållet med en Surface får det en temabaserad bakgrund och elevation, vilket är vanligt som första underordnade komponent under temat.

setContent {
    MyAppTheme {
        Surface { MyApp() }
    }
}

Ett setContent per skärm

Normalt anropar ni setContent en gång per Activity. Om ni vill visa annat innehåll ändrar ni tillståndet i trädet i stället för att anropa setContent igen.

Snabbkontroll

En sista kontroll av var Compose-gränssnittet börjar.

Sammanfattning

Nu vet ni var allt börjar: anropa setContent i onCreate, skicka in en Composable-lambda, omslut den med ert tema, så ritar Compose appen. 🎉

Gratis att börja

Lär dig Kotlin med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
30
Lektioner
120

Vanliga frågor

Är lektionen ”setContent: Här börjar ditt gränssnitt” gratis?

Ja – hela texten till ”setContent: Här börjar ditt gränssnitt” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Jetpack Compose Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Jetpack Compose Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”setContent: Här börjar ditt gränssnitt”?

Koppla ditt Composable-träd till Activity. Ni övar på Jetpack Compose Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Jetpack Compose Academy?

Du behöver inga förkunskaper. Utbildningen i Jetpack Compose Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”setContent: Här börjar ditt gränssnitt”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Jetpack Compose Academy-lektionen?

Ja. Varje Jetpack Compose Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Skriv en @Composable-funktion
  2. Direkta förhandsvisningar med @Preview
  3. Anropa Composables från Composables
  4. setContent: Här börjar ditt gränssnitt
← Tillbaka till Jetpack Compose Academy