11. Keyboard

Text Field를 삽입하고 선택하게 되면 FirstResponder()에 반응하여 키패드가 등장한다.  쉽게 표현하면 현재 집중되어 있는 요소가 Text Field라는 의미이다. 그렇다면 keyboard를 올리고 내리는 동작에 대해 구현하도록 하자.

 

 

 

 

---

 

 

Today Button

 

 

 

isTodayButtonTapped에 대한 구현을 완료하였다.

Button이 눌린다는 것은 눌리는 상태를 저장할 변수(outlet)과 누르는 행위(action)이 존재한다.

여기서 배워야 할 것은 코드를 구성하는 구조이다!!

 

 

 

 

---

 

 

 

 

View 높이 조절

 

 

 

 

현재 두개의 차이점은 키패드가 등장함에 따라 text Field가 포함된 View의 위치가 이동하냐 안하냐의 차이이다.

이제 키패드를 등장시키는 코드와 View의 이동을 함께 구현해보자

 

우선 키패드의 높이를 파악하고 그만큼 View의 Buttom을 상승시켜야한다.

이 방법에 대해 알아보자. 그럴려면 우리는 키패드의 높이를 알아내서 그 높이만큼 bottom을 올려야한다.

 

 

 

 

 

---

 

 

 

 

 

키보드 디텍션을 구현하자

키보드 디텍션은 키보드가 올라오고 내려가는 것을 관찰하기 위함이다. 

NotificationCenter는 알림같은 것에 중앙관리소 같은 곳이다.

 

Observer: 관찰은 누가 할것인가? -> TodoListViewController 스스로 할 것이다.

Selector: 관찰이 되었으면 어떤 메소드를 실행할 것인가?

name: 관찰하고자 하는 이벤트의 이름 -> UIResponder.keyboardWillShowNotification

object: nil로 지정한다. 

 

 

 

addObserver에 의해 UIResponder.keyboardWillShowNotification이 감지가 되면 adjustInputView가 호출된다.

그럼 키보드가 나올때를 감지할 수 있다. 그럼 키보드가 들어갈때에도 감지 해야겠지

구현은 다음과 같이 이루어진다.

 

 

 

 

---

 

 

 

 

 

그렇다면 detection한 키보드 높이에 따른 인풋뷰 위치 변경기능을 구현해야한다.

 

 

여기서 noti는 감지한 내용을 담고있고 userInfo의 타입을 살펴보면 AnyHashable이며 Dictionary type이다. 

 

우리가 지금 필요한 것은 키보드의 높이이며, 우리는 여기서 키보드 프레임 정보를 알 수 있다.

키보드 프레임은 위치와 사이즈까지 알고있다. 

userInfo[UIResponder.keyboardFrameEndUserInfoKey]

이것은 키보드가 다 올라갔을때 다 내려갔을때의 크기와 위치정보를 가져오는 것이다. 

 

 

 

이렇게 되면 keyboardFrame에 키보드 프레임의 변화의 끝에서 크기와 위치정보를 가져온 것이다. 

 

 

 

 

 

---

 

 

 

 

 

여기서 우리는 safeArea라는 개념을 알아야한다.

iphone부터는 safeArea라는 개념이 등장하는데 View에서 모든 범위가 아닌 뒤로가기버튼, 시계, 배터리 부분 이라던지 이런 Area영역을 제외한 부분이 존재한다. Inset은 margin 같은 개념에서 현재 키보드가 올라오면서 감지된 height에서는 safeAreaInset만큼이 포함되어 있다.

우리가 올릴 View또한 safeAreaInset이 포함되어 있고 정확히 키패드 만큼 Bottom을 상승시키려면 safeAreaInset만큼은 제외시키고 상승시켜야한다. 그래서 다음과 같이 view.safeAreaInsets을 빼준것이다. 

 

 

 

 

다음과 같이 inputViewBottom에 상승시킬 height를 넣어준다.

이제 키패드가 등장하면 이것을 감지하고 adjustInputView 가 호출된다.

여기서 notification의 정보를 받아와서 키보드의 상태 변화가 완료될때의 사이즈와 위치를 알아내고

해당 notification의 이름이 키보드의 등장임을 확인하면 safeArea margin bottom 만큼을 제외하고 그 height만큼 변경시켜 주는 것이댜.

 

 

 

키패드가 사라질때는 다시 0으로 초기화 해주는 방식으로 구현을 완료하였다.

keyboardFrame의 값을 보기위해 출력코드를 한번 적어보았다.  

 

 

 

 

---

 

 

 

 

이렇게 키보드가 등장했을 때 이를 인식하여 키보드 만큼 View를 상승시키는 기능을 구현하였다.

현재 올라간 키보드는 전체 View 즉, Text Field가 포함된 View부터 키보드를 제외한 윗부분에 터피를 하게되면 키보드를 내려가게 하고 싶은데 이는 구현하지 않았다. 다음 글에서 Tap Gesture Recognizer 에 대해 배우면서 구현하도록 하자