Android Academy · Lektion

Text, bild och knapp

Använd de grundläggande inbyggda composables.

Lektion 3 av 413 steg

Text, bild och knapp är en gratis lektion i Android Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Android Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Android Academy innehåller totalt 4 lektioner.

Inbyggda composables

Compose levereras med färdiga composables för vanligt UI. Tre som Ni kommer att använda hela tiden är Text, Image och Button.

Text-composable

Text visar en sträng. Den viktigaste parametern är text.

@Composable
fun Title() {
    Text(text = "My App")
}

Formatera text

Text tar emot många formateringsparametrar, till exempel fontSize, color och fontWeight.

Text(
    text = "Big Bold",
    fontSize = 24.sp,
    color = Color.Blue,
    fontWeight = FontWeight.Bold
)

sp kontra dp

Teckenstorlekar använder .sp (skalningsoberoende pixlar) så att de följer användarens inställning för textstorlek och tillgänglighet. Layoutstorlekar använder .dp (densitetsoberoende pixlar).

Använd sp för text och dp för allt annat.

Image-composable

Image visar en bild. Använd painterResource för att läsa in en drawable och ange alltid contentDescription för tillgänglighet.

Image(
    painter = painterResource(id = R.drawable.logo),
    contentDescription = "App logo"
)

contentDescription

contentDescription läses upp av skärmläsare. För dekorativa bilder utan betydelse skickar Ni in null. För betydelsefulla bilder anger Ni en kort beskrivning.

Button-composable

Button är ett klickbart element. Den viktigaste parametern är onClick, en lambda som körs när knappen trycks på. Knappens etikett placeras i dess innehållslambda — vanligtvis en Text.

Button(onClick = { /* do something */ }) {
    Text(text = "Tap me")
}

Reagera på klick

I lambdan onClick placerar Ni logiken — uppdatera tillstånd, navigera eller anropa en funktion.

Button(onClick = { println("Clicked!") }) {
    Text(text = "Log")
}

Innehållslambdor

Observera att Button tar emot en avslutande innehållslambda. Allt Ni placerar inuti den renderas som knappens innehåll, så en knapp kan innehålla en ikon och text, inte bara en etikett.

Button(onClick = { }) {
    Text(text = "Save")
}

Kombinera dem

I verkliga användargränssnitt kombineras dessa composables. Här staplas en rubrik, en bild och en knapp i en Column.

@Composable
fun Card() {
    Column {
        Text(text = "Profile")
        Image(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = "Avatar"
        )
        Button(onClick = { }) { Text("Follow") }
    }
}

Det finns många fler

Utöver dessa tre erbjuder Compose TextField, Icon, Checkbox, Switch och många fler. Samma mönster gäller: skicka in parametrar och innehållslambdor.

Snabbkontroll

Vilken parameter i Button kör din kod när användaren trycker på den?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har arbetat med tre centrala composables:

Text — visar strängar; formateras med fontSize och color (använd sp).
Image — painterResource + contentDescription.
Button — en onClick-lambda samt en content-lambda.

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: 36
Lektioner: 152

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Text, bild och knapp” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Android Academy, inklusive ”Text, bild och knapp”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Android Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Text, bild och knapp”?

Använd de grundläggande inbyggda composables. Ni övar på Android 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 Android Academy?

Du behöver inga förkunskaper. Utbildningen i Android 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 3 av 4.

Hur lång tid tar lektionen ”Text, bild och knapp”?

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 Android Academy-lektionen?

Ja. Varje Android 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

← Tillbaka till Android Academy