Auto Layout이란?
주어진 제약조건에 따라 뷰의 위치와 크기를 동적으로 계산해 배치하는 것을 말한다.
쉽게 말해, 개발자가 뷰의 크기와 위치를 오토 레이아웃에게 알려주고
오토 레이아웃이 뷰를 스크린 사이즈에 맞게 자동적으로 계산해주는 것이다.
Auto Layout #1 - 뷰의 가로, 세로 크기 지정
라이브러리에서 View를 추가해보자.
아래 사진의 기종은 아이폰 13 프로이다.
검정색 박스를 정확히 화면 가운데에 배치를 해봤지만
아이폰 13 프로 맥스에서는 정가운데가 아닌 모습을 볼 수 있다.
왜 이런 현상이 발생하는가?
휴대폰 기종마다 화면의 크기가 다르기 때문에 13 프로 기준으로 가운데에 위치시켜도 다른 기종에서는 가운데가 아닐 수가 있다.
어떻게 해결해야 되는가?
초반부에 말한 'Auto Layout' 을 활용하여
뷰의 크기와 위치를 기종에 따라 정확하게 배치될 수 있도록 설정해야 한다.
Auto Layout 사용법
오른쪽 하단에 'Align' 버튼을 누르고 맨밑에 두 개를 선택하여 정렬을 한다.
수평과 수직 정렬만 했을 때 이렇게 오류가 뜬다.
이것은 뷰의 '위치'는 정해졌지만 Xcode 는 뷰의 '크기'를 알지 못 해서 생긴 오류이다.
아래 내용을 해석해보면 X축(Y축) 또는 폭(높이)에 대한 제약이 필요하다는 뜻이다.
그렇다면 오류를 없애려면 어떻게 해야 되는가?
간단하다.
뷰의 가로, 세로 크기를 지정해주면 된다.
아래의 사진처럼 'Width' 와 'Height' 를 선택해주면
이렇게 오류가 없어진 모습을 볼 수 있다.
Auto Layout #2 - Anchor
앵커로 뷰의 위치와 크기를 자동으로 계산할 수 있다.
아래 사진처럼 Y축을 지우면 Xcode 는 뷰의 높이를 알지 못 하기 때문에 오류가 생긴다.
하지만 앵커를 이용하여 뷰의 가로, 세로 여백을 안다면 자동으로 뷰의 크기와 위치를 알 수 있다.
왜냐하면 Xcode 는 각 기종의 스크린 사이즈를 알고 있기 때문이다.
즉, 'Top margin' 이 '200' 이 된다면
아래의 모양이 된다.
스크린 높이 알고,
Top margin(200)과 Bottom margin(35)을 알고 있기 때문에
자동적으로 뷰의 크기가 저렇게 설정된 것이다.
Constrains 한방에 없애는 방법
오른쪽 하단에 삼각형 모양 버튼을 누르고
'Clear Constrains' 를 누르면 한 번에 다 지워진다.
Constrains 한방에 추가하는 방법
위와 동일한 방식으로 누르고 'Add Missing Constrains' 를 클릭하면 자동으로 Constrains 를 잡아 준다.
