キーボードのオプションとアクション
キーボードの種類、IMEアクション、フォーカスを扱います。
「キーボードのオプションとアクション」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全4レッスンが含まれています。
目的に合ったキーボード
洗練されたフォームでは、画面上のキーボードも適切に表示されます。電話番号には数字、メールアドレスには@キー、フィールド間の移動には「次へ」ボタンを表示します。Composeでは、これらすべてをKeyboardOptionsとKeyboardActionsで制御できます。
このレッスンでは、キーボードの種類とIMEアクションを設定し、フィールド間のフォーカスを管理します。
キーボードの種類を選ぶ
テキストフィールドにKeyboardOptionsを渡し、keyboardTypeを設定します。するとシステムが、データに適したキーボードを表示します。
よく使う値は、Text、Number、Email、Phone、Passwordです。
var email by remember { mutableStateOf("") }
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text("Email") },
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Email
)
)数字キーボード
数量やPINには、KeyboardType.Numberを使います。検証のレッスンで学んだように、入力フィルタリングと組み合わせて数字だけを受け付けるようにします。
var pin by remember { mutableStateOf("") }
OutlinedTextField(
value = pin,
onValueChange = { pin = it.filter { c -> c.isDigit() } },
label = { Text("PIN") },
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Number
)
)パスワードを隠す
パスワードはマスクして表示する必要があります。パスワード用のキーボードの種類と、visualTransformation = PasswordVisualTransformation()を組み合わせて使います。
状態には実際の文字が保持されますが、表示だけがマスクされます。
var password by remember { mutableStateOf("") }
OutlinedTextField(
value = password,
onValueChange = { password = it },
label = { Text("Password") },
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Password
)
)IMEアクションボタン
キーボードの右下にあるキーがIMEアクションです。imeActionで設定します。次のフィールドへ進むにはNextを使い、最後のフィールドではDoneを使います。
OutlinedTextField(
value = name,
onValueChange = { name = it },
label = { Text("Name") },
keyboardOptions = KeyboardOptions(
imeAction = ImeAction.Next
)
)IMEアクションに応答する
ユーザーがそのボタンをタップしたときに反応するには、KeyboardActionsを渡します。各アクション（onNext、onDone、onSearch）は、実装するラムダです。
ここでは、Doneを押すとキーボードを非表示にします。
val keyboard = LocalSoftwareKeyboardController.current
OutlinedTextField(
value = text,
onValueChange = { text = it },
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
keyboardActions = KeyboardActions(
onDone = { keyboard?.hide() }
)
)次のフィールドにフォーカスを移動する
複数のフィールドがあるフォームでは、「次へ」ボタンで次のフィールドに移動できるようにします。LocalFocusManagerを使い、moveFocusを呼び出します。
val focusManager = LocalFocusManager.current
OutlinedTextField(
value = email,
onValueChange = { email = it },
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
keyboardActions = KeyboardActions(
onNext = { focusManager.moveFocus(FocusDirection.Down) }
)
)Doneでフォーカスを解除する
最後のフィールドでは、フォーカスを解除するとキーボードが閉じ、フィールドの選択状態も解除されます。onDone内でfocusManager.clearFocus()を呼び出します。
OutlinedTextField(
value = password,
onValueChange = { password = it },
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
keyboardActions = KeyboardActions(
onDone = { focusManager.clearFocus() }
)
)プログラムからフォーカスを要求する
検索ボックスのように、画面が表示された直後にフィールドへフォーカスしたい場合があります。FocusRequesterをアタッチし、LaunchedEffect内でフォーカスを要求します。
val focusRequester = remember { FocusRequester() }
LaunchedEffect(Unit) { focusRequester.requestFocus() }
OutlinedTextField(
value = query,
onValueChange = { query = it },
modifier = Modifier.focusRequester(focusRequester),
label = { Text("Search") }
)大文字化と自動修正
KeyboardOptionsでは、capitalizationとautoCorrectEnabledも制御できます。名前には各単語の先頭を大文字にし、ユーザー名では自動修正を無効にして、意図しない変更を防ぎます。
OutlinedTextField(
value = fullName,
onValueChange = { fullName = it },
label = { Text("Full name") },
keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.Words,
autoCorrectEnabled = false
)
)Pure Kotlin: IMEアクションを選ぶ
「最後以外の各フィールドにはNext、最後にはDone」というロジックは、通常のKotlinで記述できます。ここでは、フィールドの位置を表示すべきアクションラベルに対応付けています。
fun imeActionFor(index: Int, lastIndex: Int): String =
if (index == lastIndex) "Done" else "Next"
fun main() {
val fields = listOf("name", "email", "password")
fields.forEachIndexed { i, field ->
println("$field -> ${imeActionFor(i, fields.lastIndex)}")
}
}確認問題
キーボードの右下のボタンに「次へ」と表示し、タップしたときに下のフィールドへフォーカスを移したいとします。何が2つ必要でしょうか。
まとめ
キーボードに対応したフォームを作成できるようになりました。
KeyboardOptionsで、keyboardType、imeAction、大文字化、自動修正を設定します。PasswordVisualTransformationでパスワードをマスクします。KeyboardActionsでNext、Done、Searchに応答します。LocalFocusManagerでフォーカスを移動または解除し、FocusRequesterで必要なときにフィールドへフォーカスします。
これで、フォーム作成に必要なツールキットが完成しました。入力、状態、検証、キーボードを扱えるようになったので、洗練された使いやすいComposeフォームを作成できます。
よくある質問
「キーボードのオプションとアクション」レッスンは無料ですか？
はい。「キーボードのオプションとアクション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全4レッスンが含まれています。
「キーボードのオプションとアクション」で何を学びますか？
キーボードの種類、IMEアクション、フォーカスを扱います。 ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Android Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「キーボードのオプションとアクション」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAndroid Academyレッスンでコードを書いて実行できますか？
はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- TextFieldとユーザー入力
- フォーム状態の管理
- 入力値のバリデーション
- キーボードのオプションとアクション