Auto Layout : 기본 개념

오토레이아웃이란??

 뷰들 간의 관계, 즉 제약조건(Constraints)을 이용하여 동적으로 뷰의 크기와 위치를 지정하는 것입니다.

---

Auto Layout

오토레이아웃은 제약조건을 통해 사용자에게 화면을 표시해주는 요소입니다.

사진을 통해 간단하게 설명을 하자면,

 

파란 선	뷰에서 주고자 하는 제약
안쪽 회색 사각형 (뷰)	제약을 받는 객체
제약	뷰에게 명령을 주는 것

 

다음과 같이 A와 B라는 뷰가 있습니다.

A와 B 동일하게 화면 끝에서 부터 20 만큼의 거리를 유지하게 제약조건이 있고,

각각 화면에서부터 위와 아래로 20씩 멀어지게 제약 조건이 지정되어 있으며

A와 B 서로의 거리는 8만큼 유지하게 제약 조건이 지정되어있습니다. 

 

---

오토레이아웃이 필요한 이유?

 

새로운 기기가 출시 될 때마다, 매번 다른 화면에 대한 지정값을 주는데에 한계가 있습니다.

이때 뷰에 제약조건(Constraints)을 줌으로써 새로운 기기에서 앱을 사용할 때 화면을 가로, 세로로 전환하고 실행 중인 화면의 창크기를 변경하여도 동적으로 레이아웃을 지정할 수 있게됩니다.

그렇기 때문에 오토레이아웃은 다양한 기기와 환경에 모두 적용가능하게 하는 필수적인 요소입니다.

 

---

StoryBoard에서 제약조건 추가하기

 

다음은 Main.storyboard 화면입니다.

 

Storyboard 화면 우측하단에 메뉴가 있습니다.

메뉴 가운데 위치한 버튼이 뷰에게 제약을 설정해주는 버튼입니다.

버튼을 클릭해보면

 

다음과 같이 방향과 값을 지정해주는 화면이 나옵니다.

실제로 값을 입력해보면

빨간 실선으로 바뀌게 됩니다. ( 선택한 방향에 제약을 추가 하겠다는 의미 )

이어서

Add 1 Constraint 버튼을 클릭하면

뷰에 제약조건이 지정된 것을 확인해 볼 수 있습니다.

여기서 제약조건의 값을 수정하겠다고

다시 한 번 Add New Constraints를 하게되면

이런 상태가 됩니다.

지금의 상태는 값이 수정된 것이 아닌 같은 방향에 제약조건이 2개가 중첩된 것으로

하나의 제약조건을 삭제 해주어야 합니다.

---

Inspector 목록에 Size Inspector로 가보면

Constraints 라는 제약조건들의 목록을 볼 수 있고,

Vertical 메뉴에서 제약조건을 삭제하거나 수정할 수 있습니다.

---

참고 자료

https://www.youtube.com/watch?v=ICV5meUBVK8&list=PLz8NH7YHUj_ZF2oja5rP4Sow5KK1zf2yk&index=24 

              https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html