Показать или скрыть пароль в зависимости от переключения пользователя

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

Результаты

Рисунок 1. Переключение между отображением и скрытием значка пароля.

Совместимость версий

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

Зависимости

Отображать или скрывать пароль в зависимости от выбора пользователя.

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

@Composable
fun PasswordTextField() {
    val state = remember { TextFieldState() }
    var showPassword by remember { mutableStateOf(false) }
    BasicSecureTextField(
        state = state,
        textObfuscationMode =
        if (showPassword) {
            TextObfuscationMode.Visible
        } else {
            TextObfuscationMode.RevealLastTyped
        },
        modifier = Modifier
            .fillMaxWidth()
            .padding(6.dp)
            .border(1.dp, Color.LightGray, RoundedCornerShape(6.dp))
            .padding(6.dp),
        decorator = { innerTextField ->
            Box(modifier = Modifier.fillMaxWidth()) {
                Box(
                    modifier = Modifier
                        .align(Alignment.CenterStart)
                        .padding(start = 16.dp, end = 48.dp)
                ) {
                    innerTextField()
                }
                Icon(
                    if (showPassword) {
                        Icons.Filled.Visibility
                    } else {
                        Icons.Filled.VisibilityOff
                    },
                    contentDescription = "Toggle password visibility",
                    modifier = Modifier
                        .align(Alignment.CenterEnd)
                        .requiredSize(48.dp).padding(16.dp)
                        .clickable { showPassword = !showPassword }
                )
            }
        }
    )
}
TextSnippets.kt

Основные моменты, касающиеся кода.

  • Поддерживает состояние видимости пароля в showPassword .
  • Для ввода пароля используется составной объект BasicSecureTextField .
  • Имеет кликабельную иконку в конце строки, которая переключает значение параметра showPassword .
  • Определяет атрибут textObfuscationMode и состояние видимости/невидимости значка в конце строки в зависимости от состояния параметра showPassword .

Коллекции, содержащие это руководство

Данное руководство является частью подборки кратких руководств, охватывающих более широкие цели разработки под Android:

Отобразить текст

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

Есть вопросы или отзывы?

Перейдите на страницу часто задаваемых вопросов и ознакомьтесь с краткими руководствами или свяжитесь с нами и поделитесь своими мыслями.
Перейти к разделу часто задаваемых вопросов Оставить отзыв