WWDC 2021 - Your guide to keyboard layout

원본 영상: https://developer.apple.com/videos/play/wwdc2021/10259/

 

Layout guide

• 기존의 키보드 레이아웃을 처리하는 방법은 Notification을 등록하는 것입니다.
• 이 알림 정보로부터 오프셋 및 애니메이션을 정보를 얻어서 적절한 위치를 계산하여 레이아웃을 새로 구성하였습니다.

• 알림을 이용하여 레이아웃을 조절하는 과정을 코드로 작성하면 위의 코드와 같습니다.
• 레이아웃을 구성하기 위해 적절한 앵커를 만든 다음 키보드에 대한 알림을 수신합니다.
• 그다음 willShow 또는 willHide 알림을 받아서 화면에서 적절한 레이아웃을 재 계산하여 등록합니다.

• iOS 15에서 새로 제공되는 UIKeyboardLayoutGuide를 통해서 보다 쉽게 정렬할 수 있습니다.

• 이제 더 이상의 알림이나 계산이 필요하지 않기 때문에 긴 코드가 위의 한 줄로 대체될 수 있습니다.

• 새로 제공되는 가이드를 사용한 버전은 기존의 알림을 이용했을 때와 거의 동일합니다.

• view.keyboardLayoutGuide를 사용하면 이처럼 편리하게 키보드와 정렬이 가능합니다.
• 대부분의 경우 가이드의 topAnchor를 사용하면 되며, 애니메이션과도 일치합니다.
• 키보드의 높이가 변경되는 경우에도 알맞게 동작합니다.

• 키보드가 도킹 해제되면 가이드는 화면 하단에서 창의 너비와 같아지며, 상단 앵커는 자동적으로 안정 영역을 따릅니다.

 

Integrating the keyboard

• 종종 사람들은 키보드를 피해야 하는 것이나, 레이아웃을 다루기 힘든 것으로 간주하기도 하지만, 사실 키보드는 앱의 일부입니다.
• 따라서 레이아웃의 경우도 이러한 사실을 잘 반영해야 합니다.

• 새 기능인 followUndockedKeyboard를 true로 설정하면 키보드가 도킹 해제되거나 떠 있을 때 가이드가 키보드를 따라갑니다.
• 레이아웃 가이드를 통해서 키보드의 위치를 얻어올 수 있으며 자동 드롭 투 바텀이 없습니다.

• UIKeyboardLayoutGuide는 새로운 레이아웃 가이드인 UITrackingLayoutGuide의 하위 클래스입니다.
• 화면 주위를 이동할 때 제약 조건을 추적하는 레이아웃 가이드입니다.
• 특정 가장자리 근처에 접근하거나 떠날 때 활성화됩니다.

• 위의 테스트 앱에서 이미지는 가운데에 위치합니다.

• 하지만 키보드가 우측 가까이 이동하는 경우 이미지가 가리지 않도록 좌측으로 이동합니다.

• 동일하게 editView는 키보드가 화면의 상단으로 이동했을 때는 키보드에서 떨어져서 화면의 하단에 붙도록 할 수 있습니다.
• 위의 이미지에서 처럼 화면에 imageView와 editView가 있다고 할 때, 이를 구현하는 방법을 알아볼 것입니다.

• 먼저 editView의 하단을 키보드 레이아웃 가이드의 상단에 연결합니다.
• 가이드가 상단에서 멀리 떨어져 있을 때만 활성화되도록 설정하여 가이드가 가까이 있을 때 비활성화되도록 합니다.
• 반대로 nearTopConstraints배열에서는 키보드가 상단에 가까워질 때 원하는 제약 조건을 정의하면 됩니다.

• 이 코드의 동작을 보면 현재 뷰가 상단에서 떨어져 있으므로 awayFromTopConstraints가 활성화되어 있습니다.

• 그러나 가이드를 위쪽으로 더 가까이 가져가면 awayFrom 조건이 비활성화되고 nearTopConstraints가 활성화되어 뷰의 아래쪽으로 떨어집니다.

• 수평 이동의 경우도 동일하게 기본 상태에서 중앙에 정렬되는 코드를 작성하고 좌우 양 끝에서 떨어져 있을 때 활성화되도록 합니다.
• 이후 오른쪽과 왼쪽으로 이동했을 때 활성화되어 배치하는 코드를 각각 작성하면 됩니다.

