[swift] 스택 뷰를 활용한 다양한 UI 디자인 패턴

01 Dec 2023

swift

스택 뷰는 iOS 앱 개발에서 UI를 구성하는 강력한 도구입니다. 스택 뷰를 사용하면 간단하고 효과적으로 다양한 UI 디자인 패턴을 구현할 수 있습니다. 이번 글에서는 몇 가지 스택 뷰를 활용한 UI 디자인 패턴을 소개하겠습니다.

1. 수직 스택 뷰

수직 스택 뷰는 여러 개의 뷰를 수직으로 배열하는 데 사용됩니다. 주로 텍스트, 이미지, 버튼 등을 세로로 표시하는 경우에 유용합니다. 코드로 구현하면 다음과 같습니다:

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

stackView.addArrangedSubview(view1)
stackView.addArrangedSubview(view2)
stackView.addArrangedSubview(view3)

// 추가한 뷰를 스택 뷰에 맞게 자동으로 정렬되며, 스택 뷰에 제약 조건을 설정해야 합니다

이렇게 스택 뷰를 사용하면 뷰를 추가하거나 제거하는 등 동적으로 UI를 조작할 때 편리합니다.

2. 수평 스택 뷰

수평 스택 뷰는 여러 개의 뷰를 가로로 배열하는 데 사용됩니다. 일반적으로 아이콘, 레이블, 버튼 등을 가로로 나란히 표시하고자 할 때 활용됩니다. 코드로 구현하면 다음과 같습니다:

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

stackView.addArrangedSubview(view1)
stackView.addArrangedSubview(view2)
stackView.addArrangedSubview(view3)

// 추가한 뷰를 스택 뷰에 맞게 자동으로 정렬되며, 스택 뷰에 제약 조건을 설정해야 합니다

수직 스택 뷰와 마찬가지로 스택 뷰를 사용하면 동적인 UI 조작이 용이합니다.

3. 그리드 뷰

스택 뷰를 격자 형태로 배치하면 그리드 뷰를 만들 수 있습니다. 예를 들어, 이미지 갤러리나 상품 목록과 같이 다수의 셀로 구성된 레이아웃을 만들 때 유용합니다. 코드로 구현하면 다음과 같습니다:

let gridView = UIStackView()
gridView.axis = .vertical
gridView.alignment = .fill
gridView.distribution = .fillEqually
gridView.spacing = 10

let row1 = UIStackView()
row1.axis = .horizontal
row1.alignment = .fill
row1.distribution = .fillEqually
row1.spacing = 10

row1.addArrangedSubview(cell1)
row1.addArrangedSubview(cell2)

let row2 = UIStackView()
row2.axis = .horizontal
row2.alignment = .fill
row2.distribution = .fillEqually
row2.spacing = 10

row2.addArrangedSubview(cell3)
row2.addArrangedSubview(cell4)

gridView.addArrangedSubview(row1)
gridView.addArrangedSubview(row2)

// 추가한 셀(뷰)들이 그리드 형태로 자동으로 정렬되며, 그리드 뷰에 제약 조건을 설정해야 합니다

이와 같이 스택 뷰를 중첩하면 격자 형태의 그리드 뷰를 손쉽게 구현할 수 있습니다.

스택 뷰는 iOS 앱 개발에서 유용한 UI 디자인 패턴을 구현하는 데 활용될 수 있습니다. 위에서 소개한 몇 가지 패턴만 예시로 들었지만, 스택 뷰의 다양한 속성을 활용해 다양한 디자인을 구현할 수 있습니다.

더 자세한 내용은 Apple의 UIStackView 공식 문서를 참고하시기 바랍니다.