Android Academy · Lektion

Schaltflächen und Klicks

Fügen Sie interaktive Schaltflächen hinzu.

Schaltflächen und Klicks ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Was ist ein Button?

Ein Button ist ein antippbares Composable. Wenn der Benutzer darauf tippt, führt Ihre App Code aus.

Buttons benötigen eine onClick-Aktion und anzuzeigenden Inhalt, normalerweise eine Textbeschriftung.

Button(onClick = { }) {
    Text("Tap me")
}

Die onClick-Lambda

Der Parameter onClick akzeptiert eine Lambda-Funktion, also Code innerhalb geschweifter Klammern { }. Dieser Code wird jedes Mal ausgeführt, wenn der Button gedrückt wird.

Sie können dort beliebige Logik unterbringen, etwa das Ausgeben oder Ändern von Daten.

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

Button-Inhalt

Der Inhalt innerhalb der abschließenden geschweiften Klammern ist ein RowScope. Sie können dort Text, Icons oder beides platzieren.

Die meisten Buttons enthalten lediglich eine Textbeschriftung, die die Aktion beschreibt.

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

Klicks mit State zählen

Um auf Taps zu reagieren, speichern Sie mit remember und mutableStateOf einen Wert. Wenn er sich ändert, wird die UI aktualisiert.

Hier erhöht jeder Tap count um eins.

var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
    Text("Count: $count")
}

Einen Button deaktivieren

Der Parameter enabled steuert, ob ein Button angetippt werden kann. Setzen Sie ihn auf false, um den Button ausgegraut darzustellen und Klicks zu blockieren.

Das ist nützlich, solange ein Formular noch unvollständig ist.

Button(
    onClick = { },
    enabled = false
) {
    Text("Locked")
}

OutlinedButton

OutlinedButton zeichnet nur einen Rand ohne Füllung. Er funktioniert auf dieselbe Weise, wirkt aber zurückhaltender.

Verwenden Sie ihn für sekundäre Aktionen neben einem stärker hervorgehobenen primären Button.

OutlinedButton(onClick = { }) {
    Text("Cancel")
}

TextButton

TextButton zeigt nur eine Beschriftung ohne Rand oder Füllung. Er ist der zurückhaltendste Button-Stil.

Er eignet sich gut für Aktionen mit geringer Priorität wie „Überspringen“ oder „Mehr erfahren“.

TextButton(onClick = { }) {
    Text("Skip")
}

Button-Farben

Sie können einen Button mit ButtonDefaults.buttonColors neu einfärben, indem Sie mit containerColor eine Hintergrundfarbe übergeben.

Wählen Sie Farben, die zu Ihrer Marke passen und gut lesbar bleiben.

Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Green
    )
) {
    Text("Go")
}

IconButton

IconButton ist eine kleine, runde, antippbare Fläche für ein einzelnes Icon, zum Beispiel ein Herz oder ein Menü.

Er hat keine Beschriftung und spart daher Platz in Symbolleisten.

IconButton(onClick = { }) {
    Icon(Icons.Default.Favorite, contentDescription = "Like")
}

Die Form eines Buttons festlegen

Der Parameter shape verändert die Ecken. Verwenden Sie RoundedCornerShape mit einem dp-Wert für stärker abgerundete Kanten.

Größere Werte ergeben weichere, pillenförmige Buttons.

Button(
    onClick = { },
    shape = RoundedCornerShape(16.dp)
) {
    Text("Rounded")
}

Klickfunktionen benennen

Für übersichtlichen Code sollten Sie onClick eine benannte Funktion statt einer Inline-Logik übergeben. Dadurch bleibt die UI lesbar.

Übergeben Sie die Funktionsreferenz oder rufen Sie die Funktion innerhalb der Lambda-Funktion auf.

fun onSave() { println("Saved") }
Button(onClick = { onSave() }) {
    Text("Save")
}

Kurze Überprüfung

Testen Sie Ihr Verständnis von Buttons.

Zusammenfassung

Sie haben gelernt, dass ein Button onClick für seine Aktion und einen Inhaltsblock für seine Beschriftung verwendet. State mit remember ermöglicht es, die UI durch Klicks zu ändern.

Außerdem haben Sie OutlinedButton, TextButton und IconButton kennengelernt und gesehen, wie Sie enabled, Farben und die Form festlegen.

Als Nächstes steuern Sie mit padding die Abstände.

Häufig gestellte Fragen

Ist die Lektion „Schaltflächen und Klicks“ kostenlos?

Ja — der vollständige Text von „Schaltflächen und Klicks“ 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 „Schaltflächen und Klicks“?

Fügen Sie interaktive Schaltflächen hinzu. 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 2 von 4.

Wie lange dauert die Lektion „Schaltflächen und Klicks“?

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