Autocompletar en Compose

Algunas apps, como los administradores de contraseñas, pueden completar los componentes de otras apps con datos que proporcionó el usuario. Las apps que completan los componentes de otras se denominan servicios de autocompletado. Autofill Framework administra la comunicación entre una app y un servicio de autocompletado.

Completar credenciales y formularios es una tarea lenta y propensa a errores. El autocompletado permite a los usuarios ahorrar tiempo dedicado a completar campos y minimizar los errores de entrada del usuario.

Con solo unas pocas líneas de código, puedes implementar la función Autocompletar en Compose. Esta función proporciona los siguientes beneficios a los usuarios:

Completa las credenciales

Autocompletar permite a los usuarios propagar sus credenciales de las siguientes maneras:

• El sistema muestra sugerencias de Autocompletar al usuario cuando presiona un campo en el que se configuran las semánticas de Autocompletar.
• El sistema muestra sugerencias de Autocompletar para el usuario y las filtra según lo que escribe.

Guarda credenciales

Los usuarios pueden guardar credenciales a través del Autocompletado de las siguientes maneras:

• El sistema activa un diálogo de guardado, que le solicita al usuario que guarde la información cuando ingresa información nueva o actualizada en un campo habilitado para Autocompletar. Puedes guardar los cambios de dos maneras:
  • De forma explícita, a través de la confirmación de información (por ejemplo, haciendo clic en un botón)
  • De forma implícita, cuando un usuario abandona la página
• Según el proveedor de credenciales, el sistema puede sugerirle al usuario una contraseña segura cuando un campo tiene configurado ContentType.NewPassword.

Puedes usar la función Autocompletar en tu app para optimizar la recuperación de datos guardados de los usuarios. La función Autocompletar admite componentes de texto a través de BasicTextField y todos los campos de texto de Material que se basan en ese componente.

Conf. Autocompl.

Antes de usar las APIs de Autocompletar en tu dispositivo o emulador, debes activar Autocompletar en Configuración. Allí, puedes especificar un proveedor de credenciales para que Autocompletar almacene tus credenciales.

Cómo agregar Autocompletar a tu campo de texto con el tipo de contenido

Para indicar que un TextField está habilitado para la función Autocompletar, establece la semántica ContentType con los tipos que puede aceptar el campo. Esto indica a los servicios de Autocompletar qué tipo de datos del usuario podrían ser relevantes para este campo específico. Usa ContentType.Username para establecer un TextField que los usuarios puedan completar con su nombre de usuario.

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

Si configuras la semántica ContentType, tus usuarios podrán acceder a la información de Autocompletar que ya se guardó en el proveedor de credenciales de su dispositivo. Por ejemplo, si un usuario ya accedió a tu app a través del navegador Chrome en su laptop y guardó su contraseña a través de un proveedor de credenciales, sus credenciales se le entregan a través de Autocompletar.

Agrega campos de Autocompletar con varios tipos

En algunos casos, es posible que desees que tu TextField asuma más de un ContentType. Por ejemplo, un campo de acceso puede aceptar una dirección de correo electrónico o un nombre de usuario. Puedes agregar varios tipos de contenido a tu TextField con el operador +.

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

Para ver todos los tipos de datos disponibles para guardar con Autocompletar, consulta la referencia de ContentType.

Cómo completar datos con Autocompletar

Cuando agregues un ContentType en un TextField, no necesitarás hacer nada más para que los usuarios puedan completar las credenciales.

Cuando un usuario hace clic en un campo habilitado para Autocompletar, si hay datos relevantes almacenados, ve un chip en la barra de herramientas sobre el teclado que le solicita que complete las credenciales.

Ahorra datos con Autocompletar a través de la navegación

Compose intenta determinar automáticamente cuándo un usuario navega desde una página y confirma las credenciales ingresadas. Una vez que un campo esté habilitado para Autocompletar, se guardará automáticamente la información de credenciales cuando un usuario salga de la página sin necesidad de ningún código adicional.

Cómo guardar datos de forma explícita con Autocompletar

Para guardar credenciales nuevas de forma explícita a través de campos de texto con Autocompletar, el administrador de Autocompletar debe confirmar (o cancelar) el contexto de Autocompletar. Luego, el administrador de Autocompletado local se comunica con el framework de Autocompletado cuando sea necesario. Si quieres quitar las credenciales que ingresó el usuario, llama a AutofillManager.cancel para borrar los datos pendientes sin guardarlos.

En los siguientes fragmentos, se muestra cómo guardar datos con el Autocompletado de forma explícita con un botón:

1. Crea una variable local para contener el administrador de Autocompletar, que se puede recuperar de la siguiente manera:

   val autofillManager = LocalAutofillManager.current
   AutofillSnippets.kt

2. En tu TextField(s), agrega el tipo de contenido que desees a través de 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 }
       )
   }
   AutofillSnippets.kt

3. Confirma el contexto de Autocompletar según sea necesario con un clic en un botón:

   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

Se llama a Commit cada vez que un usuario sale de la pantalla. Si un botón Enviar está vinculado a la navegación, no es necesario llamar a Confirmar. Si aún quieres hacer clic en Enviar para activar el diálogo de guardado, agrega Confirmar aquí.

Cuando el usuario haga clic en el botón, verá esta hoja inferior que le pedirá que guarde las credenciales en el proveedor de credenciales seleccionado:

Ahorra datos con la función Autocompletar a través de la sugerencia de contraseñas seguras

Según el proveedor de credenciales, cuando usas los tipos de contenido NewUsername y NewPassword, es posible que los usuarios vean un botón en el teclado para sugerir una contraseña segura. Cuando hacen clic en este botón, aparece una hoja inferior que les permite guardar sus credenciales. No necesitas implementar nada más para que los usuarios tengan esta experiencia.

Solución de problemas

Cuando invoques el recorrido del usuario para "guardar", si haces clic en "Ahora no" más de una vez, es posible que tu proveedor de credenciales ya no muestre la hoja inferior. Para volver a habilitarla y que aparezca una vez más, debes quitar apps específicas que hayan bloqueado la opción “¿Recordar esta contraseña?”.

Cómo personalizar aún más Autocompletar

En un recorrido típico del usuario de Autocompletar, cuando un componente habilitado para Autocompletar se propagó con credenciales, cambia de color y se destaca para indicarle al usuario que Autocompletar se completó correctamente.

Para personalizar este color de resaltado, usa CompositionLocal y proporciona el color que desees.

val customHighlightColor = Color.Red

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

El color de resaltado predeterminado del Autocompletado se define como Color(0x4dffeb3b).