Автозаполнение в Compose

Некоторые приложения, например менеджеры паролей, могут заполнять компоненты других приложений данными, предоставленными пользователем. Приложения, которые заполняют компоненты других приложений, называются службами автозаполнения. Фреймворк автозаполнения управляет взаимодействием между приложением и службой автозаполнения.

Заполнение учетных данных и форм — трудоемкий и чреватый ошибками процесс. Автозаполнение позволяет пользователям экономить время, затрачиваемое на заполнение полей, и сводит к минимуму ошибки ввода данных.

Всего несколькими строками кода можно реализовать функцию автозаполнения в Compose. Эта функция предоставляет пользователям следующие преимущества:

Введите учетные данные

Функция автозаполнения позволяет пользователям вводить свои учетные данные следующими способами:

  • Система отображает пользователю подсказки для автозаполнения, когда он нажимает на поле, для которого заданы параметры автозаполнения.
  • Система отображает пользователю подсказки автозаполнения и фильтрует их на основе введенного пользователем текста.

Сохранить учетные данные

Пользователи могут сохранять учетные данные через функцию автозаполнения следующими способами:

  • Система запускает диалоговое окно сохранения, предлагающее пользователю сохранить информацию при вводе новых или обновленных данных в поле с функцией автозаполнения. Сохранение можно осуществить двумя способами:
    • В явном виде, путем передачи информации (например, посредством нажатия кнопки).
    • По сути, когда пользователь покидает страницу, это происходит автоматически.
  • В зависимости от используемого поставщика учетных данных, система может предложить пользователю надежный пароль, если для поля установлено значение ContentType.NewPassword .

В вашем приложении можно использовать функцию автозаполнения, чтобы упростить пользователям получение сохраненных данных. Автозаполнение поддерживает текстовые компоненты, такие как BasicTextField и все текстовые поля Material Design, созданные на основе этого компонента.

Настройте автозаполнение

Перед использованием API автозаполнения на вашем устройстве или эмуляторе необходимо активировать функцию автозаполнения в настройках. Там вы можете указать поставщика учетных данных, в котором автозаполнение будет хранить ваши учетные данные.

Страница настроек, демонстрирующая, как указать поставщика учетных данных.
Рисунок 1. Страница настроек, показывающая, как указать поставщика учетных данных.

Добавьте функцию автозаполнения в текстовое поле, используя тип содержимого.

Чтобы указать, что TextField поддерживает автозаполнение, задайте семантику ContentType с типами данных, которые может принимать поле. Это указывает службам автозаполнения, какие пользовательские данные могут быть актуальны для этого конкретного поля. Используйте ContentType.Username , чтобы задать TextField , которое пользователи могут заполнять своим именем пользователя.

Установив семантику ContentType , ваши пользователи смогут получить доступ к информации автозаполнения, уже сохраненной в поставщике учетных данных их устройства. Например, если пользователь уже вошел в ваше приложение через браузер Chrome на своем ноутбуке и сохранил свой пароль через поставщик учетных данных, то его учетные данные будут предоставлены ему через функцию автозаполнения.

Текстовое поле, основанное на значении 

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

Текстовое поле, основанное на состоянии 

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

Добавьте поля автозаполнения с несколькими типами данных.

В некоторых случаях может потребоваться, чтобы ваше TextField принимало более одного ContentType . Например, поле для входа в систему может принимать либо адрес электронной почты, либо имя пользователя. Вы можете добавить несколько типов содержимого в ваше TextField с помощью оператора + .

Список всех типов данных, доступных для сохранения с помощью функции автозаполнения, см. в справочнике ContentType .

Текстовое поле, основанное на значении 

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

Текстовое поле, основанное на состоянии 

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

Заполните данные с помощью функции автозаполнения.

При добавлении ContentType в TextField вам больше ничего не потребуется делать, чтобы пользователи могли заполнить свои учетные данные.

Когда пользователь щелкает по полю с включенной функцией автозаполнения, если в нем сохранены соответствующие данные, на панели инструментов над клавиатурой появляется значок, предлагающий ввести учетные данные.

