iPad Slide-over 키보드 높이 계산 이슈 해결

카페앱에 이번 버전 부터 iPad slide over를 지원하게 되었는데요.

sldie over가 뭐냐면 패드에서 한켠에 둥둥 띄워서 쓸 수 있는 기능입니다.

 

https://support.apple.com/ko-kr/guide/ipad/ipadfe7c65e9/ipados

 

그러면서 생각지도 못했던 이슈가 발생했습니다.

키보드 높이 계산이 잘못되어서 하단에 떠있는 만큼 키보드가 위로 더 들려있는 현상이 발생했습니다ㅠ

 

 

알고보니 기존에는 앱이 Screen을 세로로 꽉채우는 개념으로 되어 있어서 이슈가 안생기고 있었습니다.

아래와 같은 개념이라서 Screen.height - Keyboard.minY를 빼주면 키보드 높이를 구할 수 있었습니다.

 

그런데 이제는 앱이 둥둥 떠있게 되면서 고려해줘야하는게 늘었습니다.

Screen.height - keyboard.minY - 하단 떠있는 높이 = 키보드 높이 가 됩니다.

 

그러면 하단에 떠있는 높이는 어떻게 구할까? 하는 의문이 생깁니다.

Screen이랑 Window 크기를 구해서 1/2 로 나누면 위 아래 영역을 구할 수 있습니다.

public extension UIWindow {

    var floatingMargin: CGFloat {
        let screen = UIScreen.main.bounds
        let window = self.bounds

        if screen.height > window.height {
            return (screen.height - window.height) / 2
        } else {
            return 0
        }
    }
}

 

이렇게 해서 일단 현상은 해결했는데요...

1/2로 나누는게 썩 좋은 방법같아 보이진 않았습니다.

나중에 OS가 변경되면서 위아래 플로팅 영역이 동일하지 않게될 수도 있기 때문입니다.

그리고 태운님의 오픈소스에도 컨트리뷰트 하고 싶었기 때문에 조금 더 제대로 된 해결책을 고민해봤습니다.

(일단 이슈부터 등록해두고 고민 시작... https://github.com/Kofktu/KUIKeyboard/issues/6)

 

UIScreen을 기준으로 보면 플로팅 영역을 계산할 수 있겠다는 생각이 들었습니다.

어떻게 스크린 기준으로 계산을 할까 고민하면서 들여다봤습니다.

coordinateSpace 라는 프로퍼티가 있다는 것을 발견했습니다.

 

 

이걸 활용해서 키보드 frame을 convert 해주면 window의 위치를 파악할 수 있습니다.

이걸 반영해서 만든 코드는 다음과 같습니다.

 

extension UIWindow {
    var floatingAreaInsets: UIEdgeInsets {
        let converted = convert(frame, to: screen.coordinateSpace)

        return UIEdgeInsets(
            top: converted.minY,
            left: converted.minX,
            bottom: screen.bounds.height - converted.maxY,
            right: screen.bounds.width - converted.maxX
        )
    }
}

 

사실 이번 이슈에서는 floatingAreaInsets.bottom 만 필요하겠지만 나중을 위해서 UIEdgeInsets 으로 만들었습니다.

이 inset 을 반영해서 회사앱에 반영하고 PR도 올렸습니다. (https://github.com/Kofktu/KUIKeyboard/pull/7)

 

혹시나 조금 더 좋은 해결책이 나오면 또 업데이트 하겠습니다.

감사합니다 :)