애플워치 시리즈 4가 출시됐다.
화면이 커져 아이폰X처럼 둥근 OLED가 탑재됐다.
아이폰X에 대응하는 노치와 각환을 위해 iOS 11은 세이프 아레를, 왓치OS 5에서는 시리즈 4에 대응하는 각환을 위해 세이프 아레를 도입했다.
이 점에서 복잡해져서 총괄해 봤어요.
기본적으로 여기 내용이에요.
Designing for Apple Watch Series 4

화면 크기

모델
화면 해상도
주안점
배율 표시
38mm
272x340
136x170
2
40mm
324x394
162x197
2
42mm
312x390
156x195
2
44mm
368x448
184x224
2
40mm와 42mm를 비교하면 40mm의 화면 해상도는 약간 크지만 거의 차이가 없다.
따라서 화면을 디자인할 때 40mm와 42mm의 사이즈를 공통으로 하고 38mm는 그것을 비례자로 하고 44mm는 확대하면 된다.
화면 크기에 따라 실행할 프로그램을 바꾸고 싶을 때WKInterfaceDevice.current().screenBounds에서 점위의 값을 얻을 수 있으며 이 값을 사용하여if분지를 할 수 있습니다.

Safe Area

애플워치 시리즈 4에서는 화면 사각이 아이폰X처럼 둥글다.
따라서 화면에 내용을 충분히 표시하면 네 구석이 빠진다.
Safe Area는 이를 방지하기 위해 내용을 완전하게 표시할 수 있는 사각형 영역을 지정합니다.
애플 워치 시리즈 4에서는 아래 표에 적힌 크기에 따라 위아래로 공백을 설정해 정의했다.
모델
top
left
bottom
right
series4 40mm
28pt
0.5pt
28pt
0.5pt
series4 44mm
31pt
0.5pt
31pt
0.5pt

Storyboard

Storyboard에서는 Safe Area에 자동으로 구성됩니다.
Height를 Relative Contaainer 위에 두 배로 올리면 Safe Area 내 최대 높이입니다.
Vertical Align을 Bottom으로 만들면 Safe Area의 아래쪽입니다.
그러나 스크롤되지 않는 1개 화면의 레이아웃에서도 세이프 아라 이외의 영역은 충분히 보여야 한다.
이럴 때 인터페이스 컨트롤러의 Fixed to screen edges를 열면 Safe Area를 무시하고 화면을 가득 채운다.

실행 결과는 이렇다

왼쪽부터.

series 3 42mm

시리즈 40mm,Fixed to screen edges 마감

시리즈 40mm,Fixed to screen edges 열기

네.
참고로 Storyboard의 미리보기는 SafeArea와 화면을 반영하는 각환이 없기 때문에 시뮬레이터를 사용하지 않고 실행하면 레이아웃 확인이 좋지 않다.빨리 처리해 주시겠어요?

Swift

watchOS 5에서 WKinterfaceController에는 Safe Area 외부의 빈 크기인 conntent Safe Area Insets 값이 있습니다.
하지만 제 환경에서 확인하면 awake와willActivate를 처음 호출했을 때 콘텐츠 SafeAreaInsets가 0이었고didAppera에 정확한 값을 저장했기 때문에 인터내셔널 컨트롤러에 프로그램을 표시할 때 레이아웃을 조정하는 분들은 주의하세요.