Android Academy · leksjon

Tekst, bilde og knapp

Bruk de grunnleggende innebygde composable-komponentene.

Leksjon 3 av 413 trinn

Tekst, bilde og knapp er en gratis leksjon i Android Academy på CoddyKit. Dette er leksjon 3 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.

Innebygde komponerbare funksjoner

Compose leveres med ferdige komponerbare funksjoner for vanlig UI. Tre De kommer til å bruke hele tiden, er Text, Image og Button.

Text-funksjonen

Text viser en tekststreng. Den viktigste parameteren er text.

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

Formatere tekst

Text har mange parametere for formatering, for eksempel fontSize, color og fontWeight.

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

sp kontra dp

Skriftstørrelser bruker .sp (skaleringsuavhengige piksler), slik at de respekterer brukerens tilgjengelighetsinnstilling for skriftstørrelse. Layoutstørrelser bruker .dp (tetthetsuavhengige piksler).

Bruk sp for tekst og dp for alt annet.

Image-funksjonen

Image viser et bilde. Bruk painterResource for å laste inn en drawable, og oppgi alltid contentDescription av hensyn til tilgjengelighet.

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

contentDescription

contentDescription leses høyt av skjermlesere. For dekorative bilder uten betydning sender De inn null. For bilder med betydning oppgir De en kort beskrivelse.

Button-funksjonen

Button er et klikkbart element. Den viktigste parameteren er onClick, en lambda som kjøres når knappen trykkes. Knappens etikett legges i innholdslambdaen — vanligvis en Text.

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

Reagere på klikk

onClick-lambdaen er stedet der De legger logikken — oppdater tilstand, naviger eller kall en funksjon.

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

Innholdslambdaer

Legg merke til at Button tar en etterfølgende innholdslambda. Alt De legger inn der, gjengis som innholdet i knappen, så en knapp kan inneholde et ikon og tekst, ikke bare en etikett.

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

Kombinere dem

Et virkelig UI kombinerer disse komponerbare funksjonene. Her ligger en tittel, et bilde og en knapp stablet i en Column.

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

Det finnes mange flere

I tillegg til disse tre tilbyr Compose TextField, Icon, Checkbox, Switch og mange flere. Det samme mønsteret gjelder: send inn parametere og innholdslambdaer.

Hurtigsjekk

Hvilken parameter i Button kjører koden når brukeren trykker på den?

Besvar den i den interaktive leksjonen

Oppsummering

Du har møtt tre sentrale composables:

Text — viser strenger; styles med fontSize og color (bruk sp).
Image — painterResource + contentDescription.
Button — en onClick-lambda samt en innholdslambda.

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 «Tekst, bilde og knapp» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Android Academy, inkludert «Tekst, bilde og knapp», 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 «Tekst, bilde og knapp»?

Bruk de grunnleggende innebygde composable-komponentene. 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 3 av 4.

Hvor lang tid tar leksjonen «Tekst, bilde og knapp»?

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