2. Auto Layout_Priority

 

Simple Constraints

문제를 몇 개 풀어보자.

 

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

Auto Layout Guide: Simple Constraints

 

만약 width가 동일한 두 뷰가 있는데, 한 쪽 뷰의 너비가 다른 한쪽 뷰 너비의 2배가 되게 하려면 어떻게 해야 할까?

multiplier를 이용해 보자.

편의를 위해 오렌지색 뷰를 LeftView, 민트색 뷰를 RightView로 이름을 바꿔줬다.

사이즈 인스펙터 부분을 살펴보고 이를 수식으로 표현해 보면..

First Item,즉 민트색 뷰의 width(너비)는 Second Item(오렌지 뷰)의 너비의 2배만큼이다.

 

RightView.Width = 2(Multiplier) X LeftView.Width + 0(Constant)

간단하쥬?

또한 multiplier는 숫자, %, 분수, 비율로도 쓸 수 있다.

 

아래 문제를 풀어보자.

파란색 뷰의 너비는 최소한 150포인트가 되어야 하고, 빨간색 뷰는 파란색 뷰 너비의 2배가 되면 좋은 상황이다.

하지만 화면 사이즈 때문에 세로에서는 이러한 요구사항이 전부 충족되기 어렵다.

따라서 파란색 뷰의 최소 너비를 충족시키는 것이 우선시 되어야 하고, 빨간색 뷰의 너비는 그 이후의 일이다.

 

 

우선 왼쪽 뷰의 너비를 150 이상, 그리고 priority를 가장 높게 (1000)으로 설정해준다. 이 제약이 가장 최우선인 것이다.

(좌측 이미지 참고)

 

그다음 오른쪽 뷰의 너비가 왼쪽 뷰의 2배가 되도록 설정을 해 주지만, priority를 1000보다 작게 설정해 준다.

(가장 높은 우선도인 왼쪽뷰의 너비가 150이상이라는 제약을 충족시키고 나서 남은 공간에서 최대한 넓어질 것이다.)

(중앙 이미지 참고)

 

디바이스를 가로로 회전하면 공간이 많아져서 쭉 늘어난 모습을 볼 수 있다. (빨간 뷰 너비 150 충족 하고 나서)

(마지막 이미지 참고)

 

제약에서 우선 순위를 활용하는 방법에 대해 간단하게 알아보았다 :)

 

[학습 소스]

공식문서, 야곰 오토레이아웃 정복하기 강의

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html

https://yagom.net/courses/autolayout/