[iOS/UIKit] Auto Layout - Equal 사용해보기

안녕하세요 너구리입니다.

 

auto layout을 정리하고 있는데요.

기능중 Equal에 대해 간단히 정리해보려고 합니다.

직관성을 위해 Storyboard로 진행할게요!

 

 

Equal

 

사실 equal은 조금이라도 Xcode에서 UI를 다루어 봤다면 알고 계신 개념이죠

 

슈퍼뷰와 컴포넌트, 컴포넌트와 컴포넌트(객체 개수 상관 없음) 사이에

EqualWidth, EqualHeight를 줄 수 있는 기능이죠

 

이렇게 쉬운걸 제가 왜 포스팅 주제로 가지고 왔냐...

 

바로 Equal 상태에서 Constant 값을 주는것을 확인해 보고자 가지고 왔습니다.

 

주제로 넘어가기전에 

한번 적용해 보겠습니다.

 

먼저 추가한 두개의 UIView를 다중선택하시고

이렇게 top, leading, trailing, bottom를 각각 20pt,

Equal Width를 체크하여 constaint를 추가해 주면 아래와 같이 완성됩니다ㅎㅎ

 

 

여기서 중요한 점은

파란색 UIView와 주황색 UIView가 상하로 위치하고 있는데

파란색 UIView에서 대상을 설정하지 않고 bottom constaint를 주게되면

superView가 아니라 주황색 UIView top에 constraint가 걸리게 됩니다!

 

 

 

 

Equal에 Constant값을 주게 된다면?

 

테스트가 들어가기전에 혹시 저번 포스팅에서

Autolayout에서 사용한다는 공식 기억나시나요?

 

안나실수도 있으니 다시 가지고 와보겠습니다. 

 

 

이 공식을 잘 기억해 주세요!

 

 

이 공식이 어떻게 적용되는지 테스트를 확인해볼거에요

공식을 구체적으로 적용하기 위해 Equal Height를 풀고.

파란색 UIView에서 주황색 UIView로 Equal Height를 줄거에요.

그러면 약간의 오차는 있지만 두개의 UIView의 높이가 같은것을 확인할 수 있습니다.

 

 

 

자 여기서 Constant값 100을 파란색 뷰에 줄거에요!

그 결과는?

 

파란색 UIView의 높이가 커진것을 볼 수 있습니다!

 

그럼 원래대로 돌려놓고 

주황색 UIView를 선택한후 Constant값 100을 주면?

똑같이 파란색 UIView의 높이가 커진것을 볼 수 있습니다!

왜그런걸까요?

그 답은 바로 저 공식에 있습니다!

 

 

자! 제가 Equal Height를 부여할때 어떻게 했냐면

파란색 UIView선택 후, 주황색 UIView에 적용했죠?

 

 

그럼 아까 보여드렸던 공식을 사용하면 어떻게 되느냐

(주황색 UIView).Height = (파란색 UIView).Height + Constant(0) (Constant 주기 전)

(주황색 UIView).Height = (파란색 UIView).Height + Constant(100) (Constant 준 후)

 

이렇게 적용이 됩니다!

 

이 공식은 두 UIView에 동시에 적용이 되기 때문에 양수 Constant를 주면 

파란색 UIView가 Height가 커지게 되는것이죠

반대로 음수를 주면 작아집니다.

 

 

그럼 이것을 반대로 되게 하려면

주황색 UIView를 누르고 파란색 UIView에 Equal Height를 주면 됩니다.

 

 

이 공식은 앞으로도 많이 사용할거에요!!

 

 

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