Why does my function to adjust view according to keyboard height behave erratically? - swift

Question

I am trying to re-create a Facebook sign up page for practice; the set up of my viewController is as follows:
1)A profile image container at the top,
2)Email textfield
3)Password Textfield
4)Confirm Password textfield
To solve the issue of the keyboard blocking the "Confirm Password" field, I have used listeners as below.
The issue is that the very first time a user clicks on a textfield to type (no matter which one), the screen moves way too far up, such that the email textfield at the top ends up going beyond the screen size on top. However, when I dismiss the keyboard and re-click on any textfield, it goes up as intended: Only until the top textfield reaches the top of the screen.
I can find no other reason for this behaviour, it persisted even after I re-wrote some of my code.
My ViewController set up:
class ViewController: UIViewController {
#objc func dismissKeyboard() {
view.endEditing(true)
}
let imageContainer: UIView = {
let v = UIView()
v.translatesAutoresizingMaskIntoConstraints = false
v.backgroundColor = .red
return v
}()
let emailTF: UITextField = {
let tf = UITextField()
tf.translatesAutoresizingMaskIntoConstraints = false
tf.placeholder = "EMAIL"
return tf
}()
let passwordTF: UITextField = {
let tf = UITextField()
tf.translatesAutoresizingMaskIntoConstraints = false
tf.placeholder = "Password"
return tf
}()
let confirmPasswordTF: UITextField = {
let tf = UITextField()
tf.translatesAutoresizingMaskIntoConstraints = false
tf.placeholder = "Confirm password"
return tf
}()
#objc func keyboardWillShow(notification: NSNotification) {
if let keyboardSize = (notification.userInfo?[UIResponder.keyboardFrameBeginUserInfoKey] as? NSValue)?.cgRectValue {
if self.view.frame.origin.y == 0 {
self.view.frame.origin.y -= keyboardSize.height
}
}
}
#objc func keyboardWillHide(notification: NSNotification) {
if self.view.frame.origin.y != 0 {
self.view.frame.origin.y = 0
}
}
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .lightGray
NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillShow), name: UIResponder.keyboardWillShowNotification, object: nil)
NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillHide), name: UIResponder.keyboardWillHideNotification, object: nil)
view.addSubview(imageContainer)
view.addSubview(emailTF)
view.addSubview(passwordTF)
view.addSubview(confirmPasswordTF)
NSLayoutConstraint.activate([
imageContainer.centerXAnchor.constraint(equalTo: view.centerXAnchor),
imageContainer.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.275),
imageContainer.widthAnchor.constraint(equalTo: view.heightAnchor),
imageContainer.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
emailTF.topAnchor.constraint(equalTo: imageContainer.bottomAnchor),
emailTF.heightAnchor.constraint(equalToConstant: 100),
emailTF.widthAnchor.constraint(equalToConstant: 200),
emailTF.centerXAnchor.constraint(equalTo: view.centerXAnchor),
passwordTF.topAnchor.constraint(equalTo: emailTF.bottomAnchor, constant: 20),
passwordTF.heightAnchor.constraint(equalToConstant: 100),
passwordTF.widthAnchor.constraint(equalToConstant: 200),
passwordTF.centerXAnchor.constraint(equalTo: view.centerXAnchor),
confirmPasswordTF.topAnchor.constraint(equalTo: passwordTF.bottomAnchor, constant: 20),
confirmPasswordTF.heightAnchor.constraint(equalToConstant: 100),
confirmPasswordTF.widthAnchor.constraint(equalToConstant: 200),
confirmPasswordTF.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
let tapToDismissKeyboard: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(self.dismissKeyboard))
view.addGestureRecognizer(tapToDismissKeyboard)
}
}
I'd really appreciate some help as to what I can do to correct this issue.

Answer 1

Seems like this is a known issue raised here and other SO questions too..
Two points to make:-
1) Use UIResponder.keyboardFrameEndUserInfoKey instead of UIResponder.keyboardFrameBeginUserInfoKey at:
if let keyboardSize = (notification.userInfo?[UIResponder.keyboardFrameBeginUserInfoKey] as? NSValue)?.cgRectValue {
in keyboardWillShow()
2) Doing so, you will get the total height of the keyboard including the toolbar. Which means:
However, when I dismiss the keyboard and re-click on any textfield, it
goes up as intended: Only until the top textfield reaches the top of
the screen.
This is the buggy behaviour where you get an incorrect height excluding the toolbar and:
The issue is that the very first time a user clicks on a textfield to
type (no matter which one), the screen moves way too far up, such that
the email textfield at the top ends up going beyond the screen size on
top.
This is actually the intended behaviour with actual height. You could calculate the height of the toolbar and reduce it from this height to achieve your goal! If your VC is embedded in a navigation controller, you could use this
Hope this helps.