[Auto Layout] 2. SafeArea

iOSoo·2022년 3월 4일
0

SafeArea

Safe Area는 아이폰x부터 만들어졌다.

아이폰 11화면에 UIView를 올려놓고 가운데 정렬후에
bottom Constraints를 0, height, width는 기존의 크기로 해준다.

[Bottom Constraints]

이렇게 설정을 하고 사이즈 인스펙터에서 bottom Constraints를 보면 Constraints가 0이 아닌 Safe Area로 되어있다.

즉, 화면자체에서 Constraints 0이 아니라 Safe Area 내부에서 Constraints 0이 기본적인 설정 값이다.

[Top Constraints]

상단에도 똑같이 UIView를 추가해서 top Constraints 값을 0으로 해보자. 0으로 하게되면 bottom과 같이 Safe Area 내부의 Constraints 0을 가지게 된다.

[가로모드]

이제 가로모드로 바꿔서 UIView의 위치를 보자.

갈색 View를 보게되먄 세로모드로 했을 때와 위치가 달라졌다.
그 이유는 가로모드와 세로모드의 Safe Area가 다르기 때문이다. (아래 확인)

[View로 화면 꽉채우기]

기존 View를 모두 없애고 새로운 View를 가져와 4방향의 Constraints를 모두 0으로 지정해보자.

지정을 완료하면 기본 값에 따라서 Safe Area를 꽉 채우게 된다.
하지만 우리가 원하는 건 화면자체를 꽉 채우는 것이다.
그러기 위해서는 아래의 방법을 따라준다.

  1. 사이즈 인스펙터에서 각각 Constraints를 더블 클릭해서 Safe Area를 SuperView로 바꿔주면 된다.

  1. top, bottom의 Constant를 0으로 해준다.

결과화면

특별한 경우가 아니라면 Safe Area 내부에서 디자인 하는 것이 좋다.


[출처] iOS AutoLayout 완벽 가이드 - 실무 프로젝트를 위한 실전강의


profile
애플을 좋아하는 비전공생

0개의 댓글