[Extension 공유] UIView.moveWithKeyboard 사용법 - 키보드에 따라 움직이는 뷰

[tngusmiso]

로그인 화면이나 코드 입력 화면에서 Submit 버튼은 화면 하단에 붙어있습니다.

textField에 초점이 잡히면서 키패드가 올라오면 버튼이 가려져서 누를 수 없는데요,
이럴 때 키보드가 올라온 만큼 버튼을 위로 자연스럽게 올리는 기능을 구현했습니다.
필요한 곳에서 자유롭게 사용하면 됩니다.

23bab8f <- 여기서 구현했어요

키보드 동작 Notification 등록

ViewController의 viewDidLoad()에서 Notification을 등록하여 키보드 동작을 감지할 수 있습니다.

class ViewController: UIViewController {
    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
        )
    }        
}

moveWithKeyboard(willShow: notification: safeAreaBottomInset:)

UIView+Extension에 moveWithKeyboard(willShow: notification: safeAreaBottomInset:) 를 구현해두었습니다.

Parameters

• willShow: Bool
  • 키보드가 올라올 때는 true, 키보드가 내려갈 때는 false를 전달합니다.
• notification: NSNotification
  • 호출된 notification을 전달합니다.
• safeAreaBottomInset: CGFloat
  • 보통 뷰 하단에 위치하는 뷰는 safeArea를 고려해야하는데요,
    safeArea 내부 기준으로 오토레이아웃이 저장된 경우 view.safeAreaInset.bottom을 전달하고,
    safeArea 영역을 침범하는 경우 0을 전달하면 됩니다.

구현방식

키보드 애니메이션과 키보드 높이를 구해서 동일한 애니메이션을 통해 뷰를 이동시키는 로직을 구현했습니다.
검색하면 이런 방식으로 constraints의 constant를 조정하는 식으로 많이 구현하더라구요
그런데 저희는 Snapkit을 사용하다보니 constraint를 불러오기 어려운 상황이었습니다.
그래서 CGAffineTransform을 사용하여 애니메이션을 적용하는 방식으로 만들었습니다!

view.transform = CGAffineTransform(..) 을 통해 원하는만큼 위치를 이동시켰다가
view.transform = CGAffineTransform.identify 를 적용하여 원래 위치로 이동시킬 수 있습니다.

Selector 구현

위에서 Notification을 등록했으니, 호출되는 selector도 구현해줍니다.
이동시키고자 하는 view의 moveWithKeyboard 를 호출해주면 됩니다.

@objc func keyboardWillShow(_ notification: NSNotification) {
    if self.isEditingCode {
        self.attendButton.moveWithKeyboard(
            willShow: true,
            notification: notification,
            safeAreaBottomInset: self.view.safeAreaInsets.bottom
        )
    }
}

@objc func keyboardWillHide(_ notification: NSNotification) {
    self.attendButton.moveWithKeyboard(
        willShow: false,
        notification: notification,
        safeAreaBottomInset: self.view.safeAreaInsets.bottom
    )
}