[WWDC 2021] Your guide to keyboard layout

오늘은 keyboard에 관한 영상을 살펴보았습니다. 사실 처음 영상 제목을 보았을때 키보드 ?? 하 뭔가 끌린다 .. 싶었습니다 ㅎㅎ

창업팀에서 키보드 올리고, 내리고 할때 레이아웃 변경 코드가 이렇게 하는거 맞나 ..? 야매 같은데 하는 찜찜함이 있었기 때문입니다. 그래서 iOS 15에서 어떤 변경 사항이 있는지 알아보고자 영상을 보고 정리하게 되었습니다 !!

https://developer.apple.com/videos/play/wwdc2021/10259/

Your guide to keyboard layout - WWDC21 - Videos - Apple Developer

Layout guide

예전부터의 방식
1. Notification 등록
2. notification으로부터 offset, animation 가져와

3. 계산(math)

4. layout 조정

 

이 방식을 deprecated하진 않았지만, 코드가 무지막지하게 긴 것을 볼 수 있습니다.

 

Notification을 등록하고 View의 constraint를 업데이트 해주기 위해 notification으로부터 받은 info를 사용해 layout 해줍니다.

@objc func keyboardWillShow(notification: NSNotification) {
        if let keyboardFrame: NSValue = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue {
            let keyboardReactangle = keyboardFrame.cgRectValue
            let keyboardHeight = keyboardReactangle.height
            buttonBottomConstraint.constant = keyboardHeight - self.view.safeAreaInsets.bottom
                self.view.layoutIfNeeded()
                }
    }

    

    @objc func keyboardWillHide(notification: NSNotification) {
        buttonBottomConstraint.constant = 0//safe area
            self.view.layoutIfNeeded()
    }

이에 새로운 방식을 소개합니다. 바로 UIKeyboardLayoutGuided인데요 !

우선 view에 keyboardlayoutGuide를 붙여줍니다.

그리고 더이상 notificationCenterr가 필요 없으므로, boiler code를 다 지워주면 ?
밍 ?? 대박 ...

끝이네요 ..?

위 코드로 username textfield 터치시 아래와 같이 login Button을 위로 올릴 수 있습니다.

그러면 이 매직 같은 keyboardLayoutGuide에 대해 더 살펴볼까요 ??
우선 UIView의 property
그리고 기본적인 경우 keyboard.topAnchor에 layout 되도록 함
그에 따라 animation 하고
keyboard의 높이가 이모티콘, 알파벳 등에 대해 다른데 이를 자동으로 계산
또한 keyboard가 unlock시 guide는 safe area의 bottom에 맞춰 업데이트

 

왜 normal layout guide가 아닌 새 클래스를 사용하도록 선택했을까요 ?
키보드로 더 많은 것을 할수 있게 만들기 위해서 ,,?

왜냐하면 우리의 다음 step은 앱에 full keyboard integration 하는 것이기 때문이라고 하네요.
왜 integration 일까 ?

나는 자주 keyboard가 앱의 평범한 일부임에도 피하고 싶고, 싸우고 싶다는 얘기를 많이 들었음. 우리가 UIKeyboard layout guide를 새롭게 고안한 이유는 바로 이것을 해결하기 위해서임. 많은 디벨로퍼가 input text에 다양한 방식으로 처리하게끔 유도하고 싶음. 그리고 키보드는 지금까지 없었던 레이아웃의 일부라고 생각하게끔 하고 싶음 !! 

요 이야기가 참 가슴에 와닿는것  같습니다. 제가 번역해서 음슴체이지만 ㅎ 키보드는 앱내 부수적인 요소로 치우쳐 많은 고민을 해보지 않았던것 같습니다. 아이패드에 split, floating 키보드가 있다는 사실도 처음 알았구요 !, 키보드 위에 inputAccessoryView도 밑으로 내려갈 수 있게 한다는 것도 처음 알았습니다. 

Integrating the keyboard

.followUndockedKeyboard
keyboard layout guide를 사용하면 다음과 같은 새 property을 사용하여 키보드의 모든 기능을 완벽하게 따라갈 수 있음
기본 값은 false고 true로 한다면 undocked 되어 있거나 floating 되어 있을때 guide가 키보드를 따라 layout에 관해 많은 통제를 줄 수 있습니다.

 

UI keyboard layout guide는 또 다른 layoutGuide(UI tracking layout guide)의 sub class입니다. 

화면에서 변경할 constraints를 추적하기 때문에 tracking layout guide라고 합니다.

특정 가장자리 근처에 있을때 활성화하고 떠날때 비활성화하는 constraints의 배열을 지정할수 있습니다. 
또는 가장자리에서 떨어져 있을때(awayFrom) 활성화하고 근처에 있을때 비활성화하는 배열을 지정할 수 있습니다.

