Image-Composable
Tegn en drawable-ressource på skærmen.
Image-Composable er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Jetpack Compose Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Billeder på Compose-måden
Alle apps viser billeder, og i Compose tegner du dem med Image-composablet. Det er den deklarative erstatning for den gamle ImageView. 🖼️
Du skal bruge en painter
Image tager ikke et råt ressource-id. Den tager en painter, et lille objekt, der ved, hvordan dit billede skal tegnes på skærmen.
painterResource indlæser drawables
Hvis du vil omdanne en drawable i res til en painter, kalder du painterResource med dens ressource-id. Det indlæser dit PNG- eller vektor-aktiv.
val logo = painterResource(id = R.drawable.logo)Dit første billede
Giv denne painter til Image, så vises den på skærmen. Denne ene linje tegner din drawable, uanset hvor composablet er placeret.
Image(painter = painterResource(R.drawable.logo), contentDescription = null)contentDescription er påkrævet
Image beder altid om en contentDescription. Skærmlæsere læser den højt, så beskriv billedet med nogle få tydelige ord.
Image(painter = logo, contentDescription = "Company logo")Dekorativt? Giv null
Hvis et billede udelukkende er dekorativt og ikke tilføjer nogen betydning, skal du sætte contentDescription til null, så TalkBack springer det over i stedet for at læse unødvendig information op.
Vektorer skalerer pænt
Compose fungerer godt med vektor-drawables. En vector forbliver knivskarp ved enhver størrelse, fordi den består af matematik og ikke faste pixels, så den bliver aldrig sløret.
Angiv størrelsen med en Modifier
Et Image tegnes som standard i bitmap-billedets størrelse. Tilføj en Modifier.size for at give det præcis de mål, dit layout har brug for.
Image(painter = logo, contentDescription = null, modifier = Modifier.size(96.dp))Bitmaps fra netværket
painterResource håndterer kun lokale aktiver. Til fjernadresser bruger du et indlæsningsbibliotek, hvor det mest populære er Coil med rememberAsyncImagePainter.
Farvning af et billede
Du kan ændre farven på et enkelt billede med en colorFilter. Det er praktisk til monokrome ikoner, som skal matche din temafarve.
Image(painter = logo, contentDescription = null,
colorFilter = ColorFilter.tint(Color.Blue))Image eller Icon
Brug Image til fotos og detaljerede illustrationer. Til små symboler, der skal farves efter temaet, er det lettere Icon-composable normalt det bedste valg.
Hurtigt tjek
Hvilket argument kræver Image-composablet altid ud over painter?
Opsummering: Tegning af billeder
Du har lært, at Image tegner en painter fra painterResource, altid skal have en contentDescription og ændrer størrelse med en modifier. Næste emne: Material-ikoner! ✨
Lær Kotlin med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Image-Composable” gratis?
Ja — hele teksten til “Image-Composable” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Jetpack Compose Academy-kurset, skal du opgradere til CoddyKit PRO. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Image-Composable”?
Tegn en drawable-ressource på skærmen. Du øver dig i Jetpack Compose Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Jetpack Compose Academy?
Der kræves ingen tidligere erfaring. Jetpack Compose Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Image-Composable”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Jetpack Compose Academy-lektion?
Ja. Alle Jetpack Compose Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.