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

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

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

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

Заполнить учетные данные

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

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

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

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

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

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

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

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

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

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

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

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

Как добавить поля автозаполнения разных типов

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

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

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(
           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(
           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(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}
AutofillSnippets.kt