[iOS] safeAreaLayoutGuide

공식 문서 내용

safeAreaLayoutGuide란, bar나 다른 content로 인해서 가려지지 않는 뷰 부분을 나타내는 layout guide 이다.

 

뷰가 화면에 표시될 때, 이 guide는 navigation bar, tab bar, toolbar 그리고 기타 상위 뷰에서 다루지 않는 뷰 부분을 반영한다. (tvOS에서 safe area는 화면의 베젤을 가리지 않는 영역을 반영한다.)

뷰가 현재 뷰 계층이 install 되어있지 않거나 아직 화면에 표시되지 않았을 경우, layout guide는 뷰의 가장자리와 동일하다.

 

뷰컨트롤러 루트뷰의 경우, layout guide는 status bar, 다른 보여지는 bar나 뷰컨트롤러의 additionalSafeAreaInsets 속성을 사용하여 지정한 추가적인 inset들을 수용한다. 뷰 계층의 다른 뷰들의 경우, layout guide는 다른 content가 다루는 뷰의 일부만 반영한다. 예를 들면, 만약 뷰가 superview의 safe area 내에 있을 경우, layout guide의 edge는 view의 가장자리와 동일하다.

---

 

즉, safeAreaLayout은 위 아래 (노치), 좌 우 짤리는 거 방지하기 위해서 생김.

 

 

ScrollView로 예시를 보자.

 

ScrollView에서 safeLayoutGuide를 적용하지 않을 경우,

scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

 

이런 계층으로 구성이 되고,

 

스크롤뷰가 노치와 하단 탭바를 침범하는 것을 볼 수 있다. 만약 저 부분에 중요한 내용이나 이미지가 있을 경우 문제가 된다.

 

 

 

 

이를 방지하기 위해 사용하는 것이 바로 safeLayoutGuide이다.

scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true

 

 

뷰 계층은 이렇게 되어있다. 이전과 달리 위, 아래가 딱 붙어있지 않는 것을 확인할 수 있다.

 

 

스크롤뷰가 더이상 노치와 하단 탭바, 좌, 우를 침범하지 않는 것을 확인할 수 있다.

 

 

https://developer.apple.com/documentation/uikit/uiview/2891102-safearealayoutguide

Apple Developer Documentation