Autocompletar en Compose

Algunas apps, como los administradores de contraseñas, pueden completar los componentes en otras 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. La función Autocompletar permite que los usuarios ahorren tiempo cuando completan campos y minimiza los errores de entrada.

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

Completa las credenciales

La función Autocompletar permite que los usuarios completen sus credenciales de las siguientes maneras:

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

Guarda credenciales

Los usuarios pueden guardar credenciales con la función Autocompletar 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. El guardado se puede realizar de dos maneras:
  • De forma explícita, confirmando información (por ejemplo, haciendo clic en un botón)
  • De forma implícita, cuando un usuario sale de la página
• Según tu proveedor de credenciales, el sistema puede sugerir una contraseña segura al usuario cuando un campo tiene configurado ContentType.NewPassword.

Puedes usar Autocompletar en tu app para agilizar la recuperación de los 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 compilan 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.

Agrega la función Autocompletar a tu campo de texto con el tipo de contenido

Para indicar que un TextField tiene habilitada la función Autocompletar, establece la semántica ContentType con los tipos que puede aceptar el campo. Esto indica a los servicios de autocompletado 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.

Si configuras la semántica de ContentType, tus usuarios podrán acceder a la información de autocompletado 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 proporcionarán a través de Autocompletar.

Campo de texto basado en valores

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

Campo de texto basado en el estado

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

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 +.

Para conocer todos los tipos de datos disponibles que se pueden guardar con Autocompletar, consulta la ContentType referencia.

Campo de texto basado en valores

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

Campo de texto basado en el estado

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

Cómo completar datos con Autocompletar

Cuando agregas un ContentType en un TextField, no necesitas 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, verá un chip en la barra de herramientas que se encuentra sobre el teclado que le solicita que complete las credenciales.

Cómo guardar 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 se habilita la función Autocompletar en un campo, se guardará automáticamente la información de las credenciales cuando un usuario salga de la página, sin necesidad de código adicional.

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

Para guardar de forma explícita credenciales nuevas 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 Autofill Framework cuando es 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 Autocompletar de forma explícita usando 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 elegiste a través de Modifier.semantics:

   • Con los campos de texto basados en valores, ocurre lo siguiente:

     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 campos de texto basados en el estado:

     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. Confirma el contexto de Autocompletar según sea necesario haciendo clic en un botón:

   • Con los campos de texto basados en valores, ocurre lo siguiente:

     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 campos de texto basados en el estado:

     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

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

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

Guarda datos con Autocompletar a través de la sugerencia de contraseña segura

Según tu proveedor de credenciales, cuando uses 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 lo hagan, aparecerá una hoja inferior que les permitirá guardar sus credenciales. No necesitas implementar nada más para que los usuarios tengan esta experiencia.

Solución de problemas

Cuando se invoca el recorrido del usuario de "guardado", 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 habilitarlo y que aparezca de nuevo, debes quitar las apps específicas que bloquearon la opción "¿Recordar esta contraseña?".

Personaliza aún más la función Autocompletar

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

Para personalizar este color de destacado, usa CompositionLocal y proporciona el color que quieras. El color predeterminado para destacar el autocompletado se define como Color(0x4dffeb3b).

Campos de texto basados en valores

val customHighlightColor = Color.Red

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

Campos de texto basados en el estado

val customHighlightColor = Color.Red

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