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

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

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

Для этой реализации требуется, чтобы в minSDK вашего проекта был установлен уровень 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 .

Результаты

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

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

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

Отображать текст

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

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

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