TextFieldデザインまとめ

デフォルトのデザインが

ちょっとAndroidアプリを作る用事があってJetpack Composeを使ったんですが、TextFieldを使ってみてデフォルトのデザインが~~気にくわない~~アプリ上での配置にそぐわない気がしたので、弄った知識をメモっておくことにしました。

環境

Intellij IDEA 2022.1.2 Community Edition

build.gradle(:app)

dependencies {
    /*中略*/
    implementation 'androidx.activity:activity-compose:1.3.0'
    implementation 'androidx.compose.ui:ui-tooling:1.0.0'
    implementation 'androidx.compose.material:material:1.0.1'
}

基本

TextField

シンプルなテキストフィールドです。あの下線だけついてるようなやつ。

OutlinedTextField

周囲を囲まれたテキストフィールドです。多分ログイン画面の入力とかで使えそう

デザイン

下線のみ (TextField)

デフォルト以上にシンプルなので、ほかのComposableと組み合わせてもうるさくなりにくいです。
しかしこれだけだと逆にこれがテキストフィールドであるとわかりにくいので、後の検索ボックスの例のように他と組み合わせて使う形になると思います。

val text = remember{ mutableStateOf("") }
TextField(
    value = text.value,
    onValueChange = {text.value=it},
    //以下注目
    colors = TextFieldDefaults.textFieldColors(
        backgroundColor = Color.Transparent
    )
)

引数colorsの型はTextFieldColors(interface)です。TextFiedlDefaultsクラスからいい感じに取得できます。

textFieldColors関数ですが、おびただしい数の引数( 計21個、全てが色の指定 )を受けるので、やろうと思えばえげつないほどカラフルな配色も可能と思われます。僕は遠慮しておきますが。

入力ヒント

入力内容に関してユーザーに提示するテキストを表示できます。
一文字でもフィールドに文字が入っている場合表示されなくなります。

TextField(
    value = text.value,
    onValueChange = {text.value=it},
    //以下注目
    placeholder = { Text(text = "入力内容に関するテキスト")}
)

hintとかじゃなくてplaceholderですね。

ラベル(ヒントっぽいけど入力した後は避けてくれる)

TextField(
    value = text.value,
    onValueChange = {text.value=it},
    //以下注目
    label = { Text(text = "入力内容に関するテキスト")}
)

入力したら避けてくれるヒントです。placeholderをlabelで置き換えればよいです。

Outlinedに使うとなんかいい感じに避けてくれます。

アイコン

アイコンを指定できます。前につくものと、後ろにつくものがあります

TextField(
    value = text.value,
    onValueChange = {text.value=it},
    //前につくアイコン
    leadingIcon = {
        Icon(
            Icons.Sharp.Done,
            contentDescription = null,
            tint = colorResource(
                id = R.color.design_default_color_primary
            )
        )
    },
    //後ろにつくアイコン
    trailingIcon = {
        Icon(
            Icons.Sharp.Close,
            contentDescription = null,
            tint = colorResource(
                id = R.color.design_default_color_primary
            )
        )
    }
)

前付きleadingIcon 後付きtrailingIconにそれぞれ指定します。
アイコンはコンポーザブルを呼んでるだけなのでやろうと思えば代わりにテキストの表示もできるかも。(推奨はされないでしょうが)

あとで検索フィールドへの使用例をご紹介します。

パスワード系

入力した文字の表示を別の文字に置き換えます。

TextField(
    value = text.value,
    onValueChange = {text.value=it},
    //以下注目
    visualTransformation = PasswordVisualTransformation()
)

画像では"mypassword"と入力したはずですが、内容を盗み見ることができません。

引数visualTransformation : VisualTransformationを使用します。
パスワードについてはPasswordVisualTransformationクラスがあるので使わせてもらいましょう。
代わりにVisualTransformation((AnnotatedString)->TransformedText)を使用すれば明示的に置換手法の指定もできます。

使用例：パスワード入力 (OutliedTextField)

OutlinedTextField(
    value = text.value,
    onValueChange = {text.value=it},
    label = { Text(text = "パスワード")},
    visualTransformation = PasswordVisualTransformation()
)

これだけだけどかなりそれっぽいです。

使用例：検索ボックス (TextField)

TextField(
    value = text.value,
    onValueChange = {text.value=it},
    placeholder = { Text(text = "検索")},
    leadingIcon = {
        Icon(
            Icons.Sharp.Search,
            contentDescription = null,
            tint = colorResource(
                id = R.color.design_default_color_primary
            )
        )
    },
    trailingIcon = {
        Icon(
            Icons.Sharp.Close,
            contentDescription = "×",
            tint = colorResource(
                id = R.color.design_default_color_primary
            )
        )
    },
    colors = TextFieldDefaults.textFieldColors(
        backgroundColor = Color.Transparent
    )
)

ちょっと長ったらしいけどやってることは上で紹介したものを組み合わせただけです。
個人的お気に入り

参考

こちらの動画にはもっと詳しい(グラデーションを使ったデザインなど)が紹介されています。

Jetpack ComposeのTextField基本的な機能・デザイン関係まとめ