【iOS】キーボード表示状態によってレイアウトが変更されるようにStoryboardで簡単に設定できる。けど
iOS 15からはkeyboardLayoutGuideが使えるようになっており、キーボードの表示をNotificationCenterで検知して、対象のViewの高さや制約を変更する為にゴニョゴニョするという必要がなくなっております。
簡単に設定できるようになっているので試していきます。
環境
- Xcode 14.3
- iOS 16.2
keyboardLayoutGuideをStoryboardで設定
ViewにkeyboardLayoutGuideを追加
LayoutGuideの中にKeyboardという項目があるので、そこにチェックを入れます。
(今回は一番親になるViewに追加しております)
Keyboardにチェックを入れると、View Controller Scene下部にKeyboard Layout Guideが追加されます。
制約を追加
キーボードの表示と共に表示位置を変えたいViewのbottom constraintを設定します。
制約設定時に、Keyboard Layout Guideを対象にすることが出来るので設定します。
UI完成形
このようなUIになりました。
TextFieldのリターンキーを押すとキーボードが閉じるようにしています。
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var textField: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
textField.delegate = self
}
}
extension ViewController: UITextFieldDelegate {
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
textField.resignFirstResponder()
return true
}
}
Demo
とても簡単にキーボードの高さを考慮できるようになりました。
注意点
しかし、下記の端末で実行するとKeyboard Layout Guideと制約を関連付けたTextFieldを内包するグレーのViewが表示されなくなってしまいました。
- 検証端末1
- iPhone SE(1st)
- iOS 15.7.7
- 実機
- 検証端末2
- iPhone SE(3rd)
- iOS 15.5
- シミュレータ
ただ、シミュレータのiPhone SE(3rd) iOS 16.4だと発生しないことから全部の端末を確認出来ていませんが、SE端末系+iOS 15系だと発生する可能性は高そうです。
解決策
コードで制約を設定してあげることで解決出来ました。
class ViewController: UIViewController {
@IBOutlet weak var textField: UITextField!
@IBOutlet weak var grayView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
textField.delegate = self
// コードで制約を付ける
view.keyboardLayoutGuide.topAnchor.constraint(equalTo: grayView.bottomAnchor).isActive = true
}
}
まとめ
- Storyboard上で簡単にキーボードを考慮した制約付けが簡単に出来る
- SE端末 × iOS 15系だと正常に動作していないと思われる
- コードでキーボード制約を付けると全端末で意図した動作になる
実際の動作を見た感じは、Storyboardでのキーボード制約の利用は、iOS 15を切ってからの方が良いかも知れないと感じました。
おわりに
もし、SE系+iOS 15系の現象について詳しい方いましたら、優しくご教授いただければと思います🙇
参考
Discussion