Autofill in der Zeichenansicht

Einige Apps wie Passwortmanager können die Komponenten in anderen Apps mit von Nutzern bereitgestellten Daten ausfüllen. Apps, die Komponenten anderer Apps ausfüllen, werden als Autofill-Dienste bezeichnet. Das AutoFill-Framework verwaltet die Kommunikation zwischen einer App und einem Autofill-Dienst.

Das Ausfüllen von Anmeldedaten und Formularen ist zeitaufwendig und fehleranfällig. Mit Autofill können Nutzer Zeit beim Ausfüllen von Feldern sparen und Eingabefehler minimieren.

Mit nur wenigen Codezeilen können Sie Autofill in Compose implementieren. Diese Funktion bietet Nutzern folgende Vorteile:

Anmeldedaten eingeben

Mit Autofill können Nutzer ihre Anmeldedaten auf folgende Arten eingeben:

  • Das System zeigt dem Nutzer Autofill-Vorschläge an, wenn er auf ein Feld tippt, für das Autofill-Semantiken festgelegt sind.
  • Das System zeigt dem Nutzer Vorschläge für die automatische Vervollständigung an und filtert sie anhand der von ihm eingegebenen Zeichen.

Anmeldedaten speichern

Nutzer haben folgende Möglichkeiten, Anmeldedaten über Autofill zu speichern:

  • Das System löst ein Speicherdialogfeld aus, in dem der Nutzer aufgefordert wird, Informationen zu speichern, wenn er neue oder aktualisierte Informationen in ein Feld mit automatischer Vervollständigung eingibt. Sie haben zwei Möglichkeiten, Ihre Änderungen zu speichern:
    • Durch explizites Speichern von Informationen (z. B. durch Klicken auf eine Schaltfläche)
    • Implizit, wenn ein Nutzer die Seite verlässt
  • Je nach Anmeldedatenanbieter schlägt das System dem Nutzer möglicherweise ein starkes Passwort vor, wenn für ein Feld ContentType.NewPassword festgelegt ist.

Sie können die Funktion „Autofill“ in Ihrer App verwenden, um den Abruf gespeicherter Daten für Nutzer zu optimieren. Die Autofill-Funktion unterstützt Textkomponenten über BasicTextField und alle Textfelder in Material, die auf dieser Komponente basieren.

AutoFill konfig.

Bevor Sie die Autofill APIs auf Ihrem Gerät oder Emulator verwenden können, müssen Sie Autofill in den Einstellungen aktivieren. Dort können Sie einen Anmeldedatenanbieter für Autofill angeben, um Ihre Anmeldedaten zu speichern.

Eine Einstellungsseite, auf der gezeigt wird, wie ein Anmeldedatenanbieter angegeben wird.
Abbildung 1: Eine Einstellungsseite, auf der gezeigt wird, wie ein Anmeldedatenanbieter angegeben wird.

Autofill über den Inhaltstyp in ein Textfeld einfügen

Wenn Sie angeben möchten, dass für ein TextField die Funktion „Autofill“ aktiviert ist, legen Sie die ContentType-Semantik mit den Typen fest, die das Feld akzeptieren kann. So wird AutoFill-Diensten mitgeteilt, welche Art von Nutzerdaten für dieses Feld relevant sein könnten. Verwenden Sie ContentType.Username, um ein TextField festzulegen, das Nutzer mit ihrem Nutzernamen ausfüllen können.

TextField(
    value = textFieldValue.value,
    onValueChange = {textFieldValue.value = it},
    modifier = Modifier.semantics { contentType = ContentType.Username }
)
AutofillSnippets.kt

Wenn Sie die ContentType-Semantik festlegen, können Ihre Nutzer auf Autofill-Informationen zugreifen, die bereits im Anmeldedatenanbieter ihres Geräts gespeichert sind. Wenn sich ein Nutzer beispielsweise bereits über den Chrome-Browser auf seinem Laptop in Ihrer App angemeldet und sein Passwort über einen Anmeldedatenanbieter gespeichert hat, werden seine Anmeldedaten über Autofill bereitgestellt.

Autofill-Felder mit mehreren Typen hinzufügen

In einigen Fällen kann es sinnvoll sein, dass Ihre TextField mehr als eine ContentType übernimmt. Ein Anmeldefeld kann beispielsweise entweder eine E-Mail-Adresse oder einen Nutzernamen akzeptieren. Mit dem Operator + können Sie Ihrem TextField mehrere Inhaltstypen hinzufügen. 

TextField(
    value = textFieldValue.value,
    onValueChange = { textFieldValue.value = it },
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)
AutofillSnippets.kt

Eine Liste aller Datentypen, die mit Autofill gespeichert werden können, finden Sie in der Referenz zu ContentType.

Daten mit Autofill ausfüllen

Wenn Sie eine ContentType in eine TextField einfügen, müssen Sie nichts weiter tun, damit Nutzer Anmeldedaten eingeben können.

Wenn ein Nutzer auf ein Feld mit automatischer Autofill-Funktion klickt und relevante Daten gespeichert sind, wird in der Symbolleiste über der Tastatur ein Chip angezeigt, über den er aufgefordert wird, Anmeldedaten einzugeben.

