SwiftUI キーボードでTextfieldが隠れないようにできるSwiftパッケージ #Swift

はじめに

SwiftUIでアプリを作っているとやはりTextFieldとキーボードの問題にぶつかります。
そんな時にSwiftUIで作られたこちらのパッケージが便利です。

KeyboardObserving

今回も備忘録兼ねて残します。

環境

iOS 13.1
Xcode 11.1 GMseed
Swift 5

導入

今回は、SwiftPMに対応しているので初めてSwiftPMで入れてみることにします。
導入手順は、こちらのSwift Package Managerがめっちゃ便利！の記事を参考にしたので、わからない方は、こちらを参照ください。
とても簡単でした。

使い方

レポジトリのREADMEに書かれているまんまですが、一応書いておきます。

まずは使うファイルでインポートしておきます。

import KeyboardObserving

使い方は、2パターンあります。

ViewModifierを使用する
KeyboardObservingViewを使用する

どちらも試してみましたが、問題なさそうでした。

1. ViewModifierを使用する

こちらは、釣り上げたいViewに.keyboardObserving()を追加するだけです。

           VStack {
                VStack {
                    Text("メールアドレス")
                    RoundedTextField("メールアドレスを入力してください", text: $mailAdress)
                        .padding(.bottom, 20.0)

                    Text("パスワード")
                    RoundedSecureTextField("パスワードを入力してください", text: $password)
                        .padding(.bottom, 20.0)

                    Text("パスワード(確認用)")
                    RoundedSecureTextField("上と同じパスワードを入力してください", text: $verifyPassword)
                        .padding(.bottom, 20.0)
                }
                .padding()
                .keyboardObserving()

                Spacer()

                Button(action: {

                }) {
                    NormalButtonText("確認メールを送る")
                }

                Spacer()
            }

2. KeyboardObservingViewを使用する

まず、SceneDelegate.swiftの中でルートに設定しているViewのenvironmentObjectにKeyboardプロパティを設定します。

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            let viewModel = HomeViewModel()
            window.rootViewController = UIHostingController(rootView: HomeView(viewModel).environmentObject(Keyboard()))
            self.window = window
            window.makeKeyAndVisible()
        }
    }

以下のようにKeyboardObservingViewは内部で@EnvironmentObjectを定義しているのでkeyboardを親のビューで設定していないとクラッシュしますので注意。

public struct KeyboardObservingView<Content: View>: View {

  @EnvironmentObject var keyboard: Keyboard

  let content: Content

  public init(@ViewBuilder builder: () -> Content) {
    self.content = builder()
  }

  public var body: some View {
      content
        .padding([.bottom], keyboard.state.height)
        .edgesIgnoringSafeArea((keyboard.state.height > 0) ? [.bottom] : [])
        .animation(.easeOut(duration: keyboard.state.animationDuration))
  }
}

そうしたら、釣り上げたい要素をKeyboardObservingViewで囲ってあげるだけで終わりです。

                VStack {
                    KeyboardObservingView {
                        VStack {
                            Text("メールアドレス")
                            RoundedTextField("メールアドレスを入力してください", text: $mailAdress)
                                .padding(.bottom, 20.0)

                            Text("パスワード")
                            RoundedSecureTextField("パスワードを入力してください", text: $password)
                                .padding(.bottom, 20.0)

                            Text("パスワード(確認用)")
                            RoundedSecureTextField("上と同じパスワードを入力してください", text: $verifyPassword)
                                .padding(.bottom, 20.0)
                        }
                        .padding()

                    }
                    Spacer()

                    Button(action: {

                    }) {
                        NormalButtonText("確認メールを送る")
                    }

                    Spacer()
                }

実行

今回は、TextFieldはキーボードに完全にかぶっていませんが、.keyboardObserving()もしくは、KeyboardObservingViewで指定したViewがキーボードに隠れる場合は、釣り上げられるようになっているみたいです。

参考

Swift Package Managerがめっちゃ便利！
github KeyboardObserving

さいごに

今までは、高さを再計算してごにょごにょして割と面倒でしたよね。
まぁ、結局、内部的にやっていることは同じようなことですが、ここまでシンプルに記述できるのはとても嬉しいです。
KeyboardObserving側でやっていることはそんなに難しいことではないので、SwiftUI+Combineに慣れてきたらこれを参考に自分で作ってもいいかもしれません。

みなさんも良かったらぜひ使ってみてください。

それでは、ご覧いただきありがとうございました。