[TIL] UIStackView

UIStackView

---

• 여러 개의 View를 일렬로 자동 정렬해주는 컨테이너 뷰
• 자동으로 나란히 배치 + 정렬 + 간격 처리까지 해준다.
• stackView는 자체 배경이 없고, arrangedSubview만 관리
• StackView 안에 StackView 중첩도 가능

🤔 왜 써야 할까?

기존의 Auto Layout은 일일이 뷰 간 제약을 걸어야 해서 복잡했는데,
UIStackView는 이런 걸 자동으로 처리해준다!

• 코드가 간단해짐
• AutoLayout 제약이 줄어듦
• 뷰 추가/제거가 쉬움
• 반응형 레이아웃 구현에 유리함

1. axis (방향)

stackView.axis = .vertical // 위에서 아래로 세로 방향
stackView.axis = .horizontal // 왼쪽에서 오른쪽으로 가로 방향

2. alignment (정렬 기준)

각 뷰를 어떻게 정렬할지를 결정

속성	설명
.fill	뷰의 intrinsic size를 무시하고 채움 (기본값)
.leading	왼쪽 정렬 (axis가 vertical일 때)
.trailing	오른쪽 정렬 (axis가 vertical일 때)
.center	가운데 정렬
.top	위쪽 정렬 (axis가 horizontal일 때)
.bottom	아래쪽 정렬 (axis가 horizontal일 때)
.firstBaseline	텍스트 뷰 기준 첫 번째 텍스트 라인에 맞춤 (axis가 horizontal일 때)
.lastBaseline	마지막 텍스트 라인에 맞춤 (axis가 horizontal일 때)

axis에 따른 유효한 alignment

axis	사용 가능한 alignment
.horizontal	.fill, .top, .bottom, .center, .firstBaseline, .lastBaseline
.vertical	.fill, .leading, .trailing, .center

3. distribution (크기 분배)

StackView가 가질 수 있는 공간을 어떻게 나눌지, 각 뷰의 크기를 어떻게 정할지 결정

속성	설명
.fill	각 뷰가 intrinsic content size를 기준으로 배치되며, 남는 공간은 필요에 따라 분배됨 (기본값)
.fillEqually	모든 뷰의 크기를 같게 만들어서 공간을 균등 분배
.fillProportionally	뷰의 intrinsic content size 비율대로 공간을 비율 분배
.equalSpacing	뷰 사이의 간격을 같게 유지하고, 뷰 크기는 그대로
.equalCentering	뷰의 중심 간격(center to center)을 동일하게 유지

4. spacing

뷰들 사이의 고정 간격 결정

stackView.spacing = 12

예시 코드

let label1 = UILabel()
let label2 = UILabel()
let label3 = UILabel()

let stackView = UIStackView(arrangedSubviews: [label1, label2, label3])
stackView.axis = .vertical 		// 세로 방향
stackView.spacing = 8      		// 라벨들 사이 간격
stackView.alignment = .center	// 가운데 정렬
stackView.distribution = .fill

view.addSubview(stackView)
stackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

💡 언제 많이 사용할까?

• 버튼 여러 개를 일렬로 배치할 때
• 로그인 폼 (아이디 + 비번 + 버튼 등) 만들 때
• 네비게이션바나 툴바처럼 좌우 정렬할 때
• 반응형 뷰 구조 만들 때

📌 정리

개념	설명
UIStackView	여러 뷰를 자동 정렬해주는 뷰
axis	정렬 방향 (가로 or 세로)
alignment	정렬 기준 (leading, center 등)
distribution	뷰 크기 분배 방법
spacing	뷰 사이 간격
arrangedSubviews	stackView가 관리하는 뷰 목록