키보드 반응하기

 

많은 앱에서 입력 작업을 할때 UI적으로 가장 곤혹스러운게 키보드에 따란 반응이다.
이번 학습은 키보드 관련 정보는 어떻게 얻어오고 처리하는 지 간단하게 살펴보자.

추후 학습 중 더 깊은 내용이 있으면 내용이 추가될 수 있다.

 

키보드 정보 얻기

첫번 째로 우리는 키보드가 나왔는 지, 키보드 높이는 무엇인지 어디서 얻올 수 있을까 ??

답은 이전에 배웠던 UIResponder 이다 

 

 

그 때 배웠던 내용을 인용하면 textField를 누를 때 키보드가 나오는 것은 first responder를 통해 진행된다고 적었었다.

 

그렇다면 UIResponder에 keyboard 관련 내용이 있는 지 한번 공식 사이트를 봐보자

 

UIResponder keyboard관련 상수가 정말 많다 여기서 우리가 사용할 것은 아래 3가지다.

1. 키보드가 나왔을 때
2. 키보드가 사리질 때
3. 키보드의 높이 

---

구현

1.  키보드 등장 및 사라질 때 이벤트 얻기

extension Notification.Name {
    static let keyboardWillShow  = UIResponder.keyboardWillShowNotification
    static let keyboardWillHide  = UIResponder.keyboardWillHideNotification
}

 

보다시피 UIResponder 내 타입 상수로 제공된다.  이후 다음과 같이 observer를 등록 및 해제 과정을 명시하자

 

init() {
    super.init(frame: .zero)
    addView()
    setLayout()
    NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillShow), name: .keyboardWillShow, object: nil)
    NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillShow), name: .keyboardWillHide, object: nil)
}

deinit {
    NotificationCenter.default.removeObserver(self, name: .keyboardWillShow, object: nil)
    NotificationCenter.default.removeObserver(self, name: .keyboardWillHide, object: nil)
}

 

2.  핸들링 처리

우리는 채팅창 대표적으로 카카오톡처럼 키보드가 등장했을 때 입력창이 위로 올라가고 사라지면 다시 원상복구되는 

화면을 간단하게 구현해보자.

@objc func keyboardWillShow(notification: NSNotification) {
        if let keyboardFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue {
            let keyboardHeight = keyboardFrame.cgRectValue.height
            
            // 애니메이션을 적용해 자연스럽게 입력 공간을 올림
            
            UIView.animate(withDuration: 0.5, delay: 0, options: [.curveEaseInOut]) { [weak self] in
                guard let self else { return }
                self.chatInputViewBottomConstraint?.constant = -keyboardHeight
                self.tableView.scrollToRow(at: IndexPath(row: tableView.numberOfRows(inSection: 1)-1, section: 1), at: .bottom, animated: true)
                self.layoutIfNeeded()
            }
    
        }
    }
    
    @objc func keyboardWillHide(notification: NSNotification) {
        // 애니메이션을 적용해 입력 공간을 원래 위치로 내림
        UIView.animate(withDuration: 0.5, delay: 0, options: [.curveEaseInOut]) { [weak self] in
            guard let self else { return }
            self.chatInputViewBottomConstraint?.constant = -40
            self.layoutIfNeeded()
        }
    }

 

notification의 userInfo로 keyboard정보가 넘어온다.

대표적으로 UIResponder.keyboardFrameEndUserInfoKey를 이용한다.

여기서 키보드의 frame 즉 height을 얻어 낼 수 있다.

 

키보드가 등장할 때는 그 높이 만큼 하단 제약조건을 보정해주고 사라지면 다시 원상복구 시켜준다.

이 때 자연스러운 반응을 보여주기위해 animation과 layouIfNeed를 통해 바로 업데이트를 진행한다.

 

---

결과

 

---

참고

UIResponder | Apple Developer Documentation