강의 영상

StackView

UIStackView

스택뷰는 여러 뷰들의 수평 또는 수직 방향의 선형적인 레이아웃의 인터페이스를 사용할 수 있도록 해줍니다. 스택뷰와 오토레이아웃 기능을 활용하여 디바이스의 방향과 화면크기에 따라 동적으로 적응할 수 있는 사용자 인터페이스를 만들 수 있습니다. 스택뷰의 레이아웃은 스택뷰의 `axis`, `distribution`, `alignment`, `spacing`과 같은 프로퍼티를 통해 조정합니다.

스택뷰는 `arrangedSubviews` 프로퍼티에 스택뷰에 포함된 뷰들을 관리합니다. 이 프로퍼티는 순서가 있는 배열과도 같습니다. 스택뷰에 포함된 뷰의 순서가 레이아웃에 영향을 미칩니다.

스택뷰의 생성

간단한 예제와 설명을 통해 스택뷰를 생성해봅시다. (스토리보드에서 스택뷰에 뷰를 추가하는 것은 코드상에서 `func addArrangedSubview(UIView)` 메서드를 호출하는 것과 같습니다.)

스택뷰를 먼저 생성하고 그 안에 새로운 뷰를 추가하는 방법

1. 스토리보드를 열고 객체 라이브러리에서 스택뷰를 캔버스에 추가합니다. (예제에서는 Horizontal Stack View를 사용하였습니다.)

2. 객체 라이브러리에서 버튼을 생성된 스택뷰에 추가합니다.

3. 또 하나의 버튼을 스택뷰에 추가합니다. 버튼을 스택뷰에 포함된 버튼 옆으로 드래그하게 되면 커서 아래에 'Stack View'라는 텍스트가 나타나면서 드래그 한 아이템을 스택뷰에 넣을 수 있게 도와줍니다.

스택뷰 안에 버튼 두 개가 추가된 것을 확인할 수 있습니다.

4. 버튼 두 개가 너무 붙어있습니다. 보기 좋게 두 버튼 사이의 간격을 줍니다.

이미 존재하는 뷰들을 스택뷰에 추가하는 방법

1. 스토리보드에서 객체라이브러리로부터 두 개의 버튼을 추가합니다.

2. 두 개의 버튼을 선택한 후 메뉴바에서 Editor > Embed In > Stack View 를 클릭하거나 캔버스 하단의 Embed In Stack 버튼을 클릭합니다.

스택뷰 안에 버튼 두 개가 추가된 것을 확인할 수 있습니다.

UIStackView 클래스의 주요 프로퍼티

• var arrangedSubviews: [UIView]: 스택뷰의 정렬된 뷰의 배열입니다. 스택뷰에 포함된 뷰들을 이 프로퍼티에 저장하고 관리합니다.
• var axis: UILayoutConstraintAxis: 레이아웃의 방향을 결정합니다.(수직 vertical, 수평 horizontal)
• var distribution: UIStackViewDistribution: 스택뷰에 포함된 뷰가 스택뷰 내에서 어떻게 배치(분배)될지 결정합니다.
• var spacing: CGFloat: 스택뷰에 정렬된 뷰들 사이의 간격을 결정합니다. 기본 값은 0.0 입니다.

UIStackView 클래스의 주요 메서드

• func addArrangeSubview(UIView): arrangedSubviews 배열에 마지막 요소에 뷰를 추가합니다.
• func insertArrangedSubview(UIView, at: Int): arrangedSubviews 배열의 특정 인덱스에 뷰를 추가합니다.
• func removeArrangedSubview(UIView): 스택뷰의 arrangedSubviews 배열로부터 뷰를 제거합니다.

참고 링크