Compilazione automatica in Scrivi

Alcune app, come i gestori delle password, possono compilare i componenti in 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 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 ed è soggetta a errori. La compilazione automatica consente agli utenti di risparmiare tempo nella compilazione dei campi e riduce al minimo gli errori di immissione.

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

Compila le credenziali

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

• Il sistema mostra i suggerimenti della compilazione automatica all'utente quando tocca un campo in cui è impostata la semantica della compilazione automatica.
• Il sistema mostra i suggerimenti di compilazione automatica per l'utente e li filtra in base a ciò che l'utente 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 abilitato per la compilazione automatica. Il salvataggio può essere eseguito in due modi:
  • In modo esplicito, confermando le informazioni (ad esempio, facendo clic su un pulsante)
  • In modo implicito, quando un utente esce dalla pagina
• A seconda del provider di credenziali, il sistema potrebbe suggerire una password efficace all'utente quando un campo ha l'attributo ContentType.NewPassword impostato.

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 di Material basati su questo componente.

Compilaz. autom.

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

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

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

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

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

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

Aggiungi campi di compilazione automatica con più tipi

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

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

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

Compila 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 per la compilazione automatica, se sono memorizzati dati pertinenti, viene visualizzato un chip nella barra degli strumenti sopra la tastiera che lo invita a inserire le credenziali.

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

Salva i dati con la compilazione automatica durante la navigazione

Compose 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 codice aggiuntivo.

Salva i dati in modo esplicito con la compilazione automatica

Per salvare esplicitamente le nuove credenziali tramite i campi di testo con la compilazione automatica, il contesto della compilazione automatica deve essere confermato (o annullato) dal gestore della compilazione automatica. Il gestore della compilazione automatica locale comunica quindi con il framework 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 seguenti 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
   AutofillSnippets.kt

2. Nel tuo TextField(s), aggiungi il tipo di contenuti scelto tramite Modifier.semantics:

   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. Esegui il commit del contesto di compilazione automatica in base alle esigenze facendo clic su un pulsante:

   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 viene chiamato ogni volta che un utente esce dalla schermata. Se un pulsante Invia è collegato alla navigazione, non è necessario chiamare Commit. Se vuoi comunque che il clic su Invia attivi la finestra di dialogo di salvataggio, aggiungi Commit qui.

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

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

Salva i dati con la compilazione automatica tramite il suggerimento di una password efficace

A seconda del provider di credenziali, quando utilizzi i tipi di contenuti NewUsername e NewPassword, gli utenti potrebbero visualizzare un pulsante nella tastiera per suggerire una password efficace. Quando l'utente fa clic su questo pulsante, viene visualizzato un riquadro inferiore che gli consente di salvare le proprie credenziali. Non devi implementare nient'altro per offrire questa esperienza agli utenti.

Figura 4. Il chip Suggerisci password efficace nella barra degli strumenti della tastiera.

Figura 5. Riquadro inferiore che chiede agli utenti di utilizzare una password efficace.

Risoluzione dei problemi

Quando richiami lo user journey di "salvataggio", se fai clic su "Non ora" più di una volta, il tuo provider di credenziali potrebbe non mostrare più il riquadro inferiore. Per riattivarla e visualizzarla di nuovo, devi rimuovere le app specifiche che hanno bloccato l'opzione "Vuoi memorizzare questa password?".

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

Personalizza ulteriormente la compilazione automatica

In un tipico percorso dell'utente con la compilazione automatica, quando un componente abilitato per la 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 fornisci il colore che preferisci. Il colore di evidenziazione predefinito della compilazione automatica è definito come Color(0x4dffeb3b).

val customHighlightColor = Color.Red

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