Die Image-Composable
Zeichnen Sie eine Drawable-Ressource auf dem Bildschirm.
Die Image-Composable ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Pictures, the Compose Way
Jede App zeigt Bilder, und in Compose zeichnest du sie mit dem Image-Composable. Es ist der deklarative Ersatz für das alte ImageView. 🖼️
You Need a Painter
Image erwartet keine rohe Ressourcen-ID. Es erwartet einen Painter, ein kleines Objekt, das weiß, wie man Ihr Bild auf den Bildschirm zeichnet.
painterResource Loads Drawables
Um ein Drawable in „res“ in einen Painter zu verwandeln, rufen Sie painterResource mit seiner Ressourcen-ID auf. Dadurch wird Ihr PNG- oder Vektor-Asset eingelesen.
val logo = painterResource(id = R.drawable.logo)Your First Image
Übergeben Sie diesen Painter an Image und er wird auf dem Bildschirm angezeigt. Diese einzelne Zeile zeichnet Ihr Drawable, wo immer sich die Composable befindet.
Image(painter = painterResource(R.drawable.logo), contentDescription = null)contentDescription Is Required
Image verlangt immer nach einer contentDescription. Screenreader lesen diese vor, beschreiben Sie das Bild also mit wenigen klaren Worten.
Image(painter = logo, contentDescription = "Company logo")Decorative? Pass null
Wenn ein Bild rein dekorativ ist und keine Bedeutung vermittelt, setzen Sie contentDescription auf null, damit TalkBack es überspringt, anstatt Rauschen vorzulesen.
Vectors Scale Cleanly
Compose liebt Vektorgrafiken. Ein Vektor bleibt in jeder Größe haarscharf, weil er auf Mathematik und nicht auf festen Pixeln basiert, sodass er niemals unscharf aussieht.
Size It with a Modifier
Ein Bild wird standardmäßig in der Bitmap-Größe gezeichnet. Fügen Sie einen Modifier.size hinzu, um es genau an die Dimensionen anzupassen, die Ihr Layout benötigt.
Image(painter = logo, contentDescription = null, modifier = Modifier.size(96.dp))Bitmaps from the Network
painterResource verarbeitet nur lokale Assets. Für entfernte URLs greifen Sie auf eine Loader-Bibliothek zurück, wobei Coil mit rememberAsyncImagePainter die beliebteste ist.
Tinting an Image
Sie können ein einfaches Bild mit einem colorFilter umfärben. Dies eignet sich hervorragend für monochrome Symbole, die Sie an Ihre Themenfarbe anpassen möchten.
Image(painter = logo, contentDescription = null,
colorFilter = ColorFilter.tint(Color.Blue))Image vs Icon
Verwenden Sie Image für Fotos und detailreiche Grafiken. Für kleine, thematisch eingefärbte Symbole ist die leichtere Icon-Composable meist die bessere Wahl.
Quick Check
Welches Argument fordert die Image-Composable neben dem Painter immer?
Recap: Drawing Images
Du hast gelernt, dass Image ein Bild aus painterResource zeichnet, immer eine contentDescription benötigt und mit einem Modifier skaliert wird. Als Nächstes: Material-Icons! ✨
Häufig gestellte Fragen
Ist die Lektion „Die Image-Composable“ kostenlos?
Ja — der vollständige Text von „Die Image-Composable“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Die Image-Composable“?
Zeichnen Sie eine Drawable-Ressource auf dem Bildschirm. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?
Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Die Image-Composable“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?
Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Die Image-Composable
- Material Icons mit Icon
- ContentScale und Zuschneiden
- Bilder zuschneiden und formen