今回解決したいこと
テキストフィールドの入力中の値とラベルの間に隙間をあけたい。
入力前はいい感じに見えるけど、
ラベルが上がったとき、入力中の文字との隙間が狭いのがちょっと気になるので、
↓
こうしたい！
実装方法
方法の概要としては、
- Compose に用意されている
TextFieldの中身を拝借 - 入力エリアである
innerTextFieldの周りを好きなPaddingで囲む
以上です。実際のコードは以下の通りです。
// ⭐️composeで元々用意されているTextFieldのコード
@Composable
fun CustomTextField(
value: String,
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
//
//（省略）
//
) {
@OptIn(ExperimentalMaterialApi::class)
BasicTextField(
value = value,
//
//（省略）
//
decorationBox = @Composable { innerTextField ->
TextFieldDefaults.TextFieldDecorationBox(
value = value,
//
//（省略）
//
// ↓ここ↓ innerTextFieldがそのまま渡されている
innerTextField = innerTextField
)
},
)
}
上記のinnerTextFieldがそのまま渡されているところを、好きなPaddingで囲います。
// ⭐️好きなPaddingを足したコード
@Composable
fun CustomTextField(
value: String,
//
//（省略）
//
) {
@OptIn(ExperimentalMaterialApi::class)
BasicTextField(
value = value,
//
//（省略）
//
decorationBox = @Composable { innerTextField ->
TextFieldDefaults.TextFieldDecorationBox(
value = value,
//
//（省略）
//
// ↓ここ↓ paddingで囲み、任意の隙間を作る
innerTextField = {
Box(Modifier.padding(top = 8.dp)) {
innerTextField()
}
},
)
},
)
}
さらに、innerTextFieldPadding といった引数を用意すれば、呼び出し側で好きなPaddingValuesを渡せるようになり、汎用性が高まります。
// ⭐️Paddingの値を外から渡せるようにしたコード
@Composable
fun CustomTextField(
//
//（省略）
//
innerTextFieldPadding: PaddingValues = PaddingValues(0.dp),
) {
@OptIn(ExperimentalMaterialApi::class)
BasicTextField(
//
//（省略）
//
decorationBox = @Composable { innerTextField ->
TextFieldDefaults.TextFieldDecorationBox(
//
//（省略）
//
// ↓ここ↓ 外から値を渡せるようにすると汎用性が高まる
innerTextField = {
Box(Modifier.padding(innerTextFieldPadding)) {
innerTextField()
}
},
)
},
)
}
このカスタムTextFieldによって、シンプルなデザインもカッコよく作れるようになりました。
innerTextField にパディングを与えることで、ラベルと入力値の間に任意の隙間をつくることができました。内部構造に手を加えることは、参考資料にもある通りリスクも伴いますが、見た目を丁寧に整えたい場面では有効な方法です。
最近ではMaterial3がどんどん洗練されていっており、キャッチアップの大切さを感じる日々ですが、Compose Multiplatformを採用しiOSの安定動作を目指す場合や、Material2を採用している場合は、こうした工夫がまだまだ活きると感じています。見た目や体験にこだわりたいときに、ぜひ試してみてください。
⭐️ 参考資料
Views: 0
