モケラ

Tech Sheets

mokelab

TextFieldでパスワード入力欄を表示する

最終更新日:2022-05-08

Jetpack Composeでパスワード入力欄を表示するには、 TextFieldvisualTransformationkeyboardOptions パラメータに値を指定します。Viewシステムの EditText では android:inputType="textPasssord" を指定して実現していました。

@Composable
fun Greeting() {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { newValue -> text = newValue },
        label = {
            Text("password")
        },
        // この2つを追加する
        visualTransformation = PasswordVisualTransformation(),
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Password,
            imeAction = ImeAction.Done,
        ),
    )
}

visualTransformation には PasswordVisualTransformation() を指定します。この指定を忘れると入力してもらったパスワードがそのまま見えてしまいます。

keyboardOptions には KeyboardOptions を指定します。 keyboardTypeKeyboardType.Password を指定し、 imeAction も適切なものを指定します。 imeAction の指定を省略すると、パスワードの文字として改行コードが入力可能になってしまいます。

プレビューは次のようになります。

一覧に戻る