UIStackView 활용법: 유연한 레이아웃 구성

UIStackView란?

UIStackView는 iOS 개발에서 유연하고 관리하기 쉬운 레이아웃을 구성할 수 있게 도와주는 컨테이너 뷰입니다. UIStackView를 사용하면 뷰들을 수평 또는 수직으로 쉽게 배열할 수 있습니다. 대부분의 UIKit 요소와 호환되며, 제약 조건을 일일이 설정하지 않고도 자동으로 레이아웃을 관리해 줍니다.

UIStackView의 기본 구조

UIStackView는 내부에 포함된 배열된 뷰들의 배치를 관리합니다. 주요 프로퍼티로는 axis, alignment, distribution, spacing 등이 있으며, 이들로 스택 뷰의 설정을 조정할 수 있습니다.

• axis: 스택 뷰의 방향을 결정합니다 (.horizontal 또는 .vertical).
• alignment: 배열된 뷰들의 정렬 방식을 지정합니다 (.fill, .leading, .top, etc.).
• distribution: 배열된 뷰들 사이의 공간을 어떻게 분배할지 결정합니다 (.fill, .fillEqually, .fillProportionally, etc.).
• spacing: 배열된 뷰들 사이의 간격을 설정합니다.

코드로 UIStackView 생성하기

코드로 UIStackView를 생성하고 설정하는 방법을 예제로 살펴보겠습니다.

swift
import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        // UIView 생성
        let view1 = UIView()
        view1.backgroundColor = .red
        let view2 = UIView()
        view2.backgroundColor = .green
        let view3 = UIView()
        view3.backgroundColor = .blue

        // UIStackView 생성 및 설정
        let stackView = UIStackView(arrangedSubviews: [view1, view2, view3])
        stackView.axis = .vertical
        stackView.alignment = .fill
        stackView.distribution = .fillEqually
        stackView.spacing = 10

        // 스택 뷰를 메인 뷰에 추가
        stackView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(stackView)

        // 제약 조건 설정
        NSLayoutConstraint.activate([
            stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            stackView.topAnchor.constraint(equalTo: view.topAnchor, constant: 50),
            stackView.bottomAnchor.constraint(lessThanOrEqualTo: view.bottomAnchor, constant: -50)
        ])
    }
}

이 예제에서는 3개의 UIView를 생성하고 이를 UIStackView에 추가하여 수직으로 배열하고 있습니다. 각각의 뷰는 동일한 크기로 나뉘며, 뷰들 사이에는 10포인트의 간격이 있습니다.

스토리보드를 사용한 UIStackView 설정

스토리보드에서도 UIStackView를 쉽게 사용할 수 있습니다. 여기에 대한 단계별 가이드를 소개합니다.

1. 스토리보드에서 뷰 컨트롤러를 선택하고, 객체 라이브러리에서 UIStackView를 드래그하여 뷰 컨트롤러에 추가합니다.
2. UIStackView의 속성을 설정합니다. 예를 들어, axis를 horizontal 또는 vertical로 설정합니다.
3. UIStackView 안에 추가할 뷰들을 드래그하여 추가합니다.
4. 각 요소의 배치, 정렬, 분배, 간격 등의 속성을 설정합니다.
5. 제약 조건을 설정하여 화면의 원하는 위치에 스택 뷰를 배치합니다.

실용적인 예제들

동적인 뷰 추가 및 삭제

UIStackView는 동적으로 뷰를 추가하거나 삭제할 때 매우 유용합니다. 다음은 예제입니다:

swift
class DynamicStackViewController: UIViewController {
    let stackView = UIStackView()

    override func viewDidLoad() {
        super.viewDidLoad()

        stackView.axis = .vertical
        stackView.alignment = .fill
        stackView.distribution = .fillEqually
        stackView.spacing = 10
        stackView.translatesAutoresizingMaskIntoConstraints = false

        view.addSubview(stackView)
        NSLayoutConstraint.activate([
            stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            stackView.topAnchor.constraint(equalTo: view.topAnchor, constant: 50)
        ])

        // 버튼 생성 및 추가
        let addButton = UIButton(type: .system)
        addButton.setTitle("Add View", for: .normal)
        addButton.addTarget(self, action: #selector(addView), for: .touchUpInside)
        view.addSubview(addButton)
        addButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            addButton.topAnchor.constraint(equalTo: stackView.bottomAnchor, constant: 20),
            addButton.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        ])
    }

    @objc func addView() {
        let newView = UIView()
        newView.backgroundColor = .random()
        stackView.addArrangedSubview(newView)
    }
}

// UIColor에 랜덤 색상 메서드 추가
eextension UIColor {
    static func random() -> UIColor {
        return UIColor(
            red: CGFloat(arc4random() % 256) / 255.0,
            green: CGFloat(arc4random() % 256) / 255.0,
            blue: CGFloat(arc4random() % 256) / 255.0,
            alpha: 1.0
        )
    }
}

이 코드는