[iOS/UIKit] Auto Layout - Multiplier 사용하기

안녕하세요

너구리입니다:)

 

오늘은 Multiplier 사용에 대해 한번 알아볼게요!

 

 

Multiplier

 

이름을 사전에 검색해 보면 승수, 곱하는 수라고 되어 있습니다.

 

그런데 multiplier...

제 포스팅을 보신 분들이라면 어디서 보시지 않았나요?

 

 

바로 이 그림에서 봤었죠!!

기본적으로 constraint를 주게 되면 multiplier는 1.0으로 설정되어 있습니다.

 

식으로 봤을때 mutiplier를 바꾸게 되면 비율로 constraint가 바뀌겠다는 감이 오시죠?

바로 사용해보겠습니다!!

 

 

 

Multiplier 사용하기!

 

먼저 초기 세팅은 파란색 UIView를 추가한  후 Safe Area Edge에 Constraint를 맞춰두겠습니다.

 

파란색 UIView leading Constraint에 multiplier 2를 줘볼게요!

엇 근데 아무 변화가 없네요!

 

공식을 확인해 봅시다.

 

(파란색 UIView).leading = (2.0)*SafeArea.leading

이렇게 적용할 수 있을것 같은데

지금 SafeArea.leading 값이 0이죠?

그래서 mutiplier에 어떤 값을 넣더라도 반영이 안되는 것입니다.

 

 

 

파란색 UIView top constraint에 mutiplier값 2.0을 설정해 보겠습니다.

 

 

이번엔 파란색 UIView의 Y값이 변하는 것을 볼 수 있죠?

 

multiplier를 적용전에 파란색 UIView의 Y값이 47인것을 확인할 수 있습니다.

이 값은 SafeArea의 top값인데요!

이것을 공식에 대입해보면

(파란색 UIView).top = (2.0)*SafeArea.top(47.0) = 94.0

 

사진상 결과도 UIView의 Y값이 94인것을 확인할 수 있습니다.

 

 

 

파란색 UIView trailing Constraint에 multiplier 2를 줘볼게요!

 

이건 반으로 줄어버렸네요!

아마 두배로 커질거라는 예상을 가지신분도 있으실 것 같습니다.

 

trailling은 보는 관점이 조금 달라지는데요!

파란색 UIView는 기본으로 가지고 있는 View안의 SubView 이므로 

trailing 

공식을 다시 보면 이런 형태입니다.

SafeArea.trailing = (파란색 UIView.trailing )* multiplier + Constant

 

공식 좌항인 SafeArea.trailing 변하지 않는 상수 입니다.

그렇기 때문에 multiflier값 2를 주게 되면 파란색 UIView.trailing이 1/2이 되는 것입니다.

그래서 Constant값을 주게 되면 파란색 UIView.trailing 값이 constant만큼 줄어들게 되는 것입니다.

실제로 Constraint 목록을 보면(아래 사진 참고) 공식이 똑같이 적용되어 있습니다.

 

bottom constraint도 마찬가지입니다!

muliplier를 파란색 UIView에 주게 되면 크기가 줄어들게 됩니다!

 

근데 safe area에서 bottom과 trailing은 공식 좌항이 왜 저렇게 되는지 잘 모르겠는데

아시는분 있으시면 알려주시면 감사하겠습니다ㅠㅠ

 

 

이렇게 되는 경우는 다시 한번 말하면

기준이 되는 값(Constraint가 걸린 상대의 값)이 변하지 않는 상수일 경우 이렇게 됩니다.

공식으로 보면 좌항에 있는 값이 상수이면 같은 케이스가 발생하게 됩니다.

그럼 safeArea 뿐만 아니라 컴포넌트와 컴포넌트 사이에도 이런 경우가 발생할 수 있어요!

 

 

테스트 해보겠습니다!!

그림은 파란색 UIView  Height를 100으로

파란색 UIview와 노란색 UIView를 equal height 속성을 주었습니다.

그랬을 때 equal Height의 multiplier에 값 2를 설정하면

노란색 UIView height이 50이 된것을 확인할 수 있습니다!!

 

 

관계를 잘 설정해서 multiplier를 주어야겠네요!

 

 

 

 

글 읽어주셔서 감사합니다.

그리고 safe area에서 bottom과 trailing을 주게 되면 공식 좌항이

왜 leading과 top의 식과 다르게 되는지 잘 모르겠는데 

아시는 분이 계시다면 알려주시면 감사하겠습니다ㅠㅠ