Chips in der Textsymbolleiste mit gespeicherten Anmeldedaten
Abbildung 2: Chips in der Textsymbolleiste mit gespeicherten Anmeldedaten.

Mit Autofill Daten beim Navigieren sparen

Compose versucht automatisch zu ermitteln, wann ein Nutzer eine Seite verlässt, und speichert die eingegebenen Anmeldedaten. Sobald die Autofill-Funktion für ein Feld aktiviert ist, werden Anmeldedaten automatisch gespeichert, wenn ein Nutzer die Seite verlässt, ohne dass zusätzlicher Code erforderlich ist.

Daten explizit mit Autofill speichern

Wenn Sie neue Anmeldedaten explizit über Textfelder mit Autofill speichern möchten, muss der Autofill-Kontext vom Autofill-Manager bestätigt (oder abgebrochen) werden. Der lokale Autofill-Manager kommuniziert dann bei Bedarf mit dem Autofill-Framework. Wenn Sie Anmeldedaten entfernen möchten, die der Nutzer eingegeben hat, rufen Sie AutofillManager.cancel auf, um alle ausstehenden Daten zu löschen, ohne sie zu speichern.

In den folgenden Snippets wird gezeigt, wie Sie Daten mit Autofill explizit über eine Schaltfläche speichern:

  1. Erstellen Sie eine lokale Variable, die den Autofill-Manager enthält. Diese Variable kann so abgerufen werden: 

    val autofillManager = LocalAutofillManager.current
    AutofillSnippets.kt

  2. Fügen Sie in Ihrer TextField(s) den gewünschten Inhaltstyp über Modifier.semantics hinzu: 

    val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewUsername }
    )

    Spacer(modifier = Modifier.height(16.dp))

    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewPassword }
    )
}
    AutofillSnippets.kt

  3. Sie können den Autofill-Kontext bei Bedarf durch Klicken auf eine Schaltfläche bestätigen: 

    val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewUsername },
    )

    Spacer(modifier = Modifier.height(16.dp))

    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewPassword },
    )

    // Submit button
    Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
}
    AutofillSnippets.kt

Commit wird aufgerufen, wenn ein Nutzer den Bildschirm verlässt. Wenn eine Schaltfläche Senden mit der Navigation verknüpft ist, muss Commit nicht aufgerufen werden. Wenn Sie weiterhin auf Senden klicken möchten, um das Speicherdialogfeld zu öffnen, fügen Sie hier Commit hinzu.

Wenn der Nutzer auf die Schaltfläche klickt, wird unten ein Infofeld angezeigt, in dem er aufgefordert wird, die Anmeldedaten beim ausgewählten Anmeldedatenanbieter zu speichern:

Untere Ansicht, in der Nutzer aufgefordert werden, das Passwort zu speichern.
Abbildung 3: Untere Ansicht, in der Nutzer aufgefordert werden, das Passwort zu speichern

Daten mit Autofill speichern, indem ein starkes Passwort vorgeschlagen wird

Je nach Anmeldedatenanbieter sehen Nutzer, die die Inhaltstypen NewUsername und NewPassword verwenden, auf der Tastatur möglicherweise die Schaltfläche Starkes Passwort vorschlagen. Wenn er darauf klickt, wird ein Infofeld angezeigt, in dem er seine Anmeldedaten speichern kann. Sie müssen nichts weiter implementieren, damit Nutzer diese Funktion nutzen können.

Der Chip „Starkes Passwort vorschlagen“ in der Tastatursymbolleiste.
Abbildung 4: Der Chip „Starkes Passwort vorschlagen“ in der Symbolleiste der Tastatur.
Untere Ansicht, in der Nutzer aufgefordert werden, ein starkes Passwort zu verwenden
Abbildung 5: Untere Ansicht, in der Nutzer aufgefordert werden, ein starkes Passwort zu verwenden.

Fehlerbehebung

Wenn Sie beim Aufrufen des Vorgangs zum Speichern mehrmals auf „Nicht jetzt“ klicken, zeigt Ihr Anmeldedatenanbieter möglicherweise nicht mehr das untere Blatt an. Wenn Sie die Option wieder aktivieren und wieder sehen möchten, müssen Sie bestimmte Apps entfernen, die die Option „Dieses Passwort merken?“ blockiert haben.

Untere Ansicht, in der Nutzer aufgefordert werden, das Passwort zu speichern.
Abbildung 6: Untere Ansicht, in der Nutzer aufgefordert werden, das Passwort zu speichern

Autofill weiter anpassen

Wenn in einem typischen Autofill-Nutzerfluss eine Autofill-kompatible Komponente mit Anmeldedaten ausgefüllt wurde, ändert sie die Farbe und wird hervorgehoben, um dem Nutzer zu signalisieren, dass Autofill erfolgreich abgeschlossen wurde.

Wenn Sie diese Markierungsfarbe anpassen möchten, verwenden Sie CompositionLocal und geben Sie die gewünschte Farbe an. 

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}
AutofillSnippets.kt

Die Standardfarbe für Autofill-Hervorhebungen ist Color(0x4dffeb3b).