Некоторые приложения, например менеджеры паролей, могут заполнять компоненты других приложений данными, предоставленными пользователем. Приложения, которые заполняют компоненты других приложений, называются службами автозаполнения. Платформа автозаполнения управляет связью между приложением и службой автозаполнения.
Заполнение учетных данных и форм — трудоемкая и подверженная ошибкам задача. Автозаполнение позволяет пользователям экономить время, затрачиваемое на заполнение полей, и сводит к минимуму ошибки пользовательского ввода.
Всего с помощью нескольких строк кода вы можете реализовать автозаполнение в Compose. Эта функция предоставляет пользователям следующие преимущества:
Заполните учетные данные
Автозаполнение позволяет пользователям заполнять свои учетные данные следующими способами:
- Система отображает предложения автозаполнения для пользователя, когда он нажимает на поле, в котором установлена семантика автозаполнения.
- Система отображает предложения автозаполнения для пользователя и фильтрует их в зависимости от того, что вводит пользователь.
Сохранить учетные данные
Пользователи могут сохранять учетные данные с помощью автозаполнения следующими способами:
- Система запускает диалоговое окно сохранения, которое предлагает пользователю сохранить информацию, когда он вводит новую или обновленную информацию в поле с включенной функцией автозаполнения. Сохранение может осуществляться двумя способами:
- Явно, путем передачи информации (например, посредством нажатия кнопки)
- Неявно, когда пользователь уходит со страницы
- В зависимости от вашего поставщика учетных данных система может предложить пользователю надежный пароль, если в поле установлен
ContentType.NewPassword.
Вы можете использовать автозаполнение в своем приложении, чтобы упростить извлечение сохраненных данных для пользователей. Автозаполнение поддерживает текстовые компоненты через BasicTextField и все текстовые поля Material, основанные на этом компоненте.
Настроить автозаполнение
Прежде чем использовать API-интерфейсы автозаполнения на вашем устройстве или эмуляторе, вы должны активировать автозаполнение в настройках. Там вы можете указать поставщика учетных данных для автозаполнения для хранения ваших учетных данных.
Добавьте автозаполнение в текстовое поле, используя тип контента
Чтобы указать, что TextField поддерживает автозаполнение, установите семантику ContentType с типами, которые может принимать поле. Это указывает службам автозаполнения, какие пользовательские данные могут иметь отношение к этому конкретному полю. Используйте ContentType.Username , чтобы задать TextField , который пользователи могут заполнить своим именем пользователя.
TextField( value = textFieldValue.value, onValueChange = {textFieldValue.value = it}, modifier = Modifier.semantics { contentType = ContentType.Username } )
Установив семантику ContentType , ваши пользователи смогут получить доступ к информации автозаполнения, уже сохраненной в поставщике учетных данных их устройства. Например, если пользователь уже вошел в ваше приложение через браузер Chrome на своем ноутбуке и сохранил свой пароль через поставщика учетных данных, то его учетные данные передаются ему через автозаполнение.
Добавьте поля автозаполнения нескольких типов
В некоторых случаях вам может потребоваться, чтобы ваш TextField принимал более одного ContentType . Например, поле входа может принимать либо адрес электронной почты, либо имя пользователя. Вы можете добавить несколько типов контента в свое TextField с помощью оператора + .
TextField( value = textFieldValue.value, onValueChange = { textFieldValue.value = it }, modifier = Modifier.semantics { contentType = ContentType.Username + ContentType.EmailAddress } )
Все типы данных, доступные для сохранения с помощью автозаполнения, см. в справочнике ContentType .
Заполните данные с помощью автозаполнения
Когда вы добавляете ContentType в TextField , вам не нужно ничего делать, чтобы пользователи могли заполнить учетные данные.
Когда пользователь нажимает на поле с включенной функцией автозаполнения, если там хранятся соответствующие данные, он видит на панели инструментов над клавиатурой чип, предлагающий ввести учетные данные.
Сохраняйте данные с помощью автозаполнения через навигацию.
Compose автоматически пытается определить, когда пользователь переходит со страницы и фиксирует введенные учетные данные. Если в поле включено автозаполнение, оно автоматически сохраняет учетные данные, когда пользователь уходит со страницы, без необходимости использования дополнительного кода.
Сохраняйте данные явно с помощью автозаполнения.
Чтобы явно сохранить новые учетные данные через текстовые поля с помощью автозаполнения, контекст автозаполнения должен быть зафиксирован (или отменен) диспетчером автозаполнения. Затем локальный менеджер автозаполнения при необходимости связывается с платформой автозаполнения. Если вы хотите удалить учетные данные, введенные пользователем, вызовите AutofillManager.cancel, чтобы удалить все ожидающие данные, не сохраняя их.
В следующих фрагментах показано, как сохранить данные с помощью автозаполнения явно с помощью кнопки:
Создайте локальную переменную для хранения диспетчера автозаполнения, которую можно получить следующим образом:
val autofillManager = LocalAutofillManager.current
В
TextField(s)добавьте желаемый тип контента через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 } ) }
При необходимости зафиксируйте контекст автозаполнения, нажав кнопку:
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") } }
Commit вызывается всякий раз, когда пользователь уходит от экрана. Если кнопка «Отправить» связана с навигацией, вызов «Commit» не требуется. Если вы по-прежнему хотите, чтобы нажатие кнопки «Отправить» вызывало диалоговое окно сохранения, добавьте сюда «Зафиксировать» .
Когда пользователь нажмет кнопку, он увидит нижний лист с предложением сохранить учетные данные для выбранного поставщика учетных данных:
Сохраните данные с помощью автозаполнения, предложив надежный пароль.
В зависимости от вашего поставщика учетных данных, когда вы используете типы контента NewUsername и NewPassword , пользователи могут видеть на клавиатуре кнопку « Предложить надежный пароль» . Когда они нажимают на нее, появляется нижний лист, который позволяет им сохранить свои учетные данные. Вам не нужно ничего реализовывать, чтобы пользователи могли воспользоваться этим опытом.
Устранение неполадок
Если при вызове «сохраняющего» пути пользователя вы нажмете «Не сейчас» более одного раза, ваш поставщик учетных данных больше не сможет отображать нижний лист. Чтобы снова включить его и он снова появился, вам необходимо удалить определенные приложения, которые заблокировали функцию «Запомнить этот пароль?».
Дальнейшая настройка автозаполнения
В типичном процессе взаимодействия пользователя с автозаполнением, когда компонент с поддержкой автозаполнения заполняется учетными данными, он меняет цвет и выделяется, чтобы сигнализировать пользователю об успешном завершении автозаполнения.
Чтобы настроить этот цвет выделения, используйте CompositionLocal и укажите любой цвет, который вам нужен.
val customHighlightColor = Color.Red CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) { TextField( value = textFieldValue.value, onValueChange = { textFieldValue.value = it }, modifier = Modifier.semantics { contentType = ContentType.Username } ) }
Цвет выделения автозаполнения по умолчанию определяется как Color(0x4dffeb3b) .