Image-Composable
Rita en drawable-resurs på skärmen.
Image-Composable är en gratis lektion i Jetpack Compose Academy på CoddyKit. Detta är lektion 1 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.
Bilder på Compose-vis
Alla appar visar bilder, och i Compose ritar du dem med composable-funktionen Image. Den är det deklarativa alternativet till den gamla ImageView. 🖼️
Du behöver en Painter
Image tar inte emot ett rått resurs-id. Den tar emot en painter, ett litet objekt som vet hur bilden ska ritas på skärmen.
painterResource läser in drawables
För att omvandla en drawable i res till en painter anropar du painterResource med dess resurs-id. Då läses din PNG- eller vektorgrafik in.
val logo = painterResource(id = R.drawable.logo)Din första bild
Skicka paintern till Image, så visas den på skärmen. Den här enda raden ritar din drawable där composable-funktionen finns.
Image(painter = painterResource(R.drawable.logo), contentDescription = null)contentDescription krävs
Image frågar alltid efter en contentDescription. Skärmläsare läser upp den, så beskriv bilden med några tydliga ord.
Image(painter = logo, contentDescription = "Company logo")Dekorativ? Skicka null
Om en bild bara är dekorativ och inte tillför någon betydelse anger du contentDescription som null, så hoppar TalkBack över den i stället för att läsa upp onödig information.
Vektorer skalas skarpt
Compose gillar vektor-drawables. En vector förblir knivskarp i alla storlekar eftersom den består av matematik, inte fasta pixlar, och därför aldrig blir suddig.
Ändra storlek med en Modifier
Som standard ritas en Image i bitmappens storlek. Lägg till en Modifier.size för att ge den exakt de mått som layouten behöver.
Image(painter = logo, contentDescription = null, modifier = Modifier.size(96.dp))Bitmapbilder från nätverket
painterResource hanterar bara lokala resurser. För fjärradresser använder du ett inläsningsbibliotek, där Coil med rememberAsyncImagePainter är det populäraste alternativet.
Färga om en bild
Du kan färga om en enkel bild med en colorFilter. Det passar bra för enfärgade ikoner som ska matcha temats färg.
Image(painter = logo, contentDescription = null,
colorFilter = ColorFilter.tint(Color.Blue))Image jämfört med Icon
Använd Image för foton och detaljerad grafik. För små, temafärgade symboler är den enklare composable-funktionen Icon oftast ett bättre val.
Snabb kontroll
Vilket argument kräver Image-composable-funktionen alltid utöver paintern?
Sammanfattning: rita bilder
Du har lärt dig att Image ritar en painter från painterResource, alltid behöver en contentDescription och ändrar storlek med en modifierare. Nästa steg: Material-ikoner! ✨
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 ”Image-Composable” gratis?
Ja – hela texten till ”Image-Composable” 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 ”Image-Composable”?
Rita en drawable-resurs på skärmen. 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 1 av 4.
Hur lång tid tar lektionen ”Image-Composable”?
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.