[swift] Swift에서 수직 및 수평 레이아웃 정렬 방법

08 Dec 2023

swift

Swift로 iOS 앱을 개발하고 있는 경우, 화면 요소들을 원하는 위치에 정렬하는 것은 매우 중요합니다. 수직 레이아웃을 위해 UIStackView를 사용하고, 수평 레이아웃을 위해 NSLayoutConstraint를 사용하는 방법에 대해 알아보겠습니다.

수직 레이아웃 정렬 - UIStackView

UIStackView는 iOS 9부터 도입된 뷰로, 여러 개의 하위 뷰를 포함하여 그들을 수직 또는 수평으로 정렬할 수 있습니다.

다음은 수직으로 레이아웃을 정렬하는 UIStackView의 예시 코드입니다.

let stackView = UIStackView(arrangedSubviews: [view1, view2, view3])
stackView.axis = .vertical
stackView.alignment = .center
stackView.distribution = .fillEqually
stackView.spacing = 10

이 코드에서는(1) 세 개의 하위 뷰(view1, view2, view3)를 생성하고, (2) 이들을 수직으로 정렬하기 위해 UIStackView에 추가하고, (3) 각 뷰 사이의 간격을 10으로 설정하는 것을 볼 수 있습니다.

수평 레이아웃 정렬 - NSLayoutConstraint

수평 레이아웃을 위해서는 NSLayoutConstraint를 사용하여 각 요소의 수평 제약 조건을 설정해야 합니다.

다음은 두 개의 뷰를 가로로 정렬하는 NSLayoutConstraint의 예시 코드입니다.

NSLayoutConstraint.activate([
    view1.leadingAnchor.constraint(equalTo: parentView.leadingAnchor, constant: 20),
    view1.widthAnchor.constraint(equalToConstant: 100),
    view1.heightAnchor.constraint(equalToConstant: 50),
    view2.leadingAnchor.constraint(equalTo: view1.trailingAnchor, constant: 20),
    view2.widthAnchor.constraint(equalToConstant: 100),
    view2.heightAnchor.constraint(equalToConstant: 50)
])

이 코드에서는 (1) 두 개의 뷰(view1, view2)의 leadingAnchor, widthAnchor, heightAnchor를 설정하여 가로로 정렬하는 것을 볼 수 있습니다.

이러한 방법들을 사용하여 Swift에서 수직 및 수평 레이아웃을 정렬할 수 있습니다.

수직 레이아웃 정렬 - UIStackView

수평 레이아웃 정렬 - NSLayoutConstraint

참고 자료