LoginSignup
4
2

More than 3 years have passed since last update.

【Swift】キーボードに合わせてViewをアニメーションさせる

Last updated at Posted at 2021-03-21

キーボードに合わせてUITextFieldやUIViewをアニメーションさせたい時に、animate(withDuration:animations:completion:)でアニメーションさせようと思ったら上手く動かなかったので調べてみました。
UIResponderを使うと上手くいったので、困っている人は参考にしてみて下さい!

サンプルコード(GitHub)

こんな感じのが作れます。

キーボードの表示・非表示を検知する

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)
}

// Keybordが表示
@objc dynamic func keyboardWillShow(_ notification: NSNotification){

}

// Keybordが非表示
@objc dynamic func keyboardWillHide(_ notification: NSNotification){

}

キーボードのアニメーションを抽出・アニーメーションを実行

@objc dynamic func keyboardWillShow(_ notification: NSNotification){
    // キーボードのdurationを抽出 *1
    let durationKey = UIResponder.keyboardAnimationDurationUserInfoKey
    let duration = notification.userInfo![durationKey] as! Double
    
    // キーボードのframeを抽出する *2
    let frameKey = UIResponder.keyboardFrameEndUserInfoKey
    let keyboardFrameValue = notification.userInfo![frameKey] as! NSValue
    
    // アニメーション曲線を抽出する *3
    let curveKey = UIResponder.keyboardAnimationCurveUserInfoKey
    let curveValue = notification.userInfo![curveKey] as! Int
    let curve = UIView.AnimationCurve(rawValue: curveValue)!
 
    let animator = UIViewPropertyAnimator(duration: duration, curve: curve) {
        // ここにアニメーション化したいレイアウト変更を記述する
        animations?(keyboardFrameValue.cgRectValue)
        self.view?.layoutIfNeeded()
    }
        
    animator.startAnimation()
}

*1 キーボードのduration
*2 キーボードのframe
*3 アニメーション曲線

レイアウト設定時の注意

textFieldなどをキーボードの上にくっつけて表示したい場合はレイアウトの設定をSafe Areaに合わせるとSafe Area分の空白はキーボードとViewの間にできてしまうので注意です。
こんな感じでSuper Viewに合わせましょう!
スクリーンショット 2021-03-21 15.32.52.png

これをUIViewControlleなどでextensionして共通で使えるようにするのがおすすめです。

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2