autolayout - multiplier 정리

autolayout - multiplier 정리

 

xcode의 autolayout에는 multiplier 속성이 있다. multiplier를 한글로 하면 승수다. 단순하게 이해한다면 multiplier는 xcode에서 곱하기 라고 생각하면된다. 무엇에 대한 곱하기 일까? 바로 뷰의 y 좌표와 x좌표에 대한 곱하기이다. 그럼 예제로 뷰를 하나 만들어서 뷰의 탑 제약조건에 multiplier를 2로 줘보자.

 

1.multiplier 개념

결과는? 아무런 반응이 없다. 이유는 탑 제약조건의 multiplier는 뷰의 y좌표에 곱하기를 한다고 했는데 현재 뷰의 y좌표는 0이기 때문이다.

 

 

 

safe area가 존재하는 iphone 11 같은 경우는 기본 y좌표가 44로 설정되어 있다. 그래서 탑 제약조건의 multiplier를 2로 주면 원래 y축 좌표인 44의 두배, 즉 88로 변한다. 여기서 탑제약조건의 Constraints를 20으로 줘보자. 그럼 y축은 108이 될것이다. Constraints는 실제로 multiplier에 영향을 주지 않는다. 단지 y축에서 Constraints값 만큼 더해줄 뿐이다

 

 

 

이번에는 트레일링 제약조건의 multiplier값을 0에서 2로 변경해보자. width 가 414에서 207로 1/2 배로 줄어들었다. 

참고로 Top 제약조건과 Leading 제약조건은 시작점이다. 반대로 Trailing과 Bottom 제약조건은 끝나는 지점으로 생각해야 한다. 

Top 제약조건과 Leading 제약조건에 multiplier 값을 설정하면 기존 x,y좌표 값 곱하기 multiplier값의 값이 결과 값이 된다. 

 

즉, 기존좌표 x multiplier = 결과값.

예) y좌표(44) x multiplier(2) = y좌표(88)

 

Trailing과 Bottom 제약조건은 곱해지는 대상의 값이 된다. 식으로 보면 multiplier 곱하기 곱해지는 대상x좌표 결과값은 414 처럼 이미 결과 값은 정해져 있는 상태에서 곱해지는 x좌표 또는 y좌표가 결정되는 형식이다.

 

즉, multiplier x (대상x좌표) = (x좌표의 끝나는 지점)414

예) multiplier(2) x (?) = 414

위에 (?) 에는 어떤 수가 들어가야지 값이 x좌표의 끝나는 지점 좌표가 414가 될까? 바로 207이다. 

 

이처럼 Top 제약조건과 Leading 제약조건은 시작점.

반대로 Trailing과 Bottom 제약조건은 끝나는 지점으로 생각해지 multiplier개념을 이해하기가 쉽다.

 

 

 

2.multiplier 사용시 주의점

주황뷰, 보라색 뷰 위치를 위, 아래, 좌, 우 20 씩 주고 주황뷰를 우측클릭 후 보라색 뷰에 끌어다 놓고 보라색 뷰와 높이를 동일하게 맞춰준다. 그리고 주황뷰를 클릭하고 주황뷰의 높이 제약조건의 multiplier를 변경하면 주황뷰의 높이가 변경된다. 만약에 주황뷰의 높이를 200 또는 300등 값을 고정해서 줘버리면 주황뷰의 높이 제약조건의 multiplier를 변경해도 변하지 않는다. multiplier는 상대적으로 변경되기 때문이다.

 

 

 

4개의 뷰를 만든다음 화면의 위쪽 좌우, 아래쪽 좌우에 하나씩 총 4개를 배치해 보자. 크기를 모두 100, 100으로 준다음 부모뷰의 Center X, Center Y에 맞춘뒤, 부모뷰의 Center X, Center Y의 multiplier를 조금씩 변경해서 맞춰보자.

 

 

 

아래와 같이 나오면 성공이다.

 

 

3.응용

이미지뷰 객체에 이미지를 하나 올리고 인스펙터에서 Content Mode 속성을 Aspect Fill로 준다. 그리고 이미지뷰의 위치를 위, 아래, 좌, 우 모두 0으로 맞춰준다. 아이폰 11의 경우 0으로 줘도 safe area에 Top 제약조건이 맞춰져 있어서 Top제약조건을 더블클릭 하고 사진 아래 처럼 second item의 대상을 슈퍼뷰로 바꿔주고 Constant도 0으로 바꿔주면 위의 빈 공백 없이 이미지가 가득찬다. 

 

 

 

이미지뷰위에 라벨을 하나올리고 Let's Go라고 써준다. 그리고 라벨을 클릭하고 정렬 버튼에서 부모뷰를 기준으로 화면가운데 Center x, Center Y를 선택해 준다. 그리고 사진처럼 가운데 보다 조금 위쪽에 위치 시키기 위해서 제약조건 Center Y를 클릭한 후 multiplier를 0.5로 지정해 준다.

 

성공

 

 

연재포스팅

autolayout - constraints 정리 (1)

autolayout - constraints 정리 (2)

autolayout - align 정리