0Pricing
Android Academy · Lektion

TextField und Benutzereingaben

Text vom Benutzer in Compose erfassen

TextField und Benutzereingaben ist eine kostenlose Android 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 Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Nutzereingaben erfassen

Fast jede echte App muss den Nutzer nach etwas fragen: einem Namen, einer E-Mail-Adresse oder einer Suchanfrage. In Jetpack Compose ist TextField der grundlegende Baustein für die Texteingabe.

In dieser Lektion lernen Sie, wie Sie ein Textfeld anzeigen, die Eingabe des Nutzers auslesen und das Feld mit dem Zustand Ihrer App synchron halten. Das ist die Grundlage für jedes Formular, das Sie erstellen werden.

Ihr erstes TextField

Ein TextField benötigt zwei Dinge: einen value-Wert (den aktuell anzuzeigenden Text) und einen onValueChange-Callback (die auszuführende Aktion, wenn der Nutzer Text eingibt).

Compose ist deklarativ, daher speichert das Feld seinen Text nicht selbst. Sie halten den Text im State und übergeben ihn wieder an das Feld. Dieses Muster heißt State Hoisting.

@Composable
fun NameField() {
    var name by remember { mutableStateOf("") }

    TextField(
        value = name,
        onValueChange = { name = it }
    )
}

So funktioniert die Wertschleife

Die wichtigste Erkenntnis: Ein TextField zeigt genau das an, was Sie an value übergeben. Wenn der Nutzer eine Taste drückt, ruft Compose onValueChange mit dem neuen Text auf.

  • Sie speichern diesen neuen Text im State.
  • Änderungen am State lösen eine Neuzusammensetzung aus.
  • Das Feld wird mit dem aktualisierten value neu gezeichnet.

Wenn Sie vergessen, den State in onValueChange zu aktualisieren, wirkt das Feld eingefroren, da sich value nie ändert.

var name by remember { mutableStateOf("") }

TextField(
    value = name,
    onValueChange = { newText -> name = newText }
)

Label und Platzhalter hinzufügen

Ein einfaches Textfeld gibt dem Nutzer keinen Hinweis darauf, was er eingeben soll. Fügen Sie ein label hinzu (schwebt über dem Feld) und einen placeholder (wird bei leerem Feld als Hinweis angezeigt).

Diese kleinen Details machen Formulare wesentlich verständlicher.

var email by remember { mutableStateOf("") }

TextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    placeholder = { Text("you@example.com") }
)

OutlinedTextField

Material Design bietet zwei grundlegende Stile. TextField hat einen ausgefüllten Hintergrund, während OutlinedTextField einen Rahmen um das Feld zeichnet. Beide verwenden dieselbe API, daher ist ein Wechsel problemlos möglich.

Umrandete Felder sind in Formularen beliebt, weil sie bei vertikaler Anordnung übersichtlich wirken.

var username by remember { mutableStateOf("") }

OutlinedTextField(
    value = username,
    onValueChange = { username = it },
    label = { Text("Username") },
    singleLine = true
)

Führende und nachfolgende Symbole

Sie können ein Feld mit Symbolen ergänzen. Ein leadingIcon erscheint am Anfang, etwa für ein Such- oder E-Mail-Symbol, und ein trailingIcon am Ende, oft als Löschen-Schaltfläche.

Symbole machen den Zweck eines Feldes auf einen Blick verständlich.

var query by remember { mutableStateOf("") }

OutlinedTextField(
    value = query,
    onValueChange = { query = it },
    label = { Text("Search") },
    leadingIcon = {
        Icon(Icons.Default.Search, contentDescription = null)
    }
)

Eine Löschen-Schaltfläche

Ein gängiges UX-Muster ist ein kleines „x“, das den Inhalt des Feldes löscht. Zeigen Sie es nur an, wenn Text vorhanden ist, und verwenden Sie dafür den trailingIcon-Slot und einen IconButton.

