StackView를 통한 iOS 스토리보드 레이아웃

레이아웃을 구성하는 데에는 많은 방법이 있습니다. 상 하 좌 우 공백 값을 설정해서 view 를 배치하는 방법도 있고, stackView를 통해서 구현하는 방법도 있는데요. 저는 stackView를 사용하여 편리하게 View를 구성하는 방법을 알려드리려 합니다. 

 

우선 stackView는 다음과 같은 이점을 제공합니다. 

1. 유연한 레이아웃 : stackView 는 자동으로 크기를 조정하기에 다양한 디바이스에 대응하는 레이아웃을 구성하는데 도움이 됩니다.
2. 자동 정렬 : 내부의 요소들을 사용자의 설정에 따라 수직 or 수평으로 정렬해줍니다. 요소를 추가하거나 제거하면 자동으로 정렬을 업데이트 합니다.
3. 간격 설정 : 내부의 요소들 끼리 간격을 쉽게 조정할 수 있습니다.
4. 중첩 가능 : 스택뷰 안에 다른 스택뷰를 넣어 복잡한 ui를 구성하는데 유용합니다.

 

우선 Distribution 을 Fill - Equally 로 설정하여 비율을 조정하는 법을 보겠습니다. 

1. 메인이 되는 스택뷰를 전체 화면에 맞춰 상하좌우 padding 을 0 으로 설정한다.
2. Fill Equally 를 통해서 높이를 균일하게 설정한다.

색상을 다르게 해 모두 같은 비율로 들어있는 것을 확인할 수 있습니다.

스택뷰안에 있는 뷰는 높이만 설정하면 된다는 것을 잊지 마세요!

비율을 다르게 하고싶다면 ? Distribtation 속성을 Fill 로 설정하고 채울 수 있습니다. 예를들어

FirstView : SecondView : ThirdView 속성을 2 : 1 : 1 로 설정하고 싶다면

FirstView 를 control 를 누른 상태로 MainView 로 드래그 해서 조건을

Equal height 제약조건을 걸어준다. → 옆에 Proportional Height to : SuperView 가 생기는데 MainView를 기준으로 높이를 설정했다는 뜻입니다. Multiplier : 0.5 는 따르는 부모뷰의 높이에 비해 0.5배라는 뜻으로 전체의 부모뷰 높이의 0.5배를 따릅니다. 그래서 나머지 뷰도 마찬가지로 부모뷰의 0.25배씩 하여 비율을 만들어주겠습니다 !

두번째 뷰를 부모뷰의 0.25로 설정하여 2:1:1 의 비율을 나타낸 것을 볼 수 있습니다. 스택뷰는 기본적으로 fill 속성으로 차있기 때문에 3개중 2개만 높이가 설정되어 있어도 한개는 남은 공간에 맞추어 fill 이 되기 때문에 자동으로 0.25배로 설정이 되어있는것을 확인할 수 있습니다. 

 

스택뷰의 장점 - 스택뷰 안에 스택뷰

 

스택뷰가 설정이 편리한 이유는 스택뷰 안에 스택뷰를 넣을 수 있기 때문인데요. 예시를 들어볼게요 !

앞서 설정했던 2: 1: 1의 비율을 다른 방법으로 설정해보겠습니다.

현재 Distribution 속성은 Fill Equally 입니다.

secondView의 Distribution 속성을 Fill Equally 로 설정하고 view 두개를 넣으면 2개의 뷰가 일정하게 들어간 것을 볼 수 있습니다. 이렇게 전체 first : second = 1: 1

second 안의 뷰 두개가 1:1 로 비율을 잡으며 원하는 비율이 생성된 것을 볼 수 있습니다.

이렇게 stackView를 사용했을때의 이점을 정리해보았습니다 ! 다음 글에는 본격적으로 Appstore 의 NineNine 게임

뷰를 똑같이 구현해보는 시간을 가져보겠습니다 !