[swift] 스택 뷰의 구성 요소와 활용 방법

01 Dec 2023

swift

스택 뷰(Stack View)는 iOS 개발에서 인터페이스를 구성하는 데 사용되는 강력한 도구입니다. 스택 뷰를 사용하면 여러 개의 뷰를 한 줄로 정렬하거나, 수직으로 정렬하거나, 겹쳐서 정렬하는 등 다양한 방식으로 뷰를 배치할 수 있습니다. 이번 글에서는 스택 뷰의 구성 요소와 활용 방법에 대해 알아보겠습니다.

스택 뷰의 구성 요소

스택 뷰는 크게 두 가지 구성 요소로 이루어져 있습니다.

Arranged Subviews: 스택 뷰에 포함되는 실제 뷰들입니다. 스택 뷰의 하위 뷰로 추가되는 순서대로 배열되어 표시됩니다.
Axis: 스택 뷰의 정렬 방향을 나타냅니다. 수평(Horizontal) 축 또는 수직(Vertical) 축으로 정렬할 수 있습니다.

두 가지 구성 요소를 조합하여 다양한 인터페이스를 구성할 수 있습니다.

스택 뷰의 활용 방법

스택 뷰를 사용한 뷰의 정렬

스택 뷰를 사용하면 여러 뷰를 편리하게 정렬할 수 있습니다. 예를 들어, 수평 스택 뷰를 사용하여 버튼과 텍스트 필드를 한 줄로 배치할 수 있습니다.

let stackView = UIStackView()
stackView.axis = .horizontal
stackView.alignment = .fill
stackView.distribution = .equalSpacing
stackView.spacing = 10

let button = UIButton()
let textField = UITextField()

stackView.addArrangedSubview(button)
stackView.addArrangedSubview(textField)

위 코드에서 stackView는 수평 방향으로 정렬되는 스택 뷰를 생성하고, addArrangedSubview()를 사용하여 버튼과 텍스트 필드를 추가합니다. alignment 및 distribution 속성은 정렬 및 간격을 조정하는 데 사용됩니다.

스택 뷰를 사용한 뷰의 중첩

스택 뷰는 다른 스택 뷰 안에 중첩하여 사용할 수도 있습니다. 이를 통해 복잡한 레이아웃을 구성할 수 있습니다.

let outerStackView = UIStackView()
outerStackView.axis = .vertical

let innerStackView = UIStackView()
innerStackView.axis = .horizontal

let label = UILabel()
let button = UIButton()

innerStackView.addArrangedSubview(label)
innerStackView.addArrangedSubview(button)

outerStackView.addArrangedSubview(innerStackView)

위 코드에서 outerStackView는 수직 방향으로 정렬되는 바깥쪽 스택 뷰를 생성하고, innerStackView는 수평 방향으로 정렬되는 안쪽 스택 뷰를 생성합니다. innerStackView에 label과 button을 추가한 후, outerStackView에 innerStackView를 추가합니다.

스택 뷰의 유연한 크기 조절

스택 뷰는 자식 뷰의 크기를 조절하여 유연하게 인터페이스를 구성할 수 있습니다. 예를 들어, 수직 스택 뷰를 사용하여 이미지와 텍스트를 표시하는 갤러리 화면을 구성할 수 있습니다.

let stackView = UIStackView()
stackView.axis = .vertical
stackView.alignment = .center
stackView.distribution = .fill
stackView.spacing = 10

let imageView = UIImageView()
let label = UILabel()

stackView.addArrangedSubview(imageView)
stackView.addArrangedSubview(label)

위 코드에서 stackView는 수직 방향으로 정렬되는 스택 뷰를 생성하고, addArrangedSubview()를 사용하여 이미지 뷰와 레이블을 추가합니다. alignment 및 distribution 속성은 각 뷰의 크기를 조정하는 데 사용됩니다.

결론

스택 뷰는 iOS 개발에서 유용하고 강력한 도구로, 뷰의 정렬, 중첩, 크기 조절 등 다양한 기능을 제공합니다. 스택 뷰를 활용하여 더 효율적인 인터페이스를 구성할 수 있으니 적극적으로 활용해보세요.

참고 자료

UIStackView - Apple Developer Documentation