Swift safeArea 의미와 safeAreaInsets 구하기

앱을 만들다보면 저 SafeArea 로인해 UI가 흐트러져서 

수정해야하는 일이 생각보다 많이 생깁니다. 

 

일반적으로 저희가 처음 ViewController 를 생성하고 나서 스토리보드를 보면

아래처럼 자동으로 생성되있는게 보이실 껍니다. 

맨날 자동으로 있는 이거 맞습니다.

그럼 SafeArea 가 도대체 무엇일까요?

간단하게 알아봅시다.

 

SafeArea가 뭔가요?

- 간단히 이야기하면 기본 UI의 영향을 받지 않는 범위 라고 생각하시면 됩니다.

- 아래 사진에서 빨간색으로 표시된 부분이 아닌 파란 부분을 SafeArea 라고 합니다.

- 빨간색 영역은 safeAreaInsets 이라고 합니다.

간단히 표현하면 이렇게 됩니다.

- 즉 만약 UI 를 제작하실때 해당 빨간 부분에 겹치게 넣으시면 기본 UI로 인해 가려지실수있습니다.  

- 다시 말하면 SafeArea 내부에 UI를 만들어야 기본 UI와 겹치는 현상을 막을 수 있습니다.

- 여기서 말하는 기본 UI는 카메라, 시간, 통신 표시 혹은 홈키등 기본적으로 화면에 존재하는 것들을 말합니다.

 

그럼 SafeAreaInsets는 무엇인가요?

아래 그림으로 설명드릴께요.

빨강 : 전체화면, 파랑 : SafeArea

위 이미지에서 검은색으로 표시된 부분이 바로 SafeAreaInsets 입니다. 

간단히 표현하면 SafeArea 와 전체화면 사이 간격을 위미합니다.

 

상하좌우의 간격을 표현하기 때문에 top/bottom/left/right 라고 부릅니다. 

이름은 알았으니 이제 저 간격의 크기를 구해봐야겠죠?

 

그럼 해당 사이즈를 어떻게 구하나요?

아래 코드를 참고해주세요. 

// true는 위쪽 false는 아래쪽 SafeArea 의 높이를 구하도록 설정한 함수에요.
func getSafeAreaHeight(isTop: Bool) -> CGFloat { 
    let topSafeArea: CGFloat
    let bottomSafeArea: CGFloat
    if #available(iOS 11.0, *) {
        topSafeArea = view.safeAreaInsets.top
        bottomSafeArea = view.safeAreaInsets.bottom
    } else {
        topSafeArea = topLayoutGuide.length
        bottomSafeArea = bottomLayoutGuide.length
    }
    return isTop ? topSafeArea:bottomSafeArea
}
// left/right 를 구하고 싶으신 분들은 top/bottom 을 원하는 걸로 바꾸시면됩니다.

iOS 11.0 을 기준으로 바뀌었다고 하니 참고해주시길 바랍니다. 

(예전 버전은 left / right 가 따로 없습니다.)

 

그럼 한번 간단하게 실제 값을 뽑아 봅시다. (ios 11 이상 기준으로 작성했습니다.)

(뷰가 그려지기전에 함수를 호출하면 뷰의 크기가 정해지지않은 상태라 크기를 구할 수 없어요!)

// 뷰가 그려진 후에 식을써야 정확한 크기를 알수있어요!
override func viewDidAppear(_ animated: Bool) {
    print("SafeAreaTop : " + view.safeAreaInsets.top.description)
    print("SafeAreaBottom : " + view.safeAreaInsets.bottom.description)
    print("SafeAreaRight : " + view.safeAreaInsets.right.description)
    print("SafeAreaLeft : " + view.safeAreaInsets.left.description)
}

위 코드를 실행해볼께요. 

값이 잘 나오는게 보이시나요?

 

여기까지 기본적인 SafeArea 에대한 이야기였습니다. 

 

간단한 내용이긴 해도 앱을 만들다 보면

반드시 생각을 해야하는 부분이다보니 정리해봤습니다.

 

이 글이 처음 해보시는 분들에게 도움이 되었으면 좋겠네요. 

그럼 오늘도 파이팅입니다.