문제

여기 에도 투고한 것처럼, Xcode9에서는 Storyboard에 SafeArea라는 개념이 추가되어 있어 비교적 간단하게 iPhoneX의 화면에 대응할 수 있습니다.
그러나, 자전의 View를 화면의 최하부에 맞추어 배치하는 경우, iPhoneX의 SafeArea에 맞춘 View 컨텐츠 배치의 경우와, 다른 화면의 경우에서 높이나 세로의 마진을 바꾸고 싶은 경우가 있었기 때문에 , 어떻게 대응했는지 기록합니다.

우선, 설명만으로는 이해하기 어렵다고 생각하므로 무슨 일을 화상 첨부로 설명합니다.



오렌지 영역은 배경이 Blur 인 View입니다.
iPhoneX의 경우는 화면의 끝까지 Blur를 늘리고 싶기 때문에, 구입 버튼아래의 마진이 증가해, 오렌지의 에리어의 View의 높이가 높아지고 있습니다.

구현 방법

로직에서 분기하는 등 몇 가지 방법은 있다고 생각합니다만, 이번은 Storyboard상에서만 해결하는 방법을 생각해 보았습니다.

0. 컨테이너로 사용할 View 배치

컨테이너로 사용하는 View는 화면(SafeArea가 아님)의 Leading, Trailing, Bottom과 margin = 0으로 Constraint를 연결하여 배치합니다.
이 시점에서 경고가 발생하지만 Height는 설정하지 않습니다.

1. 컨테이너로 사용할 View에 SafeArea 표시

우선, 이 예의 경우라면 구입 버튼등이 들어 있는 컨테이너 View에 SafeArea 표시를 설정해 Constraint를 접속할 수 있도록 합니다.

2. 컨테이너로 사용하고 있는 View의 높이를 그 안의 Subview에 의존시키도록 하면서, 최하부의 View는 SafeArea와 접속한다

컨테이너 View의 높이가 해당 Subview에서만 결정할 수 있도록 Subview의 Height와 Vertical Margin을 잘 설정합니다.
그때 맨 아래에 있는 Subview(예라면 구입 버튼)는 1.에서 추가한 SafeArea와 연결합니다. (Constrain to margins에 체크를 넣으면 SafeArea와 연결됩니다.)

이것뿐입니다. 익숙해져 버리면 당연합니다만, 처음이므로 조금 수고했습니다.

※추기
TabBarController 안에 넣는 ViewController의 경우, Root의 SafeArea에 대한 제약을 설정하면 TabBar의 높이가 자동적으로 고려됩니다만, Root가 아닌 View안의 SafeArea에 대한 제약을 설정했을 경우는 TabBar 높이가 고려되지 않으므로 메모로 추가합니다.
TabBar의 표시/숨기기를 자사의 애니메이션으로 전환하고 싶은 경우 등은 자동적으로 TabBar의 높이를 고려하면 곤란할 수도 있으므로, Root가 아닌 장소의 SafeArea를 사용하는 것이 좋을지도 모릅니다 .