[Auto Layout] Multiplier(1)

 

 

코드로 하면 더 깔끔하지만, 공부하는 입장에서는 눈으로 보면서 하면 더 빠르게 이해가 가능하기 때문에 스토리보드를 사용해서 설명하였다.

 

복습하는 중에 혹시 놓칠만한 것들만 골라서 정리했으니,

auto layout을 한번이라도 써본 사람이라면 끄덕 끄덕 하면서 빠르게 읽고 넘어가면 된다...ㅎㅎ

 

 

Multiplier (1)

 

auto layout을 쓰기 전에, frame과 origin 혹은 center를 쓰면서, 각각의 비율을 계산해서 만들어본 경험이 있을 것이다. 물론 이 방법은 auto layout 과 당연히 다름없이 작동하고, 가끔(구동 중 새로운 view를 띄운다던가 하는 상황)은 더 편리할 때도 있을 것이다.

 

 

사실 auto layout을 공부하기 전에는 정밀하게 원하는 위치에 원하는 view를 배치하기 위해서는 auto layout이 조금 불편할 수 도 있을 거라 생각했었는데,

 

 예상을 깨부숴준 게 바로 multiplier이다.

 

 

multiplier는 해당 길이, 간격, 좌표의 "상대적 비율"을 조정해준다.

 

 

 

상대적 비율??

 

 

 

 

간단하게 예시를 하나 들어보겠다.

 

 

이런 view 4개를 배치한다고 가정하자.

view는, window를 4등분한 각각의 중심 좌표를 중심으로 하여 배치되고

width와 height는 시계방향으로 각각 1.5배씩 커진다.

 

 

 

여기서 가장 첫번째 기준이 되는 첫번째 (주황색) view의 크기를 절반으로 줄이면, 오른쪽 그림과 같이 view들이 자동으로 바뀌게 된다.

 

 

 

 

상대적으로 정해진다는 의미는 바로 이것이다.

 

 

 

먼저, 위치를 보자.

 

 

 

 

위치는 다음과 같이 SuperView의 Center의 X값과 Y값에 상대적으로 정해진다.

 

이게 어떻게 계산되는 건지는, 다음 장에서 확인할 것이다. 꼭 다음장도 읽어보자.

 

예를 들어서 보라색 View의 경우, 일단 위치를 Center 좌표로 정한 후, center 좌표에서 x에서 0.5만큼 곱해주고, y에서 1.5만큼 곱해줌으로서 4분면의 3사분면의 중앙에 위치할 수 있게 되는 것이다.

 

 

 

도형의 width와 height 도 마찬가지다.

 

 

 

먼저 주황색 View의 width와 height를 임의로 100, 100으로 설정하였다. (기준이 되는 크기)

 

먼저 빨간색 View를 주황색 View의 width와 height의 각각 1.5배씩 주었으며, 세번째 네번째 도형도, 마찬가지로 이전 도형의 1.5배씩 주었다.

 

 

이렇게 하면 주황색의 크기에 따라서 자동으로 비율에 맞춰서 다른 view들의 크기가 정해진다.

 

 

 

너무 쉽잖아!!!!

 

 

 

하지만, 우리는 multiplier가 어떻게 작동하는지 아직 알지 못한다. 정말 찍먹만 해본 것이다.

 

"상대적"으로 작동한다고만 알고 있던 multiplier는 어떻게 계산되는 것일까?

 

이제부터 조금 헷갈리는 개념이 등장한다.

 

 

다음 장에서 한번 알아보자!