예시 화면과 코드를 봅시다

그리고 키보드를 화면 가리지 않기 위해서 이리 저리 움직이면 

화면이 친절히 비켜준다 .. 우와 
어떻게 구현했는지 코드를 살펴보자
우선 editView(전체 view)의 bottonAnchor에 keyboard view의 topanchor를 묶은 배열을 만들었습니다.
그리고 keyboard layoutguide가 top에서 멀어질때만 제약 조건을 주었고, top 근처일 경우 비활성화 될 것입니다.

그리고 keyboard가 top에 가까워질 경우를 위한 분리된 constraint 배열을 만들었습니다.

이때 Keyboard layout guide의 top 대신에 safe area bottom을 사용할 것
예시를 봐 봅시다.

현재 keyboard는 editView의 top으로부터 멀리 있습니다. 그러므로 awayFromTopConstraints가 활성화 될 것입니다.

하지만 layoutGuide를 top 근처로 옮길 경우, awayFromTopConstraints가 비활성화되고

 

근데 저 하늘색은 모지 ..

하늘색 view를 view의 bottom으로 낮춰 nearTopConstraints가 활성화 될 것입니다. 

(하늘색은 요고였다 .. ㅎ)

다음은 수평 이동을 살펴봅시다.

keyboard가 leading or trailing으로부터 멀어지면, editView를 center에 둘것입니다. 또한 imageView도 view의 center에 두고 싶습니다. 

그리고 가장자리쪽으로 갈 경우도 봐봅시다.

nearTrailingConstraints는 keyboard가 trailing으로 갈때 imageView를 leading으로 constraint하며 nearLeadingConstraints는 그 반대입니다.

키보드를 위로 움직이면 ?

bottom으로 떨어집니다.

 

그리고 양 옆으로 움직이면 ? 피하는 꼴이 됩니다 ㅎㅎ

그러면 near과 awayFrom이 정확히 의미하는 바를 생각해봅시다 !
docked된 키보드(일반 키보드, 정착된 키보드)는 bottom에 가깝게 있고 다른 leading, trailing, top과는 떨어져있습니다.

만약 이런식의 분리된 키보드가 있을때 top을 제외한 모든 edge로부터 떨어져 있으며 top에만 가깝게 있습니다.

Floating 키보드 일 경우, 초기엔 한 edge만 near일 것입니다.

keyboard를 움직이면, 동시에 두개의 인접한 near을 갖습니다. 

자 다시 돌아와서, 모든 이러한 속성은 .followUndockedKeyboard를 true로 했을때 적용됩니다.

Types of keyboards

Floating keyboard는 모든 edge로부터 떨어져 있을 수 있다는 점을 주의해야 합니다. 
모든 edge에서 떨어져 있으면 올바르게 배치될 수 있는 충분한 정보가 있습니까? 또한 키보드가 아래쪽 edge에서 떨어져 있거나 위쪽 edge 근처에 있을 때 어떻게 해야 할까요? 키보드의 topAnchor에 연결된 항목도 주의해야 합니다.

위로 올라갈 수 있으니 말입니다.

이를 해결하기 위한 방법은 키보드가 bottom edge로부터 멀어질때, 하늘색 view를 키보드의 topAnchor에서 벗어나 safeAreaLayoutGuide의 button으로 이동시키는 constraints를 설정하는 것입니다.

이번에는 split undocked 키보드입니다.

다음은 camera를 사용할때 입니다.
이것은 여전히 키보드입니다. 따라서 guide를 사용 할 수 있습니다. Docked 키보드와 같지만 조금 다른 점은 풀 스크린이라는 점입니다. 

이에 대해선 https://developer.apple.com/videos/play/wwdc2021/10276 를 참고하세요

 

풀사이즈가 아닌 Shortcut bar 

기본적으로 botton 가까이 있지만

너비가 조정 가능하기 때문에 동시에 두개의 near를 가질수 있으므로 주의해야 합니다. 

 

멀티 태스킹의 경우입니다.
window를 점차 늘리게 되면 키보느는 모든 edge로부터 멀어지게 됩니다. 

그러나 여전히 top, buttom에 대해 near을 가질 수 있습니다.

다시 docked 키보드로 확장하면 botton에 near을 가지게 됩니다.

 

프레젠터분이 정말 자부심을 가지고 깔끔하게 설명해주셔서 이번 영상을 통해 키보드를 조금 더 고려할 줄 아는 디벨로퍼가 되고 싶다는 생각이 들었습니다. 

https://developer.apple.com/documentation/uikit/keyboards_and_input/adjusting_your_layout_with_keyboard_layout_guide 도 참고해서 한번 복습해봐야겠습니다 !!