この記事では、SwiftUIのキーボードでTextfieldを隠さない方法について解説します。
テキストを入力するTextfieldが、画面上部にある場合は、入力用のキーボードは表示されても入力の妨げにはなりませんが、画面下部や、スクロールが必要な場所にある場合は対策が必要です。
Keyboard Observingという非常に簡単に導入できる便利なモジュールがあるので、今回はそちらを利用する方法を紹介します。
また、キーボード内の【リターン】や【改行】キーを押さなくても、画面をタップしてキーボードを消せる方法も一緒に解説します。
モジュールの導入を便利でするCocoaPodsのインストールの方法から解説していきます。
◆動作検証環境
・XCode：12.1
・SwiftUI：2.0
CocoaPodsのインストール
まずは下記のコマンドを実行してCocoaPodsをインストールします。
1 2 3 | sudo gem install cocoapods |
インストールが終わったら、次のコマンドで初期化を行います。
1 2 3 | pod setup |
XcodeプロジェクトへCocoaPodsを導入する
導入の作業の前に、Xcodeのプロジェクトが開かれているか確認します。開いている場合はプロジェクトを閉じます。
プロジェクトディレクトリへの移動
1 2 3 | cd xcode_project |
CocoaPodsファイルの作成
1 2 3 | pod init |
Podfileの編集（KeyboardObservingの導入）
さきほどのpod init を行ったディレクトリにPodfile が作成されるので、内容を下記のように編集します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | # Uncomment the next line to define a global platform for your project # platform :ios, '9.0' target 'YourApp' do # Comment the next line if you don't want to use dynamic frameworks use_frameworks! # Pods for YourApp pod 'KeyboardObserving' #追加 target 'YourAppTests' do inherit! :search_paths # Pods for testing end target 'YourAppUITests' do # Pods for testing end end |
編集後に下記コマンドでKeyboardObserving のインストールを行います。
1 2 3 | pod install |
インストール後の更新作業は下記コマンドで行います。
1 2 3 | pod update |
対象のモジュールのインストール後からは、ProjectName.xcworkspace で作業、編集を行います（ProjectName.xcodeproj ではない。）
KeyboardObservingを利用する
ここまでの作業でKeyboardObservingを利用できる準備が整ったので早速、対象のファイルで使用していきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import KeyboardObserving VStack { VStack { TextField("メールアドレスを入力してください", text: $mailAdress) TextField("パスワードを入力してください", text: $password2) TextField("パスワードを入力してください（確認）", text: $Password2) } .keyboardObserving() } |
import KeyboardObserving でインポートを行います。
対象のフィールドをタップした際に、View単位で移動させます。
対象のViewに.keyboardObserving()でモディファイアを行います。
TextField以外の場所をタップしてキーボードを閉じる方法
通常の設定の場合、TextFieldを閉じる方法はキーボード内の[return]や[改行]を選択する必要があります。
しかし、keybordタイプをnumpadなど[return]や[改行]のボタンがないタイプにする場合は、TextField以外の背景をタップした際にキーボードが閉じる設定にする必要があります。
キーボードを閉じる際は、以下のコードを利用します。
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
上記のコードを、TextField以外の背景をタップした際に実行するようにZStackを使ってコーディングを行います。
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 39 40 41 42 43 | var body: some View { ZStack{ Color(.clear) .onTapGesture { UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil) } VStack{ Text("ログイン") Divider() .padding() VStack(alignment:.leading){ Text("e-mail") .padding(.leading) TextField("e-mailを入力", text:$eMail ) .keyboardType(.emailAddress) .textFieldStyle(RoundedBorderTextFieldStyle()) .padding() Text("password") .padding(.leading) SecureField("passwordを入力", text:$password, .textFieldStyle(RoundedBorderTextFieldStyle()) .padding() }.keyboardObserving() Divider() .padding() Button(action:{ appState.makeLogin(email: eMail, password: password) }){ Text("ログイン") .foregroundColor(Color.white) .frame(width: 100, height: 40, alignment: .center) .background(Color.green) .cornerRadius(50) .padding() } } } } |
Form内でキーボードを閉じる操作をする際の方法
通常はZStackを利用し、TextFieldの背面にキーボードを隠す処理を監視する背景を設置する方法を取りますが、Formを使うViewの場合、Sectionを使い背景に指定しているため、このSectionにタップの処理を監視させる方法にする必要があります。
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 | var body: some View { NavigationView{ Form{ Section(header: VStack(alignment: .leading){ Text("4：メモの追加") .font(.headline) .padding(.bottom) .padding(.top) Text("登録情報を追加します") } ){ if #available(iOS 14.0, *) { TextEditor(text: $appState.memo) } else { TextField("メモ", text: $appState.memo) } }.onTapGesture { UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil) } }.navigationBarTitle("新規追加") .keyboardObserving() } } |
以上、SwiftUIでキーボードでTextfieldを隠さない方法（Keyboard Observing）とCocoaPodsのインストール方法を紹介しました。