ユーザーの切り替えに基づいてパスワードを表示または非表示にする

ユーザーの切り替えに基づいてパスワードを非表示または表示するアイコンを作成することで、セキュリティを強化し、ユーザー エクスペリエンスを向上させることができます。

バージョンの互換性

この実装では、プロジェクトの 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 }
                )
            }
        }
    )
}

コードに関する主なポイント

  • showPassword でパスワードの公開設定を維持します。
  • パスワード入力に BasicSecureTextField コンポーザブルを使用します。
  • クリック可能な末尾のアイコンがあり、showPassword の値を切り替えます。
  • textObfuscationMode 属性と、showPassword の状態による末尾アイコンの表示/非表示の状態を定義します。

結果

図 1. パスワードの表示 / 非表示アイコンを切り替える。

このガイドを含むコレクション

このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。

テキストは UI の主要な構成要素です。アプリでテキストを表示して優れたユーザー エクスペリエンスを提供するさまざまな方法を学びます。
ユーザーがテキストの入力やその他の入力手段を使用してアプリを操作できるようにする方法について学びます。

ご質問やフィードバックがある場合

よくある質問のページでクイックガイドをご覧になるか、お問い合わせフォームからご意見をお寄せください。