【SwiftUI】TextFieldの使い方

(2020/08/19 更新)

テキスト入力に使うTextField()の使い方を解説します。

【図0:タイトル】

スポンサーリンク

環境

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

【Xcode】11.6
【Swift】5.2.4
【iOS】13.6
【macOS】Catalina バージョン 10.15.6
現時点のバージョンでは、TextField内でObservedObjectを使うと日本語変換が不安定になるようです。Apple側の対応を待ちましょう。
スポンサーリンク

基本的な使い方

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

2つめの引数textは、入力された文字列を格納するString型のプロパティを指定します。
ここで使用するプロパティは値が変更できるように、@State等で宣言しておく必要があります。
また、頭に$をつける事でプロパティの値では無く参照を渡し、TextField()がプロパティの値を更新可能にする意味があります。

@Stateについて、詳しくはこちらの記事を参照して下さい。

【SwiftUI】@Stateの使い方
SwiftUIのデータバインディングの仕組みの一つである、@Stateについて解説します。プロパティが更新された場合に、参照しているViewも同時に更新される仕組みが実現できます。

使用例

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

【図1:標準的な使い方】

スポンサーリンク

イベントを取得する

イベントを取得するための、引数が2つあります。

onEditingChanged
TextField()にカーソルが移動したタイミングと抜けたタイミングで実行する処理をクロージャーで指定します。
クロージャーは引数としてブール値を受け取り、カーソルが入ったタイミングでtrueが、抜けたタイミングでfalseが渡ります。
カーソルが抜けるのは「改行」をタップするか、他の入力域にカーソルが移動した時のみで、他のボタンをタップしてもカーソルは抜けませんので注意が必要です。

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

使用例

名前を入力するフォームのサンプルです。
次の3つのイベントを処理します。

  • 入力開始時に、メッセージをクリア
  • 入力中の間は、入力域の周りに青い影を表示。
  • リターンが押されたら、メッセージをセットして、入力域をクリア。

【図2:イベントを取得する】

スポンサーリンク

TextFieldで使えるModifier

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

表示スタイルの指定

TextField()に丸みのある長方形の枠を付加します。
現時点のiOS13では、このタイプか、デフォルトの「枠無し」しか選択できません。

キーボード指定

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

.numberPad 数値のみのキーボード
.decimalPad 小数点入力可能な数値キーボード
.phonePad 電話番号入力用のキーボード
.URL URLエントリ用に最適化されたキーボード
.asciiCapable 標準のASCII文字キーボード
.numbersAndPunctuation 数字と句読点キーボード

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

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

.none 自動大文字化しません。
.words 各単語の最初の文字を大文字化します。
.sentences 各文の最初の文字のを大文字化します。(デフォルト)
.allCharacters 全ての文字を大文字化します。
スポンサーリンク

あわせて読みたい記事

【SwiftUI】Viewに影をつける(shadow)
Viewに影のエフェクトを付加する.shadow()について解説します。
【SwiftUI】Viewに余白を付加する(padding)
(2020/06/07 更新)Viewに余白を付加するpaddingモデファイアについて解説します。
【SwiftUI】条件によってViewの見た目を変える方法
(2020/03/25 更新)特定の条件によってViewの見た目を変える方法を紹介します。
Kindle unlimited 読み放題で読める管理人のおすすめ本です!
スポンサーリンク
SwiftUI
カピ通信