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 di compilazione automatica gestisce la comunicazione tra un'app e un servizio di compilazione automatica.

Compilare credenziali e moduli è un'attività che richiede tempo e soggetta a errori. La compilazione automatica consente agli utenti di risparmiare tempo nella compilazione dei campi e riduce al minimo gli errori di input dell'utente.

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 di compilazione automatica all'utente quando tocca un campo in cui sono impostate le semantiche di compilazione automatica.
• Il sistema mostra i suggerimenti di compilazione automatica all'utente e li filtra in base a ciò che digita.

Salva le 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 alla compilazione automatica. Il salvataggio può essere eseguito in due modi:
  • In modo esplicito, eseguendo il commit delle informazioni (ad esempio, tramite un clic su un pulsante)
  • In modo implicito, quando un utente esce dalla pagina
• A seconda del provider di credenziali, il sistema potrebbe suggerire all'utente una password efficace quando un campo ha 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 questo componente.

Compilaz. autom.

Prima di utilizzare le API di compilazione automatica sul dispositivo o sull'emulatore, devi attivare la compilazione automatica nelle Impostazioni. Qui puoi specificare un provider di credenziali per la compilazione automatica per archiviare 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 alla compilazione automatica, imposta le semantiche 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 le semantiche 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.

Campo di testo basato sul valore

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

Campo di testo basato sullo stato

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

Aggiungi campi di compilazione automatica con più tipi

In alcuni casi, potresti voler che il TextField assuma più di un ContentType. Ad esempio, un campo di accesso potrebbe accettare un indirizzo email o un nome utente. Puoi aggiungere più tipi di contenuti al TextField con l'operatore +.

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

Campo di testo basato sul valore

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

Campo di testo basato sullo stato

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 compilare le credenziali.

Quando un utente fa clic su un campo abilitato alla compilazione automatica, se sono presenti dati pertinenti memorizzati, viene visualizzato un chip nella barra degli strumenti sopra la tastiera che gli chiede di compilare le credenziali.

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

Salva i dati con la compilazione automatica tramite la navigazione

Compose tenta automaticamente di determinare quando un utente esce da una pagina ed esegue il commit delle credenziali inserite. Una volta abilitato alla compilazione automatica, un campo salva automaticamente le informazioni sulle credenziali quando un utente esce dalla pagina senza richiedere codice aggiuntivo.

Salva 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 di compilazione automatica deve essere eseguito (o annullato) dal gestore della compilazione automatica. Il gestore della compilazione automatica locale comunica quindi con il framework di compilazione automatica quando necessario. Se vuoi rimuovere le credenziali inserite dall'utente, chiama AutofillManager.cancel per eliminare tutti i dati in attesa senza salvarli.

I seguenti snippet mostrano come salvare i dati con la compilazione automatica in modo esplicito utilizzando 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. Nei TextField(s), aggiungi il tipo di contenuti scelto tramite Modifier.semantics:

   • Con campi di testo basati sul valore:

     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

   • Con campi di testo basati sullo stato:

     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 tramite un clic su un pulsante:

   • Con campi di testo basati sul valore:

     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

   • Con campi di testo basati sullo stato:

     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 un clic su Invia attivi la finestra di dialogo di salvataggio, aggiungi Commit qui.

Quando l'utente fa clic sul pulsante, viene visualizzato questo foglio inferiore che gli chiede di 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 Suggerisci password efficace. Quando fanno clic su questo, viene visualizzato un riquadro inferiore che consente loro di salvare le credenziali. Non devi implementare altro per consentire agli utenti di usufruire di questa esperienza.

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

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

Risoluzione dei problemi

Quando richiami il percorso utente "Salvataggio", se fai clic su "Non ora" più di una volta, il provider di credenziali potrebbe non visualizzare più il foglio inferiore. Per riattivarlo e farlo apparire di nuovo, devi rimuovere app specifiche che hanno bloccato "Ricorda questa password?".

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

Personalizza ulteriormente la compilazione automatica

In un tipico percorso utente di 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 fornisci il colore che preferisci. Il colore di evidenziazione predefinito della compilazione automatica è definito come Color(0x4dffeb3b).

Campi di testo basati sul valore

val customHighlightColor = Color.Red

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

Campi di testo basati sullo stato

val customHighlightColor = Color.Red

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