[패스트캠퍼스] 30개 프로젝트로 배우는 iOS 앱 개발 with Swift 초격차 패키지 Online을 학습하면서 나오는 이론 내용과 공식 문서에서 필요한 내용을 발췌하여 정리한 글입니다.
Part2. Basic 3. 계산기 앱 만들기
UIStackView
열 또는 행에 View 들의 묶음을 배치할 수 있는 간소화된 인터페이스이다.
UIStackView는 AutoLayout을 이용하여 디바이스의 스크린 사이즈나 혹은 어떠한 변화에 맞쳐서 동적인 UI를 구성할 수 있다. 복잡한 UI를 구성하는데 있어서 일일히 AutoLayout 제약조건을 설정하면 제약조건이 많아지고 복잡해져서 관리하기 힘들어지며 때때로 원하는데로 UI구성이 안될 수도 있다.
그렇기에 그에 대응하는 UIStackView를 사용하게되면 제약조건을 많이 설정하지 않아도 쉽게 UI구성이 가능해진다.
UIStackView Attribute
UIStackView에는 다양한 속성이 있다.
스토리보드에서 스택 뷰를 선택하면 속성 인스펙터에서 다양한 속성을 설정 할 수 있다.
스택 뷰 안에 있는 서브뷰들의 포지션과 사이즈를 맞추기 위해 속성들을 세팅할 수 있다.
Axis
스택 뷰의 가로 또는 세로의 방향을 결정 할 수 있다.
- Vertical Stack View: 세로 방향으로 서브 뷰들이 정렬된다.
- Horizontal Stack View: 가로 방향으로 서브 뷰들이 정렬된다.
Alignment
스택 뷰의 서브 뷰들을 어떤식으로 정렬할지 결정하는 속성이다.
-
Fill: 서브 뷰들을 너비를 스택 뷰에 맞게 늘린다.
-
Leading: 서브 뷰들이 스택뷰의 왼쪽에 정렬된다.
Horizontal Stack View
-
Top: 서브 뷰들이 스택 뷰의 위쪽으로 정렬된다.
-
Bottom: 서브 뷰들이 스택 뷰의 아래쪽에 맞춰서 정렬된다.
-
First Baseline: 서브 뷰들의 First Baseline에 맞춰 스택 뷰가 서브 뷰들을 정렬한다.
-
Last Baseline: 서브 뷰들이 Last Baseline에 맞춰 스택 뷰가 서브 뷰들을 정렬한다.
-
Center: 서브 뷰들의 센터를 스택 뷰의 센터에 맞춰 정렬된다.
Vertical Stack View
- Trailing: 서브 뷰들을 스택 뷰의 오른쪽에 맞춰서 정렬한다.
Distribution
스택 뷰안에 들어가는 뷰들의 사이즈를 어떻게 분배할지 설정하는 속성이다.
-
Fill: 스택 뷰의 방향에 따라 가능한 공간을 모두 채우기 위해 서브 뷰들의 사이즈를 재조정한다.
스택 뷰안에 들어있는 서브 뷰들이 스택 뷰 크기를 초과하게 되면 각 뷰의 컴프레션 레지스턴스 프라이얼리티(Compression Resistance priority) 각 뷰의 크기를 감소시키고 서브 뷰들이 스택 뷰의 크기에 미달하게 되면 각 뷰의 허깅 프라이얼리티(Hugging priority)에 따라 각 서브 뷰의 크기를 늘려 스택 뷰를 꽉 채운다.
따라서 초과할 때는 Compression Resistance priority를 비교해 우선 순위가 낮은 서브 뷰 부터 크기를 감소시키고 미달 할 때는 Hugging priority를 비교해 우선 순위가 높은 서브 뷰 부터 크기를 증가시킨다. -
Fill Equally: 스택 뷰의 크기에 맞게 서브 뷰들이 모두 동일한 크기로 조정됩니다.
-
Fill Proportionally: 스택 뷰의 방향에 따라 서브 뷰가 가지고 있던 크기에 비례하여 공간을 차지하도록 만들어진다. Fill과 다른점으로는 서브 뷰에 width값에 따라 간다.
-
Equal Sapcing: 서브 뷰들의 사이 공간을 균등하게 배치하는 옵션이다.
-
Equal Centering: 서브 뷰들의 센터와 센터간의 길이를 동일하게 맞추는 옵션이다.
Spacing
스택 뷰 안에 들어가는 뷰들의 간격을 조정한다.
Spacing 값에 따라 서브 뷰들의 간격이 넓어지거나 좁아지게 된다.
