[IOS] [AutoLayout] AutoLayout이란?

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853-CH7-SW1

Auto Layout Guide: Understanding Auto Layout

apple auto layout guide문서를 참고하여 작성하였습니다.

AutoLayout이란?

뷰에 설정되어 있는 제약조건을 기반으로 동적으로 크기와 위치를 계산하는 것이다.

따라서 절대적 좌표가 아닌 상대적 좌표를 이용한 제약조건을 기반으로 다양한 크기의 디바이스에서 동일한 화면을 구성한다.

 

사용 이유

• External Changes (외부 요인에 의한 변경)
  슈퍼 뷰의 크기나 모양이 변경될 때
  ex) 디바이스를 회전할 때, 다른 크기의 클래스나 스크린을 지원할 때, 아이패드의 스프릿 뷰를 사용할 때
• Internal Changes (내부 요인에 의한 변경)
  사용자 인터페이스의 보기 또는 컨트롤 크기가 변경될 때
  ex) 앱에 표시되는 콘텐츠 변경, 국제화를 지원할 때(언어 변경, 날짜와 숫자 표시 형식 변경, 읽는 방향 변경), 앱이 동적 유형을 지원하는 경우 

 

AutoLayout 속성

• width/ height : 너비와 높이
• top / bottom : 상단과 하단
• baseline : 텍스트의 하단
• left/ right : 왼쪽과 오른쪽
• leading/ trailing : 텍스트의 시작과 끝 (일반적으로 미국식 표기에 의하면 왼쪽에서 오른쪽으로 텍스트가 진행하기 때문에 left/right와 동일하지만, 아랍어의 경우 오른쪽에서 왼쪽으로 텍스트가 진행하기 때문에 left/ right와 반대이다.)
• centerX, centerY : 수평 중심과 수직 중심

 

제약조건과 방정식

사이즈 인스펙터 탭에 들어가면 해당 요소에 걸린 제약조건 들을 확인할 수 있다.

이 중 한 개의 제약조건에 들어가서 확인해보면

이러한 탭이 나타나는데, 이는 제약조건 방정식과 관련이 있다.

제약 조건 방정식은 다음과 같은 형태로 나타낼 수 있다.

해당 방정식은 redview의 앞부분(reading)이 blueview의 끝부분(trailing)과 8포인트만큼 떨어져 있음을 의미한다.

인스펙터 창과 방정식의 상관관계를 살펴보면

first item은 item1과 attribute1을 합쳐놓은 것으로 제약 조건의 기준이며 second item은 item2와 attribute2를 나타낸다.

relation은 방정식의 relationship으로 같음, 크거나 같음, 작거나 같음 세 가지 값이 존재한다.

multiplier은 방정식의 multiplier로 승수를 의미한다. 즉 좌항과 우항의 비율을 의미한다.

constant는 방정식의 constant로 상수를 의미한다. 얼마만큼 떨어져 있는지를 나타낸다.

 

priority

방정식에는 없지만 인스펙터에 있는 priority는 우선순위를 의미한다.

충돌되는 제약조건이 있는 경우 우선순위가 큰 제약조건을 우선으로 한다.

하지만 충돌되는 제약조건이 없다면 낮은 우선순위를 가지고 있더라도 해당 제약 조건을 유지할 수 있다.