【Swift】TextViewがキーボードに隠れてしまう問題を解決する

TextViewにテキストを入力していたら、テキストがキーボードの下にまで侵攻して何を入力しているのか分からないという問題が発生しました。

この問題を解決するべく、キーボードが出ている時はTextViewがキーボードに隠れない実装を行うことにしました。

完成形

今回はこの完成形を目指し進めていきます。

環境

• Xcode 12.5
• Swift 5.4

LayoutConstraintの紐付け

まずはtextViewのconstraintsを上下左右とも0に設定しておきます。

そして、textViewとTextViewのBottomのLayoutConstraintをviewControllerに紐付けます。

対象のconstraintをドラッグ&ドロップすることでviewControllerと紐付けることが出来ます。

@IBOutlet weak private var textView: UITextView!
@IBOutlet weak private var textViewButtonConstraint: NSLayoutConstraint!

紐付けが出来たので次に進みましょう。

キーボードの表示非表示の通知を受け取る

まずはviewDidLoad内でNotificationCenterのaddObserverを行い、キーボードのShow/ Hideの通知を受け取り、同時にセレクターの処理を呼べるようにします。

override func viewDidLoad() {
    super.viewDidLoad()
    NotificationCenter.default.addObserver(self,
                                           selector: #selector(keyboardWillShow),
                                           name: UIResponder.keyboardWillShowNotification,
                                           object: nil)
    NotificationCenter.default.addObserver(self,
                                           selector: #selector(keyboardWillHide),
                                           name: UIResponder.keyboardWillHideNotification,
                                           object: nil)
}

addObserverの引数nameでどんな通知を受け取るかを指定することができるのですが、今回はキーボードが「これから出る時」、「これから閉じる」の通知を受け取りたいので、UIResponder.keyboardWillShowNotificationとUIResponder.keyboardWillHideNotificationをそれぞれ指定しました。

selectorで指定しているメソッドも追加しておきます。

@objc private func keyboardWillShow(_ notification: Notification) {
    // キーボードが現れる時の処理
}

@objc private func keyboardWillHide(_ notification: Notification) {
    // キーボードが閉じる時の処理
}

キーボードが出る時の処理を実装する

今回はtextViewに入力した文字がキーボードが隠れないようにする為に、キーボードが出ている時はtextViewをキーボードの高さ分だけtextViewのBottomを上げるという処理で対応することにしました。

キーボードに関する値を取得する

まずは受け取ったnotificationから今回はキーボードの表示非表示に関する値を取り出すことができるので、Notificationのextensionを作成し、キーボードの高さ、キーボードのアニメーション時間、キーボードのアニメーション曲線の値を持つ変数を作成します。

extension Notification {

    // キーボードの高さ
    var keyboardHeight: CGFloat? {
        return (self.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue.height
    }

    // キーボードのアニメーション時間
    var keybaordAnimationDuration: TimeInterval? {
        return self.userInfo?[UIResponder.keyboardAnimationDurationUserInfoKey] as? TimeInterval
    }

    // キーボードのアニメーション曲線
    var keyboardAnimationCurve: UInt? {
        return self.userInfo?[UIResponder.keyboardAnimationCurveUserInfoKey] as? UInt
    }
}

keyboardFrameEndUserInfoKey

Notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey]はNSValueでプロパティとしてキーボードの長方形のCGRectを持っています。今回はそのCGRectからキーボードの高さだけを取り出して変数に渡しています。

keyboardAnimationDurationUserInfoKey

Notification.userInfo?[UIResponder.keyboardAnimationDurationUserInfoKey]はキーボードのアニメーション時間を持っているので、TimeIntervalにダウンキャストして変数に渡しています。

keyboardAnimationCurveUserInfoKey

Notification.userInfo?[UIResponder.keyboardAnimationCurveUserInfoKey]はキーボードのUIView.AnimationCurveを持っており、これはキーボードがどのようなアニメーションカーブでアニメーションするかを定義しています。キーボードの動きに合わせてtextViewの高さを変更したいのでこの値も変数に渡しています。

textViewのBottomをキーボードの高さ分だけ上げる

@objc private func keyboardWillShow(_ notification: Notification) {

    guard let keyboardHeight = notification.keyboardHeight,
          let keyboardAnimationDuration = notification.keybaordAnimationDuration,
          let KeyboardAnimationCurve = notification.keyboardAnimationCurve
    else { return }

    UIView.animate(withDuration: keyboardAnimationDuration,
                   delay: 0,
                   options: UIView.AnimationOptions(rawValue: KeyboardAnimationCurve)) {
        // アニメーションさせたい実装を行う
        self.textViewButtonConstraint.constant = keyboardHeight
    }
}

Notificationから受け取ったキーボードに関する各値をUIView.animateの引数に渡しています。

• withDuration: アニメーションの持続時間
• delay: アニメーションの遅延時間
• options: アニメーションオプション
• animations: アニメーションするviewの実装

animationsのコードブロック内に、textViewButtonConstraint.constantにkeyboardHeightの値を代入することでTextViewのBottomがキーボードの高さ分だけ上がってくれます。

キーボードが隠れる時の処理を実装する

基本的にはキーボードが出る処理とほとんど変わりませんが、キーボードが閉じた時、いわばTextViewを全面に表示したい時なので、UIView.animateのanimationsのコードブロック内で、textViewButtonConstraint.constantの値を0にしてあげるだけで全体に表示されるようになります。

@objc private func keyboardWillHide(_ notification: Notification) {
    guard let keyboardAnimationDuration = notification.keybaordAnimationDuration,
          let KeyboardAnimationCurve = notification.keyboardAnimationCurve
    else { return }

    UIView.animate(withDuration: keyboardAnimationDuration,
                   delay: 0,
                   options: UIView.AnimationOptions(rawValue: KeyboardAnimationCurve)) {
        self.textViewButtonConstraint.constant = 0
    }
}

おまけ

今回の実装では、キーボードの高さ分だけtextViewを上げているつもりですが、実はBottomのsafeAreaInset分も考慮されたまま上がっています。その為、キーボードとtextViewの間にやや隙間が出来てしまいます。

この問題は、キーボードの高さからBottomのsafeAreaInsetの高さを引いてあげると解消出来ます。

UIView.animate(withDuration: keyboardAnimationDuration,
               delay: 0,
               options: UIView.AnimationOptions(rawValue: KeyboardAnimationCurve)) {
    self.textViewBottomConstraint.constant = keyboardHeight - self.view.safeAreaInsets.bottom
}

コード

今回のコードはGitHubに載せております。

おわりに

希望通りの動きを実装することができました。また、keyboardWillShowとkeyboardWillHideの中の実装があまり違いがないのでリファクタリングするのも良さそうですね。

この記事が誰かの助けになれれば幸いです☺︎