【SwiftUI】テキストフィールドとキーボードの表示と種類の指定

2024.06.27
Java基本

本記事では、テキストフィールドの設置方法と、キーボードの表示方法、キーボードの開閉に合わせて表示要素の位置を調整する方法について解説していきます。

1. テキストフィールドの設置
- 1.1. テキストフィールド基本設定
- 1.2. テキストフィールドのサイズ/形を設定
2. キーボードの表示
- 2.1. 数字入力のみ可能なキーボードの表示
- 2.2. キーボードのツールバーを設定
3. まとめ

テキストフィールドの設置

viewsライブラリからTextField()をソースコードにドラッグ&ドロップすることで設置することができます。

viewsライブラリは、Xcodeの右上にある+ボタンをクリックするかショートカット「shift+command+L」を押すことで開くことができます。

テキストフィールド基本設定

配置後のソースコードは以下のようになり、基本との設定値としてはPlaceholderとtextの2つあります。

TextField("Placeholder", text: Value)

Placeholderには入力欄未入力の際に、入力例や入力項目の案内を表示するための値を設定します。

textには、テキストフィールドに実際に入力された内容を保持するための変数を渡します。String型の@State変数を設定します。

DatePicker()はselectionのパラメータにバインディング型のデータを要求しているため、変数の値を監視してviewを再描画できる@State変数を定義し、その変数に「$」をつける形でパラメータを渡します。

@State var inputValue:String = ""
    var body: some View {
        VStack {
            TextField("お名前", text: $inputValue)
        }
        .padding()
    }

テキストフィールドのサイズ/形を設定

TextField()に対して、textFieldStyleを設定することでテキストフィールドのスタイルを変更することができます。設定値は、plane/roundedBorderがあり、planeの場合はデフォルトの表示内容である枠がないスタイルになり、roundedBorderで角丸の枠を設定することができます。

planeを設定した場合

TextField("お名前", text: $inputValue)
                .textFieldStyle(.plain)

表示結果

roundBorderを設定した場合

TextField("お名前", text: $inputValue)
                .textFieldStyle(.roundedBorder)

表示結果

横幅は、frameを使用しwidthを指定することで任意の値に変更することができます。

TextField("お名前", text: $inputValue)
                .textFieldStyle(.roundedBorder)
                .frame(width: 150)

表示結果

キーボードの表示

キーボードは、テキストフィールドを配置した時点で表示することが可能となっています。エディター左上のの▶︎ボタンをクリックしてシミュレータを起動してみてください。

テキストフィールドをクリックすることでキーボードが表示されることを確認できます。

数字入力のみ可能なキーボードの表示

表示するキーボードの種類を変更するためには、TextField()にkeyboardType()を設定します。

キーボードを数字のみに限定するには、keyboardType()に対してdecimalPadを渡してあげます。

TextField("お名前", text: $inputValue)
                .textFieldStyle(.roundedBorder)
                .frame(width: 150)
                .keyboardType(.decimalPad)

表示結果

キーボードのツールバーを設定

キーボードでの入力が完了した際にキーボードを閉じる機能として、「Done」「完了」などのボタンが右上に表示されるようにする方法をご紹介します。

ツールバーの実装はいくつかの段階があり、まずはキーボードが閉じているか開いているかの状態を管理するためのBool型の変数を定義します。

@FocusState var isFocus:Bool;

変数の前についているFocusStateは、テキストフィールドがフォーカスされているかどうかの状態を監視することができる変数です。

この変数を使用してフォーカスの状態を監視するには、TextField()に対してfocused()を使用し、パラメータとして変数を$をつけて渡します。

TextField("お名前", text: $inputValue)
                .textFieldStyle(.roundedBorder)
                .frame(width: 150)
                .focused($isFocus)

続いてキーボードの上にツールバーを表示します。ツールバーの表示はVStackに対して、toolbar{}を指定することで実現することができます。

.toolbar{
            ToolbarItemGroup(placement: .keyboard ){
                Spacer()
                Button("完了"){
                    isFocus = false
                }
            }
}

ツールバーはtoolbarの中にToolbarItemGroup(placement: .keyboard )を設定し、キーボードにに対してツールバーを設定することを決定します。その中にボタンを配置し、ボタンのクリック操作で変数isFocusをfalseに変更することでキーボードを下げることができます。

全体のソース

struct ContentView: View {
    @State var inputValue:String = ""
    @FocusState var isFocus:Bool;
    var body: some View {
        VStack {
            TextField("お名前", text: $inputValue)
                .textFieldStyle(.roundedBorder)
                .frame(width: 150)
                .focused($isFocus)
        }
        .padding()
        .toolbar{
            ToolbarItemGroup(placement: .keyboard ){
                Spacer()
                Button("完了"){
                    isFocus = false
                }
            }
        }
    }
}

表示結果