UIStackView
UIStackView는 iOS 9부터 도입된 레이아웃 컨테이너 뷰로, 여러 하위 뷰들을 일정한 규칙에 따라 자동으로 배치하고 관리하는 역할을 합니다.
스택 뷰는 다음과 같은 특징을 가집니다:
-
레이아웃 자동화: 포함된 하위 뷰들의 위치와 크기를 자동으로 관리
-
유연한 배치: 가로 또는 세로 방향으로 뷰들을 정렬
-
간격 조정: 뷰들 사이의 간격을 일정하게 유지하거나 조정 가능
-
적응형 레이아웃: 다양한 화면 크기에 자동으로 적응
UIStackView의 주요 속성
-
Axis (축): 뷰들을 정렬할 방향 (수평/수직)
-
Horizontal: 가로 방향 배치
-
Vertical: 세로 방향 배치
-
-
Distribution (분배): 축 방향으로 뷰들이 어떻게 분배될지 결정
-
Fill: 공간을 채우도록 뷰 크기 조정
-
Fill Equally: 모든 뷰를 동일한 크기로
-
Fill Proportionally: 콘텐츠 크기에 비례하여
-
Equal Spacing: 뷰 사이의 간격을 동일하게
-
Equal Centering: 중앙 정렬 기준으로 간격 동일하게
-
-
Alignment (정렬): 축에 수직인 방향으로 뷰들을 어떻게 정렬할지 결정
-
Fill: 전체 공간을 채움
-
Leading/Top: 시작점 정렬
-
Center: 중앙 정렬
-
Trailing/Bottom: 끝점 정렬
-
Spacing (간격): 뷰들 사이의 간격 설정
-
UIStackView의 쓰임새
-
동적 뷰 배열 관리:
-
뷰들이 추가/제거될 때마다 자동으로 레이아웃 조정
-
복잡한 Auto Layout 제약 조건 대신 간단하게 구현 가능
-
-
반복적인 UI 요소 배치:
-
버튼 그룹, 아이콘 행렬, 라벨 스택 등에 적합
-
예: 설정 화면의 메뉴 리스트, 탭 바 아이템 등
-
-
적응형 레이아웃 구현:
-
화면 크기나 방향 변경에 자동으로 대응
-
iPad와 iPhone에서 다른 레이아웃을 쉽게 구현
-
-
중첩 사용으로 복잡한 레이아웃 구성:
-
수평 스택 뷰 안에 수직 스택 뷰를 넣는 등 중첩 사용 가능
-
예: 프로필 카드 (이미지 + 수직 스택 뷰(이름, 직책, 설명))
-
-
애니메이션과 동적 변화:
-
추가/제거 시 부드러운 애니메이션 효과 적용 가능
-
isHidden 속성 변경으로 동적으로 레이아웃 조정
-
Storyboard에서 UIStackView 사용법
-
객체 라이브러리에서 Stack View를 드래그 앤 드롭
-
원하는 뷰들을 스택 뷰 안에 포함
-
Attributes Inspector에서 axis, distribution, alignment, spacing 설정
-
필요에 따라 하위 뷰들의 Content Hugging/Compression 우선순위 조정
이를 통한 간단한 실습을 해보았다.
ctrl + shift + L을 누르고stackView를 드래그 앤 드랍
- 그러면 이와 같이
stackView생성
- 우 하단에 있는
Add New constraints버튼을 눌러trailing,leading,top,bottom에 대한 값을 입력.
- 그러면
Safe Area와의constraints이 생성
stackView안에 3개의View를 생성
- 3개의
View를 생성했지만stackView의Distribution항목이 설정되어 있지 않아 하나만 보이는 모습
stackView에서Distribution항목을Fill Equally로 설정
- 그러면 이와같이 3개의
View가 비율에 맞게stackView안에 설정
- 각
View사이의 공간을 띄우고 싶다면Spacing항목에서 값을 설정
- 앞서 언급됐던
stackView의 특성을 이용해서View를Hidden하면 나머지 요소들이 알아서 비율에 맞게 조정
참고
