아이폰 12 SafeArea 적용 후기

아이폰12 safeArea Size

---

결론부터 말하자면 iPhone X 시리즈, iPhone 11 시리즈에서는 statusbar == safeArea.top == 44

iPhone 12 Pro , Pro Max statusbar == safeArea.top == 44

iPhone 12 statusbar == safeArea.top == 47

iPhone 12 mini statusbar == 44, safeArea.top == 50

왜 이렇게 차이가 나는지는 애플만 알겠지..

이렇게 값을 구하게 된 이유를 정리해보려고 합니다.

iPhone 12 Screen Sizes 이것도 참고해서 보시면 좋을것 같아요.

SafeArea 적용

최근 iOS 개발자들은 잘 고민하지 않는 부분인데 storyboard 기반 앱을 개발하면

ViewController를 storyboard에 추가하면 아래와 같이 View, Safe Area 구조를 가지게 됩니다. (저도 얼마전까지 몰랐…)

하지만 지금 만들고 있는 앱들은 오래전부터 사용하던 앱을 개선하고 개선하는중이고

SafeArea가 없던 시절부터 있던 앱을 개발중입니다.

SafeArea는 말그대로 안전한 영역으로 노치나 하단 홈바에 컨텐츠를 그리지 못하게 하는 영역으로 생각하면 됩니다.

두 영역의 차이가 확연히 보이실거에요.

XIB에서 SafeArea 추가하기

XIB에서 SafeArea를 추가하려면 *.xib파일을 열어서 File Inspector탭으로 이동합니다.

아래와 같이 Use Safe Area Layout Guides를 클릭하면 View 아래에 SafeArea가 추가되는것을 볼 수 있습니다.

SafeArea를 적용하는게 좋은 이유

iPhone X (탈모에디션) 이전에는 SafeArea를 걱정할 필요가 없어서

대부분 StatusBar(WiFi,배터리 표시 영역)은 기본 20으로 코딩을 했을탠데요

지금은 iPhone이 Notch Design으로 넘어오면서 신경써야 할 부분이 생겼습니다.

iPhone 12 mini 처럼 statusbar 길이와 safeArea 영역이 다를때 문제가 생기는데

개발자는 하나의 기준으로 통일해서 개발하는게 좋겠네요.

Portrait 과 Landscape의 SafeArea 사이즈도 다르기때문에 분기를 만들기가 힘듬..

SafeArea 영역 구하는 방법

SafeAreaInsets는 iOS 11부터만 사용 가능합니다.

Objective-C

UIEdgeInsets windowsSafeAreaInsets = UIEdgeInsetsZero;
if(@available(iOS 11, *)){
	windowsSafeAreaInsets = [UIApplication sharedApplication].window[0].safeAreaInsets;
	//[UIApplication sharedApplication].keyWindow.safeAreaInsets도 되는데 deprecated 되었다는 얘기가 있음.
	CGFloat top = windowsSafeAreaInsets.top;
	CGFloat bottom = windowsSafeAreaInsets.bottom;
	CGFloat left = windowsSafeAreaInsets.left;
	CGFloat right = windowsSafeAreaInsets.right;
}

Swift

if #available(iOS 11.0, *) {
    let windows = UIApplication.shared.windows[0]
    let top = window.safeAreaInsets.top
    let bottom = window.safeAreaInsets.bottom
    let left = window.safeAreaInsets.left
    let right = window.safeAreaInsets.right
}