viewをタップするとレイアウトが崩れてしまう。（キーボード表示について）

Question

前提・実現したいこと

Twitterの投稿画面のようなものを作っています。
キーボードが表示されたときにはキーボードの上に投稿ボタンなどを配置したいと考えています。
画面遷移時にTextViewにフォーカスを当てるようにしているのですが、TextViewを2回タップするとボタンなどを配置しているViewのレイアウトが変わってしまうのでそれを防ぎたいです。

発生している問題

《ボタンなどを配置しているViewについて》
キーボードの上に表示させる投稿ボタンなどのUIパーツを配置するためのView(keyboardBackView)を画面底辺に設置しています。
画面遷移のタイミングでキーボードが表示されるので（常時）、keyboardBackViewの高さにキーボードの高さを加えて、キーボード上に表示されるように調整しています。

このときにTextViewにフォーカスがあたっている状態なので、TextViewを2回タップするとkeyboardBackViewの高さが変わってしまいます。（上に高さが加わる）
タップしてもさらに高さを加えないようにしたいです。

該当のソースコード

import UIKit

class PostViewController: UIViewController, UIScrollViewDelegate {
    
    @IBOutlet weak var textView: UITextView!
    @IBOutlet weak var wordCountLabel: UILabel!
    fileprivate let placeholder: String = "テキストを入力" // プレースホルダ
    fileprivate var maxWordCount: Int = 100 // 最大文字数
    @IBOutlet weak var keyboardBackViewConstraint: NSLayoutConstraint!
    @IBOutlet weak var keyboardBackView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.textView.delegate = self
        
        if textView.text.isEmpty {
            textView.textColor = .darkGray
            textView.text = placeholder
            self.wordCountLabel.text = "300/300"
        }
        
        NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillShow), name: UIResponder.keyboardWillChangeFrameNotification, object: nil)
        
        // 遷移時にtextViewにフォーカスをあてる
        self.textView.becomeFirstResponder()
    }
    
    override func viewDidLayoutSubviews() {
        self.keyboardBackView.addBorder(width: 0.5, color: UIColor.black, position: .top)
    }
    
    @objc func keyboardWillShow(notification: NSNotification) {
        if let keyboardSize = (notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue {
            
            let suggestionHeight = self.keyboardBackViewConstraint.constant + keyboardSize.height
            self.keyboardBackViewConstraint.constant = suggestionHeight
        }
    }
    
    
    @IBAction func cancelButtonTapped(_ sender: Any) {
        self.dismiss(animated: true, completion: nil)
        
    }
    
}

extension PostViewController: UITextViewDelegate {
    
    func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
        let existingLines = textView.text.components(separatedBy: .newlines) 
        let newLines = text.components(separatedBy: .newlines) 
        let linesAfterChange = existingLines.count + newLines.count - 1 
        return linesAfterChange <= 300 && textView.text.count + (text.count - range.length) <= maxWordCount
    }
    
    func textViewDidChange(_ textView: UITextView) {
        let existingLines = textView.text.components(separatedBy: .newlines) 
        if existingLines.count <= 300 {
            self.wordCountLabel.text = "(maxWordCount - textView.text.count)/300"
        }
    }
    
    func textViewDidBeginEditing(_ textView: UITextView) {
        if textView.text == placeholder {
            textView.text = nil
            textView.textColor = .darkText
        }
    }
    
    func textViewDidEndEditing(_ textView: UITextView) {
        if textView.text.isEmpty {
            textView.textColor = .darkGray
            textView.text = placeholder
        }
    }
}

enum BorderPosition {
    case top
    case left
    case right
    case bottom
}

extension UIView {
    /// 特定の場所にborderをつける
    ///
    /// - Parameters:
    ///   - width: 線の幅
    ///   - color: 線の色
    ///   - position: 上下左右どこにborderをつけるか
    func addBorder(width: CGFloat, color: UIColor, position: BorderPosition) {
        
        let border = CALayer()
        
        switch position {
        case .top:
            border.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: width)
            border.backgroundColor = color.cgColor
            self.layer.addSublayer(border)
        case .left:
            border.frame = CGRect(x: 0, y: 0, width: width, height: self.frame.height)
            border.backgroundColor = color.cgColor
            self.layer.addSublayer(border)
        case .right:
            print(self.frame.width)
            
            border.frame = CGRect(x: self.frame.width - width, y: 0, width: width, height: self.frame.height)
            border.backgroundColor = color.cgColor
            self.layer.addSublayer(border)
        case .bottom:
            border.frame = CGRect(x: 0, y: self.frame.height - width, width: self.frame.width, height: width)
            border.backgroundColor = color.cgColor
            self.layer.addSublayer(border)
        }
    }
}

Answer 1

UIResponder.keyboardWillChangeFrameNotification はキーボードを出現させたあと、テキストの入力内容に応じて変換予測を出力させるなどする場合にも発生しますので、ひとつの textView を連続してクリックすると、複数回呼び出される可能性があります。

そういう背景を考えた場合、

 @objc func keyboardWillShow(notification: NSNotification) {
        if let keyboardSize = (notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue {

            // MARK: 現在の View の高さにキーボードの高さを加えている
            let suggestionHeight = self.keyboardBackViewConstraint.constant + keyboardSize.height
            self.keyboardBackViewConstraint.constant = suggestionHeight
        }
    }

上記の MARK: の部分で、最新の View の高さにキーボードの高さを追加していますので、変換予測を出した際には、(キーボードの高さ * 2 + 変換予測のフレーム高さ)分の制約を算出することになってしまいます。

今回つくられた View の高さは固定だと思いますので、たとえば固定値を30と決めた場合、

    @objc func keyboardWillShow(notification: NSNotification) {
        // あるいは、固定値を使わず viewDidLoad で StoryBoard での設定を代入させる
        let defaultHeightConstraint: CGFloat = 30
        
        if let keyboardSize = (notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue {
            // MARK: View の固定値 + キーボードの高さ
            let suggestionHeight = defaultHeightConstraint + keyboardSize.height
            self.keyboardBackViewConstraint.constant = suggestionHeight
        }
    }

にすれば、おそらく期待されている動作になるかと思います。

また、ご提示のコードは View の高さ制約を変更していますが、View の bottom に対する制約を変更した方が良さそうに思えます。

また、この View を常時表示するのでなければ、inputAccessoryView として設定するのが一番よいかもしれません。

• inputAccessoryView

The custom accessory view to display when the text view becomes the first responder.

Comments

[ZY.]

ありがとうございます！！期待する動作になりました。
bottomに対する制約を変更とのことですが、キーボードバックにあるViewをキーボード（予測変換）の上まで持ち上げるようにするということでしょうか。

もしくは以下のようにViewのButtomに対してキーボードの高さを加えるということでしょうか。
（Viewの高さはStoryboardで固定の状態で）
let suggestionHeight = keyboardSize.height
self.keyboardBackViewBottomConstraint.constant = suggestionHeight

[TsukubaDepot]

すいません、こちらは他の通知に埋もれて気づいていませんでした。
最終的には目的次第なのですが、今回の目的であれば「キーボードバックにあるViewをキーボード（予測変換）の上まで持ち上げるようにする」ということでよいのではないかと思います。
ただ、これも親 View のどこに textField があるのかによって、View 自身を動かさなければならない場合もあると思いますので、それは状況に合わせて判断していただくことになるかと思います。