본문 바로가기
iOS - 실무관련/Auto Layout

2. SafeArea

by print_soo 2022. 3. 27.

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로 바꿔주면 된다.

 

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

[결과화면]

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


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


'iOS - 실무관련 > Auto Layout' 카테고리의 다른 글

6. priority★★★  (0) 2022.03.27
5. Multiplier  (0) 2022.03.27
4. Align  (0) 2022.03.27
3. Constraints Equal  (0) 2022.03.27
1. Constraints  (0) 2022.03.27