Autofill in „Komponieren“

Einige Apps, z. B. Passwortmanager, können die Komponenten in anderen Apps mit vom Nutzer bereitgestellten Daten ausfüllen. Apps, die Komponenten anderer Apps ausfüllen, werden als Autofill-Services bezeichnet. Das Autofill-Framework verwaltet die Kommunikation zwischen einer App und einem Autofill-Service.

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 automatisch ausfüllen

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

• Das System zeigt dem Nutzer Vorschläge für die automatische Vervollständigung an, wenn er auf ein Feld tippt, für das die Semantik für die automatische Vervollständigung festgelegt ist.
• Das System zeigt dem Nutzer Vorschläge für die Autofill-Funktion an und filtert sie anhand der Eingabe des Nutzers.

Anmeldedaten speichern

Nutzer können Anmeldedaten über Autofill auf folgende Weise speichern:

• Das System löst ein Dialogfeld zum Speichern aus, in dem der Nutzer aufgefordert wird, Informationen zu speichern, wenn er neue oder aktualisierte Informationen in ein Feld eingibt, für das Autofill aktiviert ist. Es gibt zwei Möglichkeiten, Änderungen zu speichern:
  • Explizit, indem Sie Informationen bestätigen (z. B. durch Klicken auf eine Schaltfläche)
  • Implizit, wenn ein Nutzer die Seite verlässt
• Je nach Anbieter der Anmeldedaten schlägt das System dem Nutzer möglicherweise ein starkes Passwort vor, wenn für ein Feld ContentType.NewPassword festgelegt ist.

Du kannst Autofill in deiner App verwenden, um das Abrufen gespeicherter Daten für Nutzer zu optimieren. Autofill unterstützt Textkomponenten über BasicTextField und alle Material-Textfelder, 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 Anbieter von Anmeldedaten für Autofill angeben, um Ihre Anmeldedaten zu speichern.

Automatisches Ausfüllen für Textfelder mithilfe des Inhaltstyps hinzufügen

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

Wenn du die Semantik ContentType festlegst, können deine Nutzer auf Informationen zum automatischen Ausfüllen 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 Anbieter von Anmeldedaten gespeichert hat, werden seine Anmeldedaten über „Automatisches Ausfüllen“ bereitgestellt.

Wertbasiertes Textfeld

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

Statusbasiertes Textfeld

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics { contentType = ContentType.Username }
)
AutofillSnippets.kt

Autofill-Felder mit mehreren Typen hinzufügen

In einigen Fällen möchten Sie möglicherweise, dass Ihre TextField mehr als eine ContentType übernimmt. In einem Anmeldefeld kann beispielsweise entweder eine E-Mail-Adresse oder ein Nutzername akzeptiert werden. Sie können Ihrem TextField mit dem Operator + mehrere Inhaltstypen hinzufügen.

Eine Liste aller Datentypen, die mit Autofill gespeichert werden können, findest du in der ContentType-Referenz.

Wertbasiertes Textfeld

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

Statusbasiertes Textfeld

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)
AutofillSnippets.kt

Daten mit Autofill ausfüllen

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

Wenn ein Nutzer in ein Feld klickt, für das Autofill aktiviert ist, und relevante Daten gespeichert sind, wird in der Symbolleiste über der Tastatur ein Chip angezeigt, der ihn auffordert, die Anmeldedaten einzugeben.

Daten mit Autofill während der Navigation speichern

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

Daten explizit mit Autofill speichern

Wenn neue Anmeldedaten explizit über Textfelder mit Autofill gespeichert werden sollen, 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 du die vom Nutzer eingegebenen Anmeldedaten entfernen möchtest, rufe AutofillManager.cancel auf, um alle ausstehenden Daten zu löschen, ohne sie zu speichern.

Die folgenden Snippets zeigen, wie Daten mit Autofill explizit über eine Schaltfläche gespeichert werden:

1. Erstelle eine lokale Variable für den Autofill-Manager, der so abgerufen werden kann:

   val autofillManager = LocalAutofillManager.current
   AutofillSnippets.kt

2. Fügen Sie in Ihrer TextField(s) den ausgewählten Inhaltstyp über Modifier.semantics hinzu:

   • Bei wertbasierten Textfeldern:

     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

   • Mit statusbasierten Textfeldern:

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewUsername }
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewPassword }
         )
     }
     AutofillSnippets.kt

3. Übernehmen Sie den Autofill-Kontext nach Bedarf per Klick auf eine Schaltfläche:

   • Bei wertbasierten Textfeldern:

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             value = usernameTextFieldValue.value,
             onValueChange = { usernameTextFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewUsername },
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             value = passwordTextFieldValue.value,
             onValueChange = { passwordTextFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewPassword },
         )
     
         // Submit button
         Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
     }
     AutofillSnippets.kt

   • Mit statusbasierten Textfeldern:

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewUsername },
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewPassword },
         )
     
         // Submit button
         Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
     }
     AutofillSnippets.kt

Commit wird immer dann aufgerufen, wenn ein Nutzer den Bildschirm verlässt. Wenn ein Senden-Button mit der Navigation verknüpft ist, muss Commit nicht aufgerufen werden. Wenn Sie möchten, dass durch Klicken auf Senden das Dialogfeld zum Speichern ausgelöst wird, fügen Sie hier Commit hinzu.

Wenn der Nutzer auf die Schaltfläche klickt, wird diese Ansicht am unteren Rand angezeigt, in der er aufgefordert wird, die Anmeldedaten beim ausgewählten Anbieter von Anmeldedaten zu speichern:

Daten mit Autofill speichern, indem ein starkes Passwort vorgeschlagen wird

Je nach Anbieter von Anmeldedaten wird Nutzern bei Verwendung der Inhaltstypen NewUsername und NewPassword möglicherweise eine Schaltfläche auf der Tastatur angezeigt, über die sie ein starkes Passwort vorschlagen können. Wenn sie darauf klicken, wird unten ein Infofeld angezeigt, in dem sie ihre Anmeldedaten speichern können. Sie müssen nichts weiter implementieren, damit Nutzer diese Funktion verwenden können.

Fehlerbehebung

Wenn du beim Aufrufen der User Journey „Speichern“ mehrmals auf „Nicht jetzt“ klickst, wird die Ansicht am unteren Rand möglicherweise nicht mehr von deinem Anbieter von Anmeldedaten angezeigt. Wenn Sie die Funktion wieder aktivieren möchten, müssen Sie bestimmte Apps entfernen, die die Funktion „Dieses Passwort merken?“ blockiert haben.

Autofill weiter anpassen

In einer typischen Autofill-User Journey ändert eine Autofill-fähige Komponente, die mit Anmeldedaten gefüllt wurde, ihre Farbe und wird hervorgehoben, um dem Nutzer zu signalisieren, dass Autofill erfolgreich abgeschlossen wurde.

Wenn Sie diese Hervorhebungsfarbe anpassen möchten, verwenden Sie CompositionLocal und geben Sie die gewünschte Farbe an. Die Standardfarbe für die Autofill-Hervorhebung ist Color(0x4dffeb3b).

Wertbasierte Textfelder

val customHighlightColor = Color.Red

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

Statusbasierte Textfelder

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}
AutofillSnippets.kt