Автозаполнение в режиме создания

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

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

Чтобы реализовать автозаполнение в Compose, достаточно добавить несколько строк кода. Эта функция дает пользователям следующие преимущества:

Автозаполнение учетных данных

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

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

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

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

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

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

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

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

Как добавить автозаполнение в текстовое поле с помощью типа контента

Чтобы указать, что 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, пользователям не нужно будет выполнять никаких дополнительных действий, чтобы заполнить учетные данные.

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

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

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.

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

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

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

Устранение неполадок

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

Как настроить автозаполнение

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

Чтобы изменить цвет подсветки, используйте 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