Android Academy · Lektion

Text, Bild und Button

Verwenden Sie die grundlegenden integrierten Composables.

Text, Bild und Button ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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 Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Integrierte Composables

Compose wird mit fertigen Composables für gängige UI-Elemente ausgeliefert. Drei, die Sie ständig verwenden werden, sind Text, Image und Button.

Das Text-Composable

Text zeigt eine Zeichenkette an. Sein wichtigster Parameter ist text.

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

Text formatieren

Text akzeptiert viele Parameter zur Formatierung, etwa fontSize, color und fontWeight.

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

sp vs. dp

Für Schriftgrößen wird .sp (skalierungsunabhängige Pixel) verwendet, damit die Einstellung der Schriftgröße für Barrierefreiheit berücksichtigt wird. Für Layoutgrößen wird .dp (dichteunabhängige Pixel) verwendet.

Verwenden Sie sp für Text und dp für alles andere.

Das Image-Composable

Image zeigt ein Bild an. Verwenden Sie painterResource, um eine Drawable-Ressource zu laden, und geben Sie aus Gründen der Barrierefreiheit immer contentDescription an.

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

contentDescription

contentDescription wird von Screenreadern vorgelesen. Übergeben Sie für dekorative Bilder ohne Bedeutung null. Bei bedeutungsvollen Bildern geben Sie eine kurze Beschreibung an.

Das Button-Composable

Button ist ein anklickbares Element. Sein wichtigster Parameter ist onClick, eine Lambda-Funktion, die beim Tippen ausgeführt wird. Das Label des Buttons kommt in seine Content-Lambda — normalerweise als Text.

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

Auf Klicks reagieren

In die Lambda-Funktion onClick schreiben Sie Ihre Logik — etwa den Zustand aktualisieren, navigieren oder eine Funktion aufrufen.

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

Content-Lambdas

Beachten Sie, dass Button eine nachgestellte Content-Lambda entgegennimmt. Alles, was Sie darin platzieren, wird als Inhalt des Buttons dargestellt. Ein Button kann daher ein Symbol und Text enthalten, nicht nur ein Label.

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

Sie kombinieren

In realen UIs werden diese Composables kombiniert. Hier werden ein Titel, ein Bild und ein Button in einer Column untereinander angeordnet.

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

Es gibt noch viele weitere

Neben diesen drei bietet Compose TextField, Icon, Checkbox, Switch und viele weitere Composables. Dasselbe Muster gilt: Parameter und Content-Lambdas übergeben.

Kurzer Check

Welcher Parameter von Button führt Ihren Code aus, wenn die Benutzerin oder der Benutzer darauf tippt?

Zusammenfassung

Sie haben drei zentrale Composables kennengelernt:

Text — zeigt Zeichenketten an; formatieren Sie es mit fontSize und color (verwenden Sie sp).
Image — painterResource + contentDescription.
Button — ein onClick-Lambda sowie ein Content-Lambda.

Häufig gestellte Fragen

Ist die Lektion „Text, Bild und Button“ kostenlos?

Ja — der vollständige Text von „Text, Bild und Button“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Text, Bild und Button“?

Verwenden Sie die grundlegenden integrierten Composables. Du übst Android 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 Android Academy zu starten?

Keine Vorkenntnisse erforderlich. Android 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 3 von 4.

Wie lange dauert die Lektion „Text, Bild und Button“?

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 Android Academy-Lektion Code schreiben und ausführen?

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

← Zurück zu Android Academy