（2020/09/26 更新）
テキスト入力に使うTextField()の使い方を解説します。
環境
この記事の情報は次のバージョンで動作確認しています。
【Swift】5.3
【iOS】14.0
【macOS】Catalina バージョン 10.15.6
基本的な使い方
|
1 2 3 |
TextField("プレースホルダー", text: $string） |
最初の引数には入力域が空の場合に表示される文字列（プレースホルダー）を指定します。
一般的にはそこに何を入力すべきかを表す文字列が入ります。
プレースホルダーが不要の場合は””（空文字）を指定します。
2つめの引数textは、入力された文字列を格納するString型のプロパティを指定します。
ここで使用するプロパティは値が変更できるように、@State等で宣言しておく必要があります。
また、頭に$をつける事でプロパティの値では無く参照を渡し、TextField()がプロパティの値を更新可能にする意味があります。
@Stateについて、詳しくはこちらの記事を参照して下さい。
使用例
TextField()で入力した文字列が、リアルタイムにText()メッセージに反映されるサンプルです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
struct ContentView: View { @State private var name = "" var body: some View { VStack { TextField("あなたの名前", text: $name) .textFieldStyle(RoundedBorderTextFieldStyle()) // 入力域のまわりを枠で囲む .padding() // 余白を追加 Text("こんにちは、\(name)さん") } } } |
イベントを取得する
|
1 2 3 4 5 6 |
TextField("プレースホルダー", text: $string, onEditingChanged: (Bool) -> Void, onCommit: () -> Void ) |
イベントを取得するための、引数が２つあります。
onEditingChanged
TextField()にカーソルが移動したタイミングと抜けたタイミングで実行する処理をクロージャーで指定します。
クロージャーは引数としてブール値を受け取り、カーソルが入ったタイミングでtrueが、抜けたタイミングでfalseが渡ります。
カーソルが抜けるのは「改行」をタップするか、他の入力域にカーソルが移動した時のみで、他のボタンをタップしてもカーソルは抜けませんので注意が必要です。
onCommit
ユーザーがアクションを起こしたタイミングで実行する処理をクロージャーで指定します。
通常はソフトウェアキーボードで「改行」がタップされたタイミングになります。
使用例
名前を入力するフォームのサンプルです。
次の３つのイベントを処理します。
- 入力開始時に、メッセージをクリア
- 入力中の間は、入力域の周りに青い影を表示。
- リターンが押されたら、メッセージをセットして、入力域をクリア。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
struct ContentView: View { @State private var name = "" @State private var message = "" @State private var editting = false var body: some View { VStack { TextField("名前を入力して下さい", text: $name, onEditingChanged: { begin in /// 入力開始処理 if begin { self.editting = true // 編集フラグをオン self.message = "" // メッセージをクリア /// 入力終了処理 } else { self.editting = false // 編集フラグをオフ } }, /// リターンキーが押された時の処理 onCommit: { self.message = "こんにちは、\(self.name)さん" // メッセージセット self.name = "" // 入力域をクリア }) .textFieldStyle(RoundedBorderTextFieldStyle()) // 入力域を枠で囲む .padding() // 余白を追加 // 編集フラグがONの時に枠に影を付ける .shadow(color: editting ? .blue : .clear, radius: 3) Text(message) } } } |
TextFieldで使えるModifier
TextFieldで使える代表的なModifierを紹介します。
表示スタイルの指定
|
1 2 3 |
.textFieldStyle(RoundedBorderTextFieldStyle()) |
TextField()に丸みのある長方形の枠を付加します。
現時点のiOS14では、このタイプか、デフォルトのPlainTextFieldStyle（枠無し）しか選択できません。
キーボード指定
|
1 2 3 |
.keyboardType(.numberPad) |
表示するソフトウェアキーボードを指定します。
次のようなキーボードが指定可能です。
| .numberPad | 数値のみのキーボード |
| .decimalPad | 小数点入力可能な数値キーボード |
| .phonePad | 電話番号入力用のキーボード |
| .URL | URLエントリ用に最適化されたキーボード |
| .asciiCapable | 標準のASCII文字キーボード |
| .numbersAndPunctuation | 数字と句読点キーボード |
自動大文字入力の適用設定
|
1 2 3 |
.autocapitalization(.none) |
アルファベット入力時の、自動大文字入力制御を設定します。
自動大文字入力を停止したい場合は.noneを指定します。
| .none | 自動大文字化しません。 |
| .words | 各単語の最初の文字を大文字化します。 |
| .sentences | 各文の最初の文字のを大文字化します。（デフォルト） |
| .allCharacters | 全ての文字を大文字化します。 |
テキストの配置指定
|
1 2 3 |
.multilineTextAlignment(配置指定) |
テキストの配置を指定します。
指定可能な値は次の通りです。
| .center | 中央寄せ |
| .leading | 左寄せ（デフォルト） |
| .trailing | 右寄せ |
あわせて読みたい記事
