[SWIFT] UI, 두 개의 뷰를 일정 비율로 배치하기(오토레이아웃)

[개요]

아래와 같은 비밀번호 뷰를 만든다고 생각하자.

여기서 디자인 기획은 저 비밀번호 배경 뷰(파란색)를 아래 하단 다이얼이 보이는 뷰(흰색)의 비율을 1:2로 했으면 한다고 온 것이다.

기본적으로 스토리보드에서 잡는 오토레이아웃은 저 둘중 하나의 Height값만 주어지면, 나머지는 그것에 맞게 맞춰지도록 하는 것이 편리하다. (두 개의 뷰의 bottom, top은 0으로 붙어있다고 가정)

그런데 비율로 왔을 때는 어떻게 해야하는가.

viewDidLoad에서 self.view.frame의 height의 값을 3으로 나눈 값의 1, 2배를 하여 오토레이아웃을 코드로 작성하는 것도 방법이다.

기존에는 이렇게 하다가.. 스토리보드로 하는게 간편할것 같아 알아보던 중에 찾아서 기록해 둔다.

[사용법]

]

기본적으로 뷰 2개(여기선 이미지뷰를 갖고있는 뷰와 컬렉션 뷰 하나로 테스트)를 기본 오토레이아웃으로 서로 화면에 맞게 0으로 각 네 부분을 잡아준다.

뷰의 바텀과 컬렉션뷰의 탑 값은 0

그럼 위와 같이 제약조건이 부족하다며 경고창이 나온다.

이제 여기서 위의 뷰를 마우스 오른쪽 클릭한 채로 아래 컬렉션 뷰로 드래그 한 뒤 클릭을 뗀다.

여기서 선택할 것은 Equal Height

(참고로 이 방법 말고 두 개의 뷰 동시에 클릭하고 제약조건 Equl Height를 버튼 눌러 지정해도 됨)

그럼 서로 높이가 같아졌으므로 빨간 불은 사라진다.

그 다음은 위에 있는 뷰를 클릭하고(먼저 클릭한 뷰, 이미지 뷰를 갖고 있는 뷰)

이제 우측 패널에서 인스펙터라고 하던가 하여튼 여기 5번째의 Multiplier값이 1로 되어있다.

위에서 읽어보면 View.Height는 컬렉션 뷰의 높이와 같다고 되어있다.

그리고 Multiplier는 1로 되어있는데 이 대상은 Collection View.Height와의 비율을 의미한다.

이걸 0.5로하게 되면

View.height는 Collection View.height의 0.5배를 곱한 값과 같다 라는 의미가 된다.

그리고 그 결과 화면은 이처럼 딱 원한 결과가 된다.