This post presents an implementation of animations that animate alongside the iOS keyboard animation. Following the method in this post will allow your views to animate smoothly when the iOS keyboard shows and hides.
- Subscribe To Keyboard Show And Hide Notifications
- keyboardAnimationCurveUserInfoKey and UIViewPropertyAnimator
- Animate With The iOS Keyboard
- Example Keyboard Animation Implementation
- Move View With iOS Keyboard Animation
Subscribe To Keyboard Show And Hide Notifications
The first step is to subscribe to the will show and will hide keyboard animations.
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Subscribe to Keyboard Will Show notifications
NotificationCenter.default.addObserver(
self,
selector: #selector(keyboardWillShow(_:)),
name: UIResponder.keyboardWillShowNotification,
object: nil
)
// Subscribe to Keyboard Will Hide notifications
NotificationCenter.default.addObserver(
self,
selector: #selector(keyboardWillHide(_:)),
name: UIResponder.keyboardWillHideNotification,
object: nil
)
}
@objc
dynamic func keyboardWillShow(
_ notification: NSNotification
) { }
@objc
dynamic func keyboardWillHide(
_ notification: NSNotification
) { }
}
keyboardAnimationCurveUserInfoKey and UIViewPropertyAnimator
The next step is to create a function that wraps the iOS keyboard animation. The iOS keyboard animation uses a custom animation curve that is not publically accessible. To animate with the keyboard, extract the curve from the notification using the key UIResponder.keyboardAnimationCurveUserInfoKey
and then use a UIViewPropertyAnimator
to perform the animations.
In the following implementation, the animations
block passed into animateWithKeyboard
allows the caller to specify layout changes that should animate with the iOS keyboard animation. An example implementation is available at the end of this post.
extension ViewController {
func animateWithKeyboard(
notification: NSNotification,
animations: ((_ keyboardFrame: CGRect) -> Void)?
) {
// Extract the duration of the keyboard animation
let durationKey = UIResponder.keyboardAnimationDurationUserInfoKey
let duration = notification.userInfo![durationKey] as! Double
// Extract the final frame of the keyboard
let frameKey = UIResponder.keyboardFrameEndUserInfoKey
let keyboardFrameValue = notification.userInfo![frameKey] as! NSValue
// Extract the curve of the iOS keyboard animation
let curveKey = UIResponder.keyboardAnimationCurveUserInfoKey
let curveValue = notification.userInfo![curveKey] as! Int
let curve = UIView.AnimationCurve(rawValue: curveValue)!
// Create a property animator to manage the animation
let animator = UIViewPropertyAnimator(
duration: duration,
curve: curve
) {
// Perform the necessary animation layout updates
animations?(keyboardFrameValue.cgRectValue)
// Required to trigger NSLayoutConstraint changes
// to animate
self.view?.layoutIfNeeded()
}
// Start the animation
animator.startAnimation()
}
}
Animate With The iOS Keyboard
That’s it! Using the animateWithKeyboard
method allows custom animations to move with the iOS keyboard. For example, a UITextField
may move up and down as the iOS keyboard shows and hides.
Example Keyboard Animation Implementation
// ...
@objc
dynamic func keyboardWillShow(
_ notification: NSNotification
) {
animateWithKeyboard(notification: notification) {
(keyboardFrame) in
let constant = 20 + keyboardFrame.height
self.textFieldTrailingConstraint?.constant = constant
}
}
@objc
dynamic func keyboardWillHide(
_ notification: NSNotification
) {
animateWithKeyboard(notification: notification) {
(keyboardFrame) in
self.textFieldTrailingConstraint?.constant = 20
}
}
// ...