6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

JetpackCompose KeyBoard Options と Actions

Posted at

JetpackComposeのKeyBoard

TextFieldのパラメータでKeyboardの種類と完了時のActionを設定できる。
細かく把握してなかったので、UIの差異をまとめておく。

KeyboardOptions

class KeyboardOptions constructor(
    val capitalization: KeyboardCapitalization = KeyboardCapitalization.None,
    val autoCorrect: Boolean = true,
    val keyboardType: KeyboardType = KeyboardType.Text,
    val imeAction: ImeAction = ImeAction.Default
)

KeyBoardの設定は上記クラスを使用して行う。

KeyBoardType

KeyBoardType 説明 備考
Text 通常のキーボードを表示するIME 00.type-text.png
Ascii ASCII 文字の入力が可能な IME 01.type-ascii.png
Number 数字入力が可能なキーボード 02.type-number.png
Phone 電話番号の入力が可能なIME 03.type-phone.png
Uri URI を入力できる IME 04.type-uri.png
Email メールアドレスを入力できるIME 05.type-email.png
Password パスワード入力が可能なIME 06.type-password.png
NumberPassword 数字パスワードの入力が可能 07.type-numberpassword.png

ImeAction

IME(インプットメソッド)の設定。後述のKeyboardActionsパラメータにて、タップ時の処理を実装できる。

ImeOptions 意味合い
Default 00.Default.png 決定
Done 01.Done.png ユーザの入力が終了
Go 03.Go.png 入力された値への移動
Next 06.Next.png 次の入力に移る
None 07.None.png No Action
Previous 02.Previous.png 前の入力に戻る
Search 04.Serach.png 検索を開始
Send 05.Send.png 入力値を送信

KeyboardCapitalization

大文字・小文字設定

| KeyboardCapitalization | 説明
| - | - | - |
| Characters | 全大文字 |
| None | 全小文字 |
| Sentences | 文頭大文字 |
| Words | 頭文字大文字 |

KeyboardActions

imeAction.kt
TextField(
        value = text,
        onValueChange = onTextChanged,
        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
        keyboardActions = KeyboardActions(onDone = {
            /* todo : do something */
            keyboardController?.hide() // ※ 明示的に閉じる時に使用
        })
    )

TextFieldでは上のように使用する。
KeyboardActions(onDone = ~~

終わり

QWERTY配列のほかテンキーもほぼ同様。

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?