SafeArea Source Code 로 영역 값 가져오기

PhoneX 디바이스가 나오게 되면서 노치 디자인이 주목 받기 시작했습니다. 앱 개발자는 노치 디자인에 맞춰 새로운 디자인 구성을 하는 것이 좋지만 현실적으로 불가능 한 경우가 많습니다. 이러한 이슈 사항에 대해 Apple은 iPhone X용 앱 업데이트 하는 방법을 친절히(?) 안내하고 있습니다.

SafeArea 을 사용하는 이유

 

---

iPhoneX 에 포함된 5.8인치 Super Retina 레이아웃이 반드시 전면 Super Retina 디스플레이를 채우는 동시에 콘텐츠와 컨트롤 부분이 올바르게 표시되어야 하며 간단히 탭할 수 있어야 합니다. SafeArea은 앱이 iPhone X의 새로운 규격에 맞게 제대로 동작하는지 확인하는 데 사용합니다.

 

 

Storyboard 에서 SafeArea 처리하기

기본적으로 Storyboard에서 View 을 ViewController에 삽입하면 safeArea 로 영역 안에 배치가 됩니다.

만약 사용자가 safeArea가 아닌 전체 화면으로 하고 싶을 때는 safeArea로 정해진 제약 조건을 superView 로 변경하시면 됩니다.

[Storyboard Constraints]

 

[Storyboard SafeArea 에서 SuperView 변경 화면]

 

 

 

Source Code에서 SafeArea 영역 값 가져오기

UI을 구성할 때에 SafeArea 영역을 측정하여 상황에 맞게 UI 변경 할 경우가 있습니다. Storyboard 에서는 이벤트에 따른 UI변경이 힘들기에 Source Code 에서 UI 변경 처리를 하는 편입니다. 그렇다면 Source Code에서는 어떻게 SafeArea 값을 알 수 있을까요?

Objective C

 

if (@available(iOS 11.0, *)) {    UIWindow *window = UIApplication.sharedApplication.keyWindow;    CGFloat topPadding = window.safeAreaInsets.top;    CGFloat bottomPadding = window.safeAreaInsets.bottom;    CGFloat LeftPadding = window.safeAreaInsets.left;    CGFloat RightPadding = window.safeAreaInsets.right;}

Swift

 

if #available(iOS 11.0, *) {    let window = UIApplication.shared.keyWindow    let topPadding = window?.safeAreaInsets.top    let bottomPadding = window?.safeAreaInsets.bottom    let leftPadding = window?.safeAreaInsets.left    let leftPadding = window?.safeAreaInsets.right}

 

safeAreaInsert 을 활용하면 SafeArea 영역 값을 확인 할 수 있습니다. safeAreaInsert는 iOS 11 이후버전부터 사용할 수 있으므로 available(iOS 11.0, *) 조건을 필수로 붙게 됩니다.

 

정리

SafeArea 의 값을 어떻게 알아오는지 알아봤습니다. iPhone의 지원 디바이스가 다양해는 것에 대해 사용자의 입장에서는 좋지만 개발자의 입장에서는 공수가 많이 들어가게 되어 불편한데요. Apple 에서는 개발자의 배려를 위해서 SafeArea 등 다양한 방법으로 최대한 공수 덜 들어갈 수록 배려(?)를 해주는걸 느꼈습니다. 특히 iPhone X 대응하는 법에 대해서 자세히 설명한 사이트를 보며 Apple도 노치 디자인 공개하기 전에 고민하고 공개한 것이 아닌지 생각해보게 되었습니다.