Beachten Sie, dass das Löschen lediglich darin besteht, den State wieder auf eine leere Zeichenkette zu setzen.

var text by remember { mutableStateOf("") }

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Note") },
    trailingIcon = {
        if (text.isNotEmpty()) {
            IconButton(onClick = { text = "" }) {
                Icon(Icons.Default.Clear, contentDescription = "Clear")
            }
        }
    }
)

Einzeilig oder mehrzeilig

Standardmäßig kann ein TextField über mehrere Zeilen wachsen. Für Angaben wie Name oder E-Mail setzen Sie singleLine = true, damit der Nutzer keinen Zeilenumbruch eingeben kann.

Bei längeren Notizen lassen Sie das Feld mehrzeilig und begrenzen die Höhe bei Bedarf mit maxLines.

var bio by remember { mutableStateOf("") }

OutlinedTextField(
    value = bio,
    onValueChange = { bio = it },
    label = { Text("Bio") },
    maxLines = 4
)

Live auf Eingaben reagieren

Da Sie den Text-State besitzen, können Sie sofort darauf reagieren. Ein klassisches Beispiel ist die Anzeige einer Live-Zeichenanzahl unter dem Feld.

Jeder Tastendruck aktualisiert text, wodurch sowohl das Feld als auch die darunter angezeigte Anzahl neu zusammengesetzt werden.

var text by remember { mutableStateOf("") }

Column {
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Tweet") }
    )
    Text("${text.length} / 280")
}

Eingaben umformen

Manchmal möchten Sie die Eingabe des Nutzers vor dem Speichern normalisieren. In onValueChange können Sie den neuen Wert zunächst umformen.

Hier wandeln wir einen Nutzernamen in Kleinbuchstaben um und entfernen Leerzeichen. Da Sie die Schleife steuern, zeigt das Feld immer die bereinigte Version an.

var handle by remember { mutableStateOf("") }

OutlinedTextField(
    value = handle,
    onValueChange = { input ->
        handle = input.lowercase().filterNot { it.isWhitespace() }
    },
    label = { Text("Handle") },
    singleLine = true
)

Reines Kotlin: Einen Handle bereinigen

Die oben gezeigte Umwandlungslogik besteht lediglich aus normalem Kotlin. Sie können sie isoliert testen, ganz ohne Android. Hier wird dieselbe Bereinigungsregel eigenständig ausgeführt.

Wenn Sie solche Logik in reinen Funktionen halten, lässt sie sich leicht per Unit-Test prüfen.

fun cleanHandle(input: String): String =
    input.lowercase().filterNot { it.isWhitespace() }

fun main() {
    println(cleanHandle("  John Doe "))
    println(cleanHandle("ADA Lovelace"))
}

Schnelltest

Was passiert, wenn der onValueChange-Callback eines TextField den an value übergebenen State nie aktualisiert?

Zusammenfassung

Sie kennen jetzt die Grundlagen der Texteingabe in Compose:

  • TextField und OutlinedTextField erwarten einen value-Wert und einen onValueChange-Callback.
  • Sie halten den Text in remember { mutableStateOf(...) } und aktualisieren ihn bei jeder Änderung (State Hoisting).
  • label, placeholder, führende und nachfolgende Symbole sowie singleLine bestimmen Aussehen und Verhalten.
  • Da Sie den State besitzen, können Sie live reagieren oder die Eingabe während der Eingabe umformen.

Als Nächstes: den State eines ganzen Formulars verwalten, nicht nur den eines einzelnen Feldes.

Häufig gestellte Fragen

Ist die Lektion „TextField und Benutzereingaben“ kostenlos?

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

Text vom Benutzer in Compose erfassen 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 1 von 4.

Wie lange dauert die Lektion „TextField und Benutzereingaben“?

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

  1. TextField und Benutzereingaben
  2. Formularstatus verwalten
  3. Eingaben validieren
  4. Tastaturoptionen und Aktionen
← Zurück zu Android Academy