[Auto Layout] Multiplier(2)

 

 

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

 

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

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

 

 

 

Multiplier (2)

 

Multiplier가 어떻게 작동하는지 알아보자.

 

이 부분을 정확하게 이해하고 넘어간다면, 확실히 auto layout을 보는 시야를 넓힐 수 있을 것이다.

 

Alignment Constraints의 Multiplier의 경우를 보면서 한번 알아보자.

 

 

 

이렇게 View를 safe Area를 따라서 화면 가득 채워보자.

 

 

 

 

 

여기서 Top의 Multiplier를 2로 올리면, 이렇게 safe Area만큼의 크기가 한번 더 간격이 생기게 된다.

 

 

 

 

 

반면에, Bottom의 Muliplier를 2로 설정하면, 이렇게 절반으로 줄어버린다.

 

 

 

 

 

 

왜 Top과 Bottom의 Multiplier가 다르게 작동하는 걸까?

 

 

 

 

 

이것을 이해하기 위해서는 Auto Layout이 어떻게 계산되는지를 알아야 한다. 

 

 

우리가 Constraints 항목에서 볼 수 있지만, Auto layout은 다음과 같이 일정한 식을 통해서 결정된다.

 

 

 

 

Auto Layout이 계산되는 식은 다음과 같다.

 

First Item  =  Multiplier  *  Second Item  +  Constant

 

 

 

간단하게 설명을 하면, First Item과 Second Item은 각각 값을 정하고 싶은 Item과 값을 정하기 위해서 상대적으로 고려해줄 Item이다.

 

 

 

조금 더 자세하게 살펴보자!

 

 

 

먼저 여기서 TopMargin과 BottomMargin은 모두 SafeArea 때문에 주어진 간격값이다. (아이폰11의 경우 top=44, bottom=34)

 

 

 

먼저 View의 Top 값을 보자.

 

 

View.top = 2 * topMargin + 0 이라는 것을 확인할 수 있다.

 

 

Multiplier를 2로 주었기 때문에, top Margin에서 2만큼 곱해진 값이 View의 top 값이 되는 것이다.

즉, 우리가 auto layout 값을 설정하려는 view.top은 top margin의 multiplier로 인해 2배가 되었다.

 

 

 

반면에 View의 Bottom 값은,

 

bottomMargin = 2 * view.bottom + 0 이다.

 

 

좀 이상하지 않은가??

 

 

 

 

우리가 autoLayout설정하려는 값은 view.bottom인데, 왜 bottomMargin이 좌변에 있을까?

 

 

이는 보통 bottomMargin이 view.bottom보다 크기 때문이다. 보통 bottomMargin 보다 아래에서 (작은 값으로) view.bottom이 움직이기 때문에, bottomMargin이 죄변으로 가는 것이다.

 

 

 

 

 

자, 이제 왜 multiplier를 2로 주었을 때, view.bottom이 절반으로 줄었는지 이해가 될 것이다.

 

bottomMargin = 2 * view.bottom

 

요 식에서, bottomMargin은 이미 고정되어 있는 값이기 때문에, 

 

사실은 이렇게 된다.

 

view.bottom = bottomMargin / 2

 

이렇게 되어서 bottomMargin까지를 절반으로 나눈 값이 view Bottom이 된 것이다!!

 

 

 

 

 

 

 

 

많이 사용하지는 않겠지만, 분명히 알아두어야 우리가 구현하고자 하는 view를 더 정확하고 정밀하게 구현할 수 있을것이다.

 

 

이렇게 First Item이 아닌 Second Item에 우리가 auto Layout 값을 주고 싶은 attribute가 들어가는 경우는, 이 외에도 Trailling이 있다.