• 도킹된 키보드는 바닥에 가깝고 다른 가장자리에서 멀리 떨어진 것으로 간주됩니다.

• 도킹 해제되거나 및 분할 키보드는 모든 가장자리에서 떨어져 있거나 위쪽 가장자리 근처에 있을 수 있습니다.

• 플로팅 키보드인 경우 모든 가장자리에서 가깝거나 멀어질 수 있습니다.

• 또는 동시에 두 개의 인접한 가장자리 근처에 있을 수도 있습니다.
• 이로 인해 잠재적으로 충돌이 발생할 수 있으며 이 모든 것은 followUndockedKeyboard를 true로 설정했을 때만 적용됩니다.

 

Types of keyboards

• 플로팅 키보드는 모든 위치에서 떨어져 있을 수 있다는 점을 유의해야 합니다.

• 키보드가 위로 이동할 수 있기 때문에 topAnchor에 연결된 항목에도 주의해야 합니다.
• 필요한 경우 awayFrom 제약 조건을 설정해서 View를 키보드의 topAnchor에서 safeAreaLayoutGuide의 아래로 이동할 수 있습니다.

• 사용자가 항상 어느 위치로든 키보드를 이동할 수 있다는 점을 염두에 두어야 합니다.

• 또 다른 예제로 분할 키보드가 있으며, 분할 및 도킹 해제된 키보드는 상단에 너무 가까워질 때까지 모든 가장자리에서 떨어져 있습니다.
• 도킹된 키보드와 마찬가지로 항상 leading, trailing 모두와 떨어져 있습니다.

• 새로 추가된 기능으로 카메라를 사용하여 앱에 텍스트를 입력할 수 있는 방법이 있으며 이는 일반 도킹 키보드와 거의 동일합니다.
• 하지만, 전체 화면이 될 수 있는 기능을 가지고 있습니다.

• 하드웨어 키보드가 연결되어 있는 경우, 올해의 새로운 기능으로 항상 전체 너비가 아닌 적응형 바로 가기 막대가 있습니다.
• 이 경우에는 사용하는 언어와 버튼의 수에 따라 너비가 변경됩니다.

• 키보드의 위치는 항상 바닥 근처에 있으며 기본적으로 다른 세 가장자리에서 떨어져 있습니다.

• 하지만 키보드를 접을 수 있기 때문에, 접힌 상태에서는 leading이나 trailing 중 한쪽에 가까울 수 있습니다.

• 멀티 태스킹 상태에서 도킹 해제된 키보드가 있는 경우에는 키보드가 앱 영역을 벗어날 수 있음을 주의해야 합니다.
• 앱이 좁아진 상태일 때, 키보드가 앱 위에 있는지 여부에 관계없이 leading과 trailing은 떨어진 상태입니다.
• 또한 가이드는 키보드의 어느 부분이 앱 화면 위에 있는지에 대한 크기를 나타냅니다.

• 이런 모든 사항은  followUndockedKeyboard가 true로 설정된 경우에만 적용됩니다.
• 그렇지 않은 경우 가이드는 전체 화면의 너비를 가지고 화면 하단에 존재합니다.
• 키보드가 떠 있고 중간에 있을 때는 모든 위치에서 떨어진 것으로 판정됩니다.

• 다른 앱이 화면에 있더라도 자신이 더 넓은 앱이라면 여전히 키보드가 모든 가장자리에서 떨어져 있을 만큼 넓습니다.

• 그러나 조금만 키보드를 움직여도 가장자리에 가까워지게 되는 점을 유의해야 합니다.

• 앱이 화면의 절반 크기인 경우, 이전과 같은 위치이더라도 가장자리와 닿습니다.
• 가이드의 위치는 앱 위의 키보드 영역과 일치하도록 조절됩니다.

• 좁은 앱일 때 가이드는 모든 위치에서 떨어져 있는 것으로 간주됩니다.

• 하지만 여전히 상단 가장자리 근처에 있을 수는 있습니다.
• 가이드의 크기 또한 이전과 마찬가지로 앱과 키보드가 겹치는 영역만큼 차지합니다.

• 키보드를 도킹하고 전체 크기가 되어도 leading, trailing과는 멀지만 하단 영역과 가까워집니다.

• 슬라이드 오버 앱인 경우에도 동일하며, 가이드의 크기 역시 겹치는 영역만큼만 차지합니다.

 

목차: https://nyancoder.tistory.com/2