このページは Cloud Translation API によって翻訳されました。

ユーザー入力を処理する

TextField を使用すると、ユーザーがテキストの入力や変更を行えるようになります。このページでは、TextField を実装する方法、TextField 入力のスタイルを設定する方法、キーボードオプションやユーザー入力の視覚的な変換などの他の TextField オプションを構成する方法について説明します。

`TextField` の実装を選択する

TextField の実装には次の 2 つのレベルがあります。

TextField はマテリアルデザインの実装であり、次のようなマテリアルデザインガイドラインに沿っているため、この実装を選択することをおすすめします。
- デフォルトのスタイル設定は塗りつぶしです。
- OutlinedTextField は、枠線のスタイル設定バージョンです。
BasicTextField を使用すると、ユーザーはハードウェアキーボードまたはソフトウェアキーボードを使用してテキストを編集できます。ただし、ヒントやプレースホルダのような装飾は用意されていません。

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

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}TextSnippets.kt

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

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}TextSnippets.kt

紫色の枠線とラベルが付いた編集可能なテキストフィールド。

スタイル`TextField`

TextField と BasicTextField は、カスタマイズ用のパラメータを多数共有しています。TextField の完全なリストについては、TextField ソースコードをご覧ください。有用なパラメータの一部を以下に示します。

singleLine
maxLines
textStyle

@Composable
fun StyledTextField() {
    var value by remember { mutableStateOf("Hello\nWorld\nInvisible") }

    TextField(
        value = value,
        onValueChange = { value = it },
        label = { Text("Enter text") },
        maxLines = 2,
        textStyle = TextStyle(color = Color.Blue, fontWeight = FontWeight.Bold),
        modifier = Modifier.padding(20.dp)
    )
}TextSnippets.kt

ラベルと 2 つの編集可能な行がある、複数行の TextField

デザインにマテリアルの TextField または OutlinedTextField が必要な場合は、BasicTextField ではなく TextField をおすすめします。ただし、マテリアル仕様の装飾を必要としないデザインを構築する場合には、BasicTextField を使用する必要があります。

Brush API による入力のスタイル設定

TextField で高度なスタイル設定を行うには、Brush API を使用します。次のセクションでは、ブラシを使用して TextField 入力に色付きのグラデーションを追加する方法について説明します。

Brush API を使用してテキストにスタイルを設定する方法については、Brush API で高度なスタイル設定を有効にするをご覧ください。

`TextStyle` を使用して色付きグラデーションを実装する

TextField 内で入力するときに色付きのグラデーションを実装するには、任意のブラシを TextField の TextStyle として設定します。この例では、linearGradient の組み込みブラシを使用して、TextField にテキストを入力すると、レインボーグラデーション効果が表示されます。

var text by remember { mutableStateOf("") }
val brush = remember {
    Brush.linearGradient(
        colors = rainbowColors
    )
}
TextField(
    value = text, onValueChange = { text = it }, textStyle = TextStyle(brush = brush)
)TextSnippets.kt

buildAnnotatedString と SpanStyle を linearGradient とともに使用して、テキストの一部のみをカスタマイズします。 — **図 3.** `buildAnnotatedString` と `SpanStyle` を `linearGradient` とともに使用して、テキストの一部のみをカスタマイズする。

キーボードオプションを設定する

TextField を使用すると、キーボードレイアウトなどのキーボード構成オプションを設定できます。また、キーボードでサポートされている場合は、自動修正を有効にすることも可能です。ソフトウェアキーボードが次に示すオプションに対応していない場合、一部のオプションは保証されない可能性があります。サポートされているキーボードオプションのリストを次に示します。

capitalization
autoCorrect
keyboardType
imeAction

入力をフォーマットする

TextField を使用すると、入力値に VisualTransformation を設定できます。たとえば、パスワードの文字を * で置き換えたり、クレジットカード番号の 4 桁の数字ごとにハイフンを挿入したりできます。

@Composable
fun PasswordTextField() {
    var password by rememberSaveable { mutableStateOf("") }

    TextField(
        value = password,
        onValueChange = { password = it },
        label = { Text("Enter password") },
        visualTransformation = PasswordVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
    )
}TextSnippets.kt

文字がマスクされたパスワード入力欄

その他の例については、VisualTransformationSamples ソースコードをご覧ください。

入力をクリーンアップする

テキストを編集する場合の一般的なタスクは、先頭の文字列を削除することか、あるいは変更されるたびに入力文字列を変換することです。

一つのモデルとして、onValueChange ごとにキーボードから任意の大幅な編集がなされる場合を考える必要があります。たとえば、ユーザーが自動修正や、単語の絵文字への置き換えなど、高度な編集機能を使用する場合です。これを適切に処理するには、今回 onValueChange に渡されるテキストは、前回または次回 onValueChange に渡される値と無関係であるという前提で、変換ロジックを作成します。

また、先頭のゼロを禁止するテキストフィールドを実装するには、値が変更されるたびに先頭のゼロをすべて削除します。

@Composable
fun NoLeadingZeroes() {
    var input by rememberSaveable { mutableStateOf("") }
    TextField(
        value = input,
        onValueChange = { newText ->
            input = newText.trimStart { it == '0' }
        }
    )
}TextSnippets.kt

テキストを削除する際にカーソルの位置を制御するには、状態の一部として TextField の TextFieldValue オーバーロードを使用します。

状態に関するベストプラクティス

以下は、アプリで入力の問題が発生しないように TextField 状態を定義して更新するための一連のベストプラクティスです。

TextField 状態を表すには MutableState を使用する: これらの構造では非同期の遅延が発生する可能性があるため、TextField 状態を表すために StateFlow などのリアクティブストリームを使用しないでください。

class SignUpViewModel : ViewModel() {

    var username by mutableStateOf("")
        private set

    /* ... */
}TextSnippets.kt

状態の更新の遅延を回避する: onValueChange を呼び出すときに、TextField を同期的にすぐに更新します。

// SignUpViewModel.kt

class SignUpViewModel(private val userRepository: UserRepository) : ViewModel() {

    var username by mutableStateOf("")
        private set

    fun updateUsername(input: String) {
        username = input
    }
}

// SignUpScreen.kt

@Composable
fun SignUpScreen(/*...*/) {

    OutlinedTextField(
        value = viewModel.username,
        onValueChange = { username -> viewModel.updateUsername(username) }
        /*...*/
    )
}TextSnippets.kt

状態を定義する場所: TextField 状態に入力時のビジネスロジック検証が必要な場合は、状態を ViewModel にホイスティングするのが適切です。そうでない場合は、コンポーザブルまたは状態保持クラスを信頼できる情報源として使用できます。状態をホイスティングする場所の詳細については、状態ホイスティングのドキュメントをご覧ください。

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
Compose UI を設計する
状態と Jetpack Compose
Compose で UI 状態を保存する