В текстовой панели инструментов отображаются сохраненные учетные данные.
Рисунок 2. Чипы на текстовой панели инструментов, отображающие сохраненные учетные данные.

Сохраняйте данные с помощью автозаполнения через навигацию.

Compose автоматически определяет, когда пользователь покидает страницу, и сохраняет введенные учетные данные. После включения функции автозаполнения поле будет автоматически сохранять информацию об учетных данных при уходе пользователя со страницы без необходимости написания дополнительного кода.

Сохраняйте данные явно с помощью автозаполнения.

Для явного сохранения новых учетных данных через текстовые поля с помощью функции автозаполнения контекст автозаполнения должен быть подтвержден (или отменен) менеджером автозаполнения. Затем локальный менеджер автозаполнения взаимодействует с фреймворком автозаполнения по мере необходимости. Если вы хотите удалить учетные данные, введенные пользователем, вызовите AutofillManager.cancel , чтобы удалить все ожидающие данные без их сохранения.

Следующие фрагменты кода показывают, как явно сохранить данные с помощью автозаполнения, используя кнопку:

  1. Создайте локальную переменную для хранения менеджера автозаполнения, доступ к которому можно получить следующим образом:

    val autofillManager = LocalAutofillManager.current
    AutofillSnippets.kt

  2. В вашем 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 }
    )
}
      AutofillSnippets.kt

    • С текстовыми полями, основанными на состоянии:

      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. При необходимости подтвердите контекст автозаполнения нажатием кнопки:

    • С текстовыми полями, основанными на значениях:

      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

    • С текстовыми полями, основанными на состоянии:

      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 вызывается всякий раз, когда пользователь покидает экран. Если кнопка «Отправить» связана с навигацией, то вызывать Commit не нужно. Если вы все же хотите, чтобы нажатие кнопки «Отправить» запускало диалоговое окно сохранения, добавьте Commit сюда.

Когда пользователь нажмет кнопку, внизу появится всплывающее окно с предложением сохранить учетные данные в выбранном поставщике учетных данных:

В нижней части экрана пользователям предлагается сохранить пароль.
Рисунок 3. Нижний лист, предлагающий пользователям сохранить пароль.

Сохраняйте данные с помощью автозаполнения, которое предлагает надежный пароль.

В зависимости от используемого поставщика учетных данных, при работе с типами контента NewUsername и NewPassword пользователи могут видеть на клавиатуре кнопку « Предложить надежный пароль» . При нажатии на нее появляется всплывающее окно, позволяющее сохранить учетные данные. Для обеспечения такой возможности пользователям не требуется никаких дополнительных действий.

Функция «Предложить надежный пароль» на панели инструментов клавиатуры.
Рисунок 4. Значок «Предложить надежный пароль» на панели инструментов клавиатуры.
В нижней части экрана пользователям предлагается использовать надежный пароль.
Рисунок 5. Нижний лист, предлагающий пользователям использовать надежный пароль.

Поиск неисправностей

При запуске процесса сохранения, если вы нажмете «Не сейчас» более одного раза, ваш поставщик учетных данных может перестать отображать нижний всплывающий список. Чтобы снова включить его и он появился, необходимо удалить определенные приложения, которые блокируют функцию «Запомнить этот пароль?».

В нижней части экрана пользователям предлагается сохранить пароль.
Рисунок 6. Нижний лист, предлагающий пользователям сохранить пароль.

Дополнительная настройка автозаполнения.

В типичном сценарии использования функции автозаполнения, когда компонент с поддержкой автозаполнения заполнен учетными данными, он меняет цвет и подсвечивается, сигнализируя пользователю об успешном завершении автозаполнения.

Чтобы настроить цвет подсветки, используйте CompositionLocal и укажите любой желаемый цвет. Цвет подсветки автозаполнения по умолчанию определяется как Color(0x4dffeb3b) .

Текстовые поля, основанные на значениях 

val customHighlightColor = Color.Red

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

Текстовые поля, основанные на состоянии 

val customHighlightColor = Color.Red

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