WWDC21 - Your guide to keyboard layout

WWDC21 - Your guide to keyboard layout

Keyboard Layout

Managing the keyboard - Before(과거 사용 방식)

• Notification 등록
• Notification에서 보내지는 정보를 토대로 계산 및 확인(오프셋 레이아웃 등등)
• 레이아웃 적용

keyboardGuide.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
keyboardGuide.topAnchor.constraint(equalTo: textView.bottomAnchor).isActive = true

keyboardHeight = keyboardGuide.heightAnchor.constraint(equalToConstaint: view.safeAreaInset.bottom)

NotificationCenter.default.addObserver(self, selector: #selector(respondToKeyboard), name: UIResponder.keyboardWillShowNotification, object: nil)

@objc func respondToKeyboard(noti: Notification) {
    let info = noti.userInfo
    if let endRect = info?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect {
//.....
}

Managing the keyboard - Now(현재 사용할 수 있는 방식 iOS15)

• keyboardLayoutGuide가 주어짐으로 위 코드를 간단하게 줄일 수 있다.

view.keyboardLayoutGuide.topAnchor.constraint(equalTo: textView.bottomAnchor).isActive = true

Updating to keyboard layout guide

• view.keyboardLayoutGuide를 사용함으로 일반적인 뷰와 같이 topAnchor와 같은 앵커를 쓸 수 있으며, 해당 앵커들은 키보드의 애니메이션과 일치하며, 높이 변경도 따른다.
• 이모티콘, 언어에 따라 키보드의 높이가 달라지는데 keyboardLayoutGuide를 사용하는 경우 현재 키보드의 높이와 애니메이션을 즉각적으로 적용해주기 때문에 크기에 맞게 조정해준다.
• 만약 키보드가 사라질 경우, 자동적으로 keyboardLayoutGuide.topAnchor의 경우 화면 하단으로 위치되며, 모든 항목도 역시 자연스레 따라오게 된다.

Integrating the keyboard

• 기본적인 NSLayoutGuide를 사용하는게 아닌 새로운 타입을 만든 이유는 키보드를 통해 여러가지를 할 수 있도록 구현된 것이다.

.followsUndockedKeyboard

• 기본값은 false이지만 해당 값이 true일 경우 키보드가 어디에 위치하든지 레이아웃이 반응하는 방법을 제어할 수 있다.

UITrackingLayoutGuide

• 레이아웃을 추적하는 기능을 합니다.
• 단순히 현재 위치뿐만이 아니라 가장자리의 위치변화 해당 변화에 대한 대처 등등을 도와주는 객체입니다.

• 이를 통해 간단한 예제앱에대한 코드를 작성할려고합니다.
• 이는 단순히 키보드 위에 뷰가 붙어 있는것 뿐만이 아니라 우측으로 이동할 경우 이미지 뷰가 좌측으로 가고
• 좌측으로 이동할 경우 이미지 뷰가 우측으로 이동, 키보드가 위로 이동할 경우 텍스트필드가 아래로 이동하는 등의 효과를 위 객체를 통하여 할 수 있습니다.

let awayFromTopConstraints = [
    view.keyboardLayoutGuide.topAnchor.constraint(equalTo: editView.bottomAnchor),
]
view.keyboardLayoutGuide.setConstraints(awayFromTopConstraints, activeWhenAwayFrom: .top)

• 우선 top과 멀어졌을 때 위 제약을 활성화 시킵니다.

let nearTopConstraints = [
    view.safeAreaLayoutGuide.bottomAnchor.constraint(equalTo: editView.bottomAnchor),
]
view.keyboardLayoutGuide.setConstraints(nearTopConstraints, activeWhenNearEdge: .top)

• 해당 코드는 키보드가 상단에 가까워졌을 때 제약을 활성화 시키는 코드입니다.
• 위와 같이 코드가 구성될 경우 키보드가 화면의 상단에 위치할 경우 nearTopConstraints가 활성화 되어 editView의 경우 전체 뷰의 아래에 고정되어 있을것이고
• 만약, 키보드가 아래에 위치할 경우 awayFromTopConstraints가 활성화 되어 키보드 위에 editView가 붙어있게 될 것입니다.

let awayFromSides = [
    view.keyboardLayoutGuide.centerXAnchor.constraint(equalTo: editView.centerXAnchor),
    imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
]

view.keyboardLayoutGuide.setConstraints(awayFromSides, activeWhenAwayFrom: [.leading, .trailing])

• 위와 같이 구현할 경우 키보드가 좌측 우측과 떨어져 있을 경우 이미지 뷰는 중앙에 위치하며, editView 역시 키보드의 중앙에 위치할 것입니다.
• 만약, 키보드가 상단과 떨어져있다면 이전 작성한 코드를 토대로 키보드 위쪽의 중앙에 배치될 것입니다.

let nearTrailingConstraints = [
    view.keyboardLayoutGuide.trailingAnchor.constraint(equalTo: editView.trailingAnchor),
    imageView.leadingAnchor.constraint(equalToSystemSpacingAfter: view.safeAreaLayoutGuide.leadingAnchor, multiplier: 1.0
]

view.keyboardLayoutGuide.setConstraints(nearTrailingConstraints, activeWhenNearEdge: .trailing)
]

• 위 코드의 경우 키보드가 우측에 가까워질 경우 이미지 뷰가 좌측으로 이동할 것이고 editView의 경우 키보드의 우측 상단으로 이동할 것입니다.

let nearLeadingConstraints = [
    editView.leadingAnchor.constraint(equalTo: view.keyboardLayoutGuide.leadingAnchor),
    view.safeAreaLayoutGuide.trailingAnchor.constraint(equalToSystemSpacingAfter: imageView.trailingAnchor, multiplier: 1.0)
]

view.keyboardLayoutGuide.setConstraints(nearLeadingConstraints, activeWhenNearEdge: .leading)

• 이전 우측으로 키보드가 이동하던 코드와 동일하며 대신 방향만 정 반대로 이동하게 될 것입니다.

Near / AwayFrom

도킹 된 키보드

플로팅 된 키보드

• near과 awayFrom의 기준은 위 사진들과 비슷합니다.
• 위 작성한 코드들은 전부 .followUndockedKeyboard가 true일 시를 가정하며 아래 내용에서도 전부 true일 경우를 가정합니다.

Types of keyboards

• 도킹된 키보드와는 다르게 플로팅 키보드의 경우 near에 위치하지 않고 전부 awayFrom이 될 수 있습니다.
• 플로팅 키보드 탑에 어떠한 뷰가 있을 경우 그리고 우측 상단이지만 모든 방향이 awayFrom일 경우 해당 뷰에 대한 콘텐츠가 안보일 수도 있습니다.
• 이를 해결하기 위해서는 키보드의 topAnchor에서 벗어나 safeAreaLayoutGuide의 bottom을 이용하여 제약조건을 설정하는 것이 좋습니다.

• 위 사진과 같이 분할되는 키보드의 경우에도 4방향 전부 awayFrom이기 때문에 해당 부분을 명심하고 레이아웃을 잡아줘야합니다.

• 키보드의 경우 단순히 기본 키보드뿐만아니라 하드웨어 키보드 혹은 음성 키보드가 동작할 수도 있기 때문에 아래와 같은 사항들을 명심해야합니다.

1. 앱 화면에 키보드가 존재하지 않을 수도 있습니다.
2. 키보드가 가장 좁을 경우 상단, 하단의 near는 작동하지만 앱 화면에 있는지 여부와 상관없이 leading과 trailing은 awayFrom상태라는 것
3. 앱 화면에 보여지는 것은 키보드뿐만이 아니라는것을 생각해야합니다.