Compilazione automatica in Scrivi

Alcune app, come i gestori delle password, possono compilare i componenti di altre app con i dati forniti dall'utente. Le app che compilano i componenti di altre app sono chiamate servizi di compilazione automatica. Il framework di compilazione automatica gestisce la comunicazione tra un'app e un servizio di compilazione automatica.

La compilazione di credenziali e moduli è un'attività che richiede tempo e può essere soggetta a errori. La compilazione automatica consente agli utenti di risparmiare tempo per la compilazione dei campi e minimizzare gli errori di immissione.

Con poche righe di codice, puoi implementare la compilazione automatica in Compose. Questa funzionalità offre agli utenti i seguenti vantaggi:

Compila le credenziali

La compilazione automatica consente agli utenti di inserire le proprie credenziali nei seguenti modi:

  • Il sistema mostra all'utente i suggerimenti di compilazione automatica quando tocca un campo in cui sono impostate le relative semantiche.
  • Il sistema mostra all'utente i suggerimenti di compilazione automatica e li filtra in base a ciò che digita.

Salva credenziali

Gli utenti possono salvare le credenziali tramite la compilazione automatica nei seguenti modi:

  • Il sistema attiva una finestra di dialogo di salvataggio che chiede all'utente di salvare le informazioni quando inserisce informazioni nuove o aggiornate in un campo con compilazione automatica abilitata. Il salvataggio può essere eseguito in due modi:
    • In modo esplicito, impegnando le informazioni (ad esempio tramite un clic sul pulsante)
    • Implicitamente, quando un utente esce dalla pagina
  • A seconda del fornitore di credenziali, il sistema potrebbe suggerire all'utente una password complessa quando in un campo è impostato ContentType.NewPassword.

Puoi utilizzare la compilazione automatica nella tua app per semplificare il recupero dei dati salvati per gli utenti. La compilazione automatica supporta i componenti di testo tramite BasicTextField e tutti i campi di testo Material che si basano su quel componente.

Compilaz. autom.

Prima di utilizzare le API di compilazione automatica sul dispositivo o nell'emulatore, devi attivare la compilazione automatica nelle Impostazioni. Qui puoi specificare un provider di credenziali per la compilazione automatica per memorizzare le tue credenziali.

Una pagina delle impostazioni che mostra come specificare un fornitore di credenziali.
Figura 1. Una pagina delle impostazioni che mostra come specificare un fornitore di credenziali.

Aggiungere la compilazione automatica al campo di testo utilizzando il tipo di contenuti

Per indicare che un TextField è abilitato alla compilazione automatica, imposta la semantica ContentType con i tipi che il campo può accettare. Questo indica ai servizi di compilazione automatica il tipo di dati utente che potrebbero essere pertinenti per questo campo specifico. Utilizza ContentType.Username per impostare un TextField che gli utenti possono compilare con il proprio nome utente.

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

Se imposti la semantica ContentType, gli utenti possono accedere alle informazioni di compilazione automatica già salvate nel provider di credenziali del loro dispositivo. Ad esempio, se un utente ha già eseguito l'accesso alla tua app tramite il browser Chrome sul suo laptop e ha salvato la password tramite un fornitore di credenziali, le sue credenziali vengono visualizzate tramite la compilazione automatica.

Aggiungere campi di completamento automatico con più tipi

In alcuni casi, potresti voler assegnare più TextField al tuo ContentType. Ad esempio, un campo di accesso può accettare un indirizzo email o un nome utente. Puoi aggiungere più tipi di contenuti a TextField con l'operatore +.

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

Per tutti i tipi di dati disponibili per il salvataggio con la compilazione automatica, consulta la documentazione di riferimento ContentType.

Compilare i dati con la compilazione automatica

Quando aggiungi un ContentType in un TextField, non devi fare altro per consentire agli utenti di inserire le credenziali.

Quando un utente fa clic su un campo abilitato alla compilazione automatica, se sono memorizzati dati pertinenti, nella barra degli strumenti sopra la tastiera viene visualizzato un chip che lo invita a inserire le credenziali.

