【SwiftUI】TextFieldの使い方

テキスト入力に使うTextField()の使い方を解説します。
iOS15.0から呼び出し方が若干変わりました。古いiOSバージョンでの使い方はこちらの記事を参照して下さい。

(アーカイブ)【SwiftUI】TextFieldの使い方
(2020/09/26 更新)テキスト入力に使うTextField()の使い方を解説します。本記事で使用しているTextFieldの使い方はiOS14以前の仕様を元に解説しています。最新の情報はこちらの記事を御覧ください。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】13.2.1
【Swift】5.5.2
【iOS】15.2
【macOS】Big Sur バージョン 11.6
スポンサーリンク

基本的な使い方

【引数】
"プレースホルダー"
入力域が空の場合に表示される文字列です。一般的にはそこに何を入力すべきかを表す文言が入ります。
プレースホルダーが不要の場合は""(空文字)を指定します。

text
入力された文字列を格納するString型のプロパティへの参照(Binding)を指定します。

使用例

TextFieldに入力した文字列が、リアルタイムにTextメッセージに反映されるサンプルです。

UntitledImage

表示スタイルの指定

このモディファイアを使うと、丸みのある長方形の枠を付加できます。
現時点のiOS15では、このタイプか、デフォルトのPlainTextFieldStyle(枠無し)しか選択できません。

UntitledImage

スポンサーリンク

フォーカスを制御する

このモディファイアを使って、フォーカス状態プロパティを定義すると、フォーカス制御が可能になります。

【引数】
フォーカス状態プロパティ
フォーカスの状態を表すBool型プロパティへの参照(Binding)です。
フォーカス状態プロパティは@FocusStateプロパティラッパーを使用して定義します。

フォーカス状態プロパティの値を変更すると、対象Viewのフォーカス状態が変わります。
逆に、フォーカス状態が変化すると、それに合わせてフォーカス状態プロパティの値が変化します。

使用例

「フォーカスin」および「フォーカスout」ボタンでTextFieldのフォーカス状態が切り替わります。
また、フォーカス状態に連動してボタンの有効可否が切り替わります。

UntitledImage

スポンサーリンク

初期フォーカスを設定する

Viewの表示と同時にTextFieldに初期フォーカスをあてるには、.onAppearモディファイア内でフォーカス状態プロパティを設定します。
onAppearの時点では、TextFieldにフォーカスをあてる準備がまだできていないので、次の例のように意図的に遅延を発生させる必要がありまます。

スポンサーリンク

イベントの取得

iOS15より前のTextFieldでは、イベント取得オプションとしてonEditingChangedとonCommitが使用できましたが、現在はDeprecated(非推奨)になっていますので、代わりに次のモディファイアを使用します。

.onChange()
値の変更を検知するモディファイアです。
フォーカス状態プロパティを対象にすると、onEditingChangedと同様にフォーカスのin/outタイミングが検知できます。

.onSubmit()
ユーザーがアクションを起こしたタイミングで実行する処理をクロージャーで指定します。
通常はソフトウェアキーボードで「改行」がタップされたタイミングになります。

使用例

スポンサーリンク

TextFieldで使えるその他のモディファイア

TextFieldで使える代表的なModifierを紹介します。

キーボード指定

表示するソフトウェアキーボードを指定します。
次のようなキーボードタイプが指定可能です。

.asciiCapable 標準のASCII文字キーボード
.numbersAndPunctuation 数字と句読点キーボード
.URL URLエントリ用に最適化されたキーボード
.numberPad 数値のみのキーボード
.phonePad 電話番号入力用のキーボード
.namePhonePad 人名または電話番号入力用のキーボード
.emailAddress メールアドレス入力用のキーボード
.decimalPad 小数点入力可能な数値キーボード
.twitter Twitterテキスト入力用キーボード
.webSearch Web検索用語とURL入力用キーボード
.asciiCapableNumberPad ASCII数字入力用キーボード
(.numberPadと同じ?)

自動大文字入力の適用設定

アルファベット入力時の、自動大文字入力制御を設定します。
自動大文字入力を停止したい場合は.neverを指定します。

.never 自動大文字化しません。
.characters 全ての文字を大文字化します。
.sentences 各文の最初の文字を大文字化します。(デフォルト)
.words 各単語の最初の文字を大文字化します。

テキストの配置指定

テキストの配置を指定します。
指定可能な値は次の通りです。

.center 中央寄せ
.leading 左寄せ(デフォルト)
.trailing 右寄せ
スポンサーリンク

あわせて読みたい記事

【SwiftUI】TextEditorの使い方
複数行のテキストが編集可能なTexiEditorの使い方を解説します。
【SwiftUI】Buttonの使い方
(2021/10/19 更新)ラベルとアクションを持つButtonの使い方を解説します。
【SwiftUI】値の変更を検知する(onChange)
値の変更を検知するonChangeモディファイアの使い方を解説します。
【SwiftUI】Viewの表示/非表示時のアクション定義(onAppear、onDisappear)
(2021/10/09 更新)Viewが表示または消えた時に実行するアクションを指定方法を解説します。
スポンサーリンク
SwiftUI
カピ通信