[swift] 스택 뷰의 레이아웃 설정과 정렬 기능

01 Dec 2023

swift

스택 뷰(Stack View)는 iOS 개발에서 인터페이스를 구성하는데 유용한 요소입니다. 스택 뷰는 여러 뷰들을 수직 또는 수평으로 정렬하여 한 번에 레이아웃할 수 있습니다. 이번 글에서는 스택 뷰의 레이아웃 설정과 정렬 기능에 대해 알아보겠습니다.

스택 뷰의 생성 및 기본 설정

스택 뷰를 생성하려면 UIStackView 클래스를 사용해야 합니다. 스택 뷰를 생성하고 레이아웃을 설정하기 위해 다음과 같은 단계를 따릅니다.

let stackView = UIStackView()

// 수직 배치 설정
stackView.axis = .vertical

// 뷰들의 간격 조절
stackView.spacing = 10

// 뷰들의 크기에 대한 설정
stackView.distribution = .fillEqually

// 스택 뷰의 가장자리에 대한 마진 조절
stackView.layoutMargins = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
stackView.isLayoutMarginsRelativeArrangement = true

위의 코드에서 axis 속성은 스택 뷰의 정렬 방향을 설정하는데 사용됩니다. vertical을 설정하면 수직으로, horizontal을 설정하면 수평으로 뷰들이 정렬됩니다. spacing 속성은 스택 뷰 안의 뷰들 사이의 간격을 설정합니다. distribution 속성은 뷰들의 크기를 어떻게 조절할지 설정하는데 사용됩니다.

fillEqually를 설정하면 각 뷰들의 크기를 동일하게 유지합니다. 이외에도 fill, fillProportionally, equalSpacing 등 여러 옵션을 사용할 수 있습니다.

마지막으로 layoutMargins 속성을 통해 스택 뷰의 가장자리 마진을 조절할 수 있습니다.

스택 뷰의 정렬 기능

스택 뷰 안의 뷰들을 정렬하는 방법에 대해 알아보겠습니다.

수평 정렬

스택 뷰의 alignment 속성을 사용하여 수평 방향의 정렬을 설정할 수 있습니다. 다음은 alignment 속성에 대한 옵션입니다.

fill: 뷰들을 수평 방향으로 채웁니다.
leading: 뷰들을 좌측에 정렬합니다.
trailing: 뷰들을 우측에 정렬합니다.
center: 뷰들을 가운데에 정렬합니다.
firstBaseline: 첫 번째 뷰들의 베이스 라인을 기준으로 정렬합니다.
lastBaseline: 마지막 뷰들의 베이스 라인을 기준으로 정렬합니다.

아래의 코드는 스택 뷰 안의 뷰들을 가운데 정렬하는 예시입니다.

stackView.alignment = .center

수직 정렬

스택 뷰의 distribution 속성을 사용하여 수직 방향의 정렬을 설정할 수 있습니다. 위에서 언급한 distribution 속성에서 fill 옵션은 수직 정렬에도 적용됩니다.

하지만 baseline를 기준으로 정렬하고 싶다면 스택 뷰의 alignment 속성을 firstBaseline 또는 lastBaseline으로 설정해야 합니다.

stackView.distribution = .fill
stackView.alignment = .firstBaseline

정렬 우선순위

스택 뷰 안의 뷰들을 정렬하거나 크기를 조절할 때, 각 뷰들의 비중을 조절할 수 있습니다. 이를 위해 스택 뷰 안의 각 뷰의 contentHuggingPriority와 contentCompressionResistancePriority 속성을 사용합니다. 이 속성들은 각각 뷰가 크기를 얼마나 가지려고 하는지, 얼마나 큘 것인지를 나타내는 우선순위입니다.

let view1 = UIView()
let view2 = UIView()

// contentHuggingPriority 설정
view1.contentHuggingPriority = .required
view2.contentHuggingPriority = .defaultLow

// contentCompressionResistancePriority 설정
view1.contentCompressionResistancePriority = .required
view2.contentCompressionResistancePriority = .defaultHigh

위의 코드에서 view1은 view2보다 크기를 우선적으로 가지려고 하며, view2는 크기를 우선적으로 줄이려고 합니다. 이를 통해 스택 뷰 안의 뷰들의 크기 비중을 조절할 수 있습니다.

정리

위에서 언급한 방법들을 활용하여 스택 뷰의 레이아웃 설정과 정렬 기능을 활용할 수 있습니다. 스택 뷰를 사용하여 인터페이스를 구성하고 뷰들을 효율적으로 정렬할 수 있도록 옵션들을 적절히 조절해보세요.

참고 자료: