[Auto Layout] 5. Multiplier

Multiplier: 곱, 비율

[Multiplier 개념]

Multiplier는 쓰기가 까다로운 상황들이 있어 정확하게 알고 써야한다.

1. View를 추가하고 Contraints를 각 0으로 설정해서 화면에 꽉 차도록한다. (SafeArea내부에서 꽉차게)
   
   

2. View를 선택하고 Leading의 Multiplier를 조절해보자.

• 0.5(50%): 기존의 반
• 1(100%): 기존과 동일
• 2(200%): 기존의 두배

하지만 직접 조절해보면 아무런 변화가 없다.

그 이유는 Leading부분이 시작하는 곳이 0이기 때문에 0 0.5 = 0, 0 1 = 0, 0 * 2 = 0 으로 변화가 없다.

그러면 Constant를 조정해주면 변화가 생기지 않을까?

전혀 변화가 없다.

그 이유는 Constant는 시작점 0에서 간격을 Constant만큼 줄뿐 시작점은 변하지 않기 때문이다.

하지만 top의 경우 시작점이 SafeArea에 의해서 Y:44부터 시작되기 떄문에 변화가 일어난다.

2를 넣으면 시작점 * 2가 되어 88부터 시작하게 되므로 아래 사진처럼 된다.

따라서 오토레이아웃을 y = ax+b로 둔다면 a는 Multiplier, b는 Constant, x는 시작점, y는 최종위치라고 할 수 있다.

이제 문제는 bottom과 trailing의 Multiplier를 조절했을 때의 상황이다. bottom의 Multiplier를 2로 설정하면 예상과 다르게 아래와 같이 줄어든다.

그 이유는 Leading과 top은 text 기준으로 시작하는 지점이지만 trailing과 bottom은 끝나는 기준 즉, 결과 값 y이기 때문이다.

ax = y가 있을 때 trailing과 bottom은 ydlrh Multiplier는 a 이기 때문에 x = y/a가 된다.

이제 다시 돌아가서 얘기 해보면 어떤 값(x)에 2를 곱하면 bottom의 Y좌표 686(686은 Height - y)이 나온다. 따라서 2를 곱해서 Y좌표 686이 되기 위한 x는 343이 된다.

[Multiplier 실전 사용1]

[크기가 지정되지 않았을 때의 Multiplier]

이제 실전에서 어떻게 쓰이는지 살펴보자.

1. 두개의 View를 화면에 놓고 각각 20씩 Constraints를 잡아준다.
   

2. 1번만 하면 오류가 생기기 때문에 Segue로 높이를 잡아준다. (시작 Segue는 파란색 View)
   
   

3. 사이즈 인스펙터로 가서 EqualHeight의 Mutiplier를 2로 조절해보자.
   
   그러면 위와 같이 변하게 된다. 기준View가 다른 View의 2배가 된것이다. 비율로 따지면 파란색 2 : 초록색 1이 된 것이다.

[크기가 지정되었을 때의 Multiplier]

모든 Constraints를 삭제하고 다시 시작해보자.

1. 두개의 View의 Constraints를 bottom만 빼고 잡아준다.
   

2. Segue로 EqualHeight를 하고 파란색 View의 Height를 200으로 잡아준다.

이렇게하고 파란색 View의 사이즈 인스펙터에서 Height를 보면 Multiplier는 적용되지 않는다.

그 이유는 파란색 View의 Height 경우 직접 입력해서 지정했기 때문에 상대적으로 적용되는 Multiplier는 적용되지 않는다.

3. EqualHeight의 Multiplier를 조절해보자.
   
   Multiplier: 2 -> 파란색1 : 초록색0.5

Multiplier: 10 -> 파란색1 : 초록색0.1

조절해보면 위의 사진처럼 파란색 View의 Height는 고정되고 고정된 Height를 기준으로 초록색 View의 Height가 변화하게 된다.

[하나의 View Multiplier]

1. 크기 100 100이고 가운데 정렬인 View 만들기
   

2. 사이즈 인스펙터에서 X의 Multiplier 조절해보기

위의 사진처럼 2를 넣어주면 기존 x좌표의 두배의 좌표로 이동하게 된다.

3. 사이즈 인스펙터에서 Y의 Multiplier 조절해보기

이런식으로 여러개의 컴포넌트들이 화면에 비울에 맞게 설정하려면 x,y좌표에 Multiplier를 조절해서 설정할 수 있다.

[Multiplier 실전 사용2]

이제는 실제 화면에 맞게 실정 사용을 해보자.

1. imageView를 이용해 배경이미지를 설정해준다. (꽉찬화면)
   
   위의 사진은 SafeArea상 꽉찬 배경이기 때문에 사이즈 인스펙터로 가서 SafeArea를 SuperView로 설정해주고 Constant를 0으로 해준다. (top, bottom, trailing, leading 동일)

2. Label을 이용해서 온도를 작성해주고 가운데 정렬해준다.
   

이제 우리는 이 Label을 위쪽으로 조금 올려주어야한다.

3-1. Y좌표의 Constant를 조절해준다.

이렇게 하면 아이폰11화면에서는 정확하게 올라가지만 다른 핸드폰으로 화면을 봤을 때에는 위치가 조금씩 달라진다.

3-2. Multiplier로 조절해준다.

이런식으로 하면 화면 비율에 맞춰 그때마다 다르게 설정해주기 떄문에 화면별로 위치가 달리지지 않는다.

따라서 비율에 맞춰서 컴포넌트의 위치를 잡아주려면 Multiplier로 잡아주는 것이 좋다.