SwiftUIのTextEditor/TextFieldとキーボードとの間隔を調整

SwiftUIのTextEditor/TextFieldとキーボードとの間隔を調整する

SwiftUIでTextEditorやTextFieldは、フォーカスが当たると自動でキーボードを避けて上に持ち上がります
デフォルトだとTextEditorやTextFieldのコンポーネントの底部とキーボードの上部には隙間がありません
このコンポーネントの底部とキーボードの上部を隙間を調整しようとした際に、思いの外ハマったので備忘録です

デフォルト	期待動作

TextEditor/TextFieldの実装

コード

まずは、シンプルなTextEditorを実装してみた

struct ContentView: View {
    @FocusState var focus:Bool

    @State var text: String = ""

    var body: some View {
        ScrollView {
            VStack(spacing: 0) {
                Color.red
                    .frame(height: 600)

                TextEditor(text: $text)
                    .frame(height: 200)
                    .border(Color.blue, width: 1)
                    .padding(.init(top: 16, leading: 16, bottom: 64, trailing: 16))
                    // TextEditor上でタップしても `focus = false` させない
                    .onTapGesture {}
                    .focused($focus)

                Color.green
                    .frame(height: 600)
            }
        }
        .onTapGesture {
            focus = false
        }
    }
}

結果

TextEditorにフォーカスが当たると、キーボードを避けてTextEditorが持ち上がりますが、TextEditorの底部とキーボードの上部に隙間がありません
TextEditorについた上左右16pt、下64ptのpaddingが無視されているので、これを考慮した位置にTextEditorが移動して欲しいです

safeAreaInsetを付ける

コード

私が調べた限り最もシンプルな実現方法はフォーカスが当たっている間、safeAreaInsetでinsetをつけるという手法です

struct ContentView: View {
    @FocusState var focus:Bool

    @State var text: String = ""

    var body: some View {
        ScrollView {
            VStack(spacing: 0) {
                Color.red
                    .frame(height: 600)

                TextEditor(text: $text)
                    .frame(height: 200)
                    .border(Color.blue, width: 1)
                    .padding(.init(top: 16, leading: 16, bottom: 64, trailing: 16))
                    // TextEditor上でタップしても `focus = false` させない
                    .onTapGesture {}
                    .focused($focus)

                Color.green
                    .frame(height: 600)
            }
        }
        .safeAreaInset(edge: .bottom, spacing: 0) {
            if focus {
                Color.clear.frame(height: 64)
            }
        }
        .onTapGesture {
            focus = false
        }
    }
}

結果

TextEditorにフォーカスが当たった際に、自動でinsetを考慮した位置までスクロールされます

しかし、safeAreaInsetの部分は、ScrollViewのコンテンツが触れません
そのため、例えばTextEditorの下にボタンを配置して、それを押すことができません

キーボード表示時	キーボード非表示時

手動でTextEditorを移動させる

safeAreaInsetを付けるとScrollViewのコンテンツが触れられなくなるので、手動でTextEditorを移動させてみました
.ignoresSafeArea(.keyboard) で自動でキーボードを避けないようにします
合わせてキーボードが表示された際に、キーボードの大きさに合わせて手動でsafeAreaInsetを付けます
また、キーボードのsafeAreaInsetが付くのに合わせて、ScrollViewReaderを利用して指定したViewまでスクロールさせます

struct ContentView: View {
    @FocusState var focus:Bool
    @State var keyboardHeight: CGFloat = 0

    @State var text: String = ""

    var body: some View {
        ScrollViewReader { proxy in
            ScrollView {
                VStack(spacing: 0) {
                    Color.red
                        .frame(height: 600)

                    TextEditor(text: $text)
                        .frame(height: 200)
                        .border(Color.blue, width: 1)
                        .padding(.init(top: 16, leading: 16, bottom: 64, trailing: 16))
                        // TextEditor上でタップしても `focus = false` させない
                        .onTapGesture {}
                        .focused($focus)
                        .id("TextEditor")

                    Color.green
                        .frame(height: 600)
                }
            }
            .onTapGesture {
                focus = false
            }
            .onReceive(keyboardHeightPublisher) { value in
                keyboardHeight = value
            }
            .onChange(of: keyboardHeight) { oldValue, newValue in
                withAnimation {
                    if focus, newValue > 0 {
                        proxy.scrollTo("TextEditor")
                    }
                }
            }
        }
        .safeAreaInset(edge: .bottom, spacing: 0) {
            if keyboardHeight > 0 {
                Color.clear.frame(height: keyboardHeight)
            }
        }
        .ignoresSafeArea(.keyboard)
    }

    var keyboardHeightPublisher: some Publisher<CGFloat, Never> {
        Publishers.Merge(
            NotificationCenter.default
                .publisher(for: UIResponder.keyboardWillShowNotification)
                .compactMap {
                    ($0.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?
                        .cgRectValue.height
                }
                .map { keyboardHeight in
                    let scene = UIApplication.shared.connectedScenes
                        .first(where: { $0.activationState == .foregroundActive }) as? UIWindowScene
                    return max(0, keyboardHeight - (scene?.windows.first?.safeAreaInsets.bottom ?? 0))
                },
            NotificationCenter.default
                .publisher(for: UIResponder.keyboardWillHideNotification)
                .map { _ in 0 }
        )
        .eraseToAnyPublisher()
    }
}

結果

TextEditorにフォーカスが当たった際に、好きな位置で表示できるようになりました
スクロールの位置を移動しているので、TextEditorの下のコンテンツが触れない問題も発生しません

まとめ

SwiftUIのTextEditor/TextFieldとキーボードとの間隔を調整する方法の備忘録でした
結構大変なので、より良いやり方をご存知でしたら教えて頂けると嬉しいです