Chip nella barra degli strumenti del testo che mostrano le credenziali salvate.
Figura 2. Chip nella barra degli strumenti del testo che mostrano le credenziali salvate.

Risparmiare dati con la compilazione automatica durante la navigazione

Scrivi tenta automaticamente di determinare quando un utente esce da una pagina e conferma le credenziali inserite. Una volta attivata la compilazione automatica per un campo, le informazioni sulle credenziali verranno salvate automaticamente quando un utente esce dalla pagina senza richiedere alcun codice aggiuntivo.

Salvare i dati in modo esplicito con la compilazione automatica

Per salvare esplicitamente nuove credenziali tramite i campi di testo con la compilazione automatica, il contesto della compilazione automatica deve essere eseguito (o annullato) dall'amministratore della compilazione automatica. Il gestore della compilazione automatica locale comunica con il framework di compilazione automatica ogni volta che è necessario. Se vuoi rimuovere le credenziali inserite dall'utente, chiama AutofillManager.cancel per eliminare i dati in attesa senza salvarli.

Gli snippet riportati di seguito mostrano come salvare i dati con la compilazione automatica utilizzando esplicitamente un pulsante:

  1. Crea una variabile locale per contenere il gestore della compilazione automatica, che può essere recuperato nel seguente modo:

    val autofillManager = LocalAutofillManager.current

  2. In TextField(s), aggiungi il tipo di contenuti che preferisci tramite Modifier.semantics:

    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 }
        )
    }

  3. Esegui il commit del contesto della compilazione automatica in base alle esigenze facendo clic su un pulsante:

    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") }
    }

Il metodo commit viene chiamato ogni volta che un utente esce dalla schermata. Se un pulsante Invia è collegato alla navigazione, non è necessario chiamare Commit. Se vuoi comunque fare clic su Invia per attivare la finestra di dialogo di salvataggio, aggiungi Commit qui.

Quando l'utente fa clic sul pulsante, viene visualizzato questo riquadro in basso che lo invita a salvare le credenziali nel provider di credenziali selezionato:

Riquadro inferiore che chiede agli utenti di salvare la password.
Figura 3. Riquadro inferiore che chiede agli utenti di salvare la password.

Risparmiare dati con il riempimento automatico tramite il suggerimento di password efficaci

A seconda del fornitore di credenziali, quando utilizzi i tipi di contenuti NewUsername e NewPassword, gli utenti potrebbero vedere un pulsante sulla tastiera per suggerire una password sicura. Quando fa clic su questo pulsante, viene visualizzato un riquadro in basso che consente di salvare le credenziali. Non è necessario implementare altro per consentire agli utenti di usufruire di questa esperienza.

Il chip Suggerisci password efficace nella barra degli strumenti della tastiera.
Figura 4. Il chip Suggerisci password efficace nella barra degli strumenti della tastiera.
Riquadro inferiore che chiede agli utenti di utilizzare una password efficace.
Figura 5. Riquadro inferiore che chiede agli utenti di utilizzare una password efficace.

Risoluzione dei problemi

Quando richiami il flusso utente "Salvataggio", se fai clic su "Non ora" più di una volta, il fornitore di credenziali potrebbe non mostrare più il foglio inferiore. Per riattivarla e visualizzarla di nuovo, devi rimuovere app specifiche che hanno bloccato l'opzione "Ricorda questa password?".

Riquadro inferiore che chiede agli utenti di salvare la password.
Figura 6. Riquadro inferiore che chiede agli utenti di salvare la password.

Personalizzare ulteriormente il completamento automatico

In un tipico percorso dell'utente con la compilazione automatica, quando un componente abilitato alla compilazione automatica è stato compilato con le credenziali, cambia colore e viene evidenziato per segnalare all'utente che la compilazione automatica è stata completata correttamente.

Per personalizzare questo colore di evidenziazione, utilizza CompositionLocal e specifica il colore che preferisci.

val customHighlightColor = Color.Red

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

Il colore di evidenziazione della compilazione automatica predefinito è definito come Color(0x4dffeb3b).