[iOS 4주차] UIStackView에서 사용되는 addArrangedSubview 메서드

이번에 UIKit을 처음 다뤄보면서 코드베이스UI로 먼저 과제를 진행하면서 잘 몰라서 찾아봤던 UIKit 메서드들 정리

---

addArrangedSubview

• addArrangedSubview는 UIStackView에서 사용되는 메서드로, 스택 뷰에 새로운 서브뷰를 “배치”할 때 사용됩니다. 이 메서드는 스택 뷰의 “배치된 뷰(arrangedSubviews)” 배열에 뷰를 추가하며, 스택 뷰의 레이아웃 규칙에 따라 해당 뷰를 자동으로 정렬하고 크기를 조정합니다.

특징

1. arrangedSubviews에 추가:
   • addArrangedSubview는 스택 뷰의 arrangedSubviews 배열에 뷰를 추가합니다.
   • 추가된 뷰는 스택 뷰의 레이아웃 속성(axis, distribution, alignment, spacing)에 따라 정렬되고 표시됩니다.
2. 자동으로 서브뷰로 추가:
   • 만약 추가하려는 뷰가 스택 뷰의 자식 뷰(subviews)에 없다면, addArrangedSubview는 해당 뷰를 자동으로 subviews에도 추가합니다.
   • 하지만 arrangedSubviews와 subviews는 다릅니다. arrangedSubviews는 스택 뷰의 정렬 및 레이아웃에 영향을 받는 뷰만 포함합니다.
3. 제거 방법:
   • 스택 뷰에서 제거하려면 removeFromSuperview()로 제거할 수도 있지만, 이 경우 arrangedSubviews 배열에서는 여전히 참조가 남아 있을 수 있습니다.
   • 완전히 제거하려면 removeArrangedSubview를 사용하고, 필요하다면 removeFromSuperview()도 호출해야 합니다.

---

addSubview VS addArrangedSubview

// 사용 예제
let stackView = UIStackView()
stackView.axis = .horizontal
stackView.spacing = 8

for i in 1...3 {
    let button = UIButton(type: .system)
    button.setTitle("Button \(i)", for: .normal)
    stackView.addArrangedSubview(button)
}

// 스택 뷰를 뷰 계층에 추가
view.addSubview(stackView)

// 오토 레이아웃 설정 (예: 상단 중앙에 위치)
stackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20)
])

이 코드에서 버튼 3개가 수평으로 정렬되어 스택 뷰 안에 추가됩니다. 스택 뷰의 axis, spacing 설정에 따라 자동으로 정렬됩니다.

---

주의할 점

1. 뷰가 스택 뷰 외부에서도 사용되는 경우:
   • addArrangedSubview로 추가하면 해당 뷰는 스택 뷰의 레이아웃에 종속됩니다.
   • 동일한 뷰를 스택 뷰 외부에서 사용하고 싶다면 복제하거나 별도로 관리해야 합니다.
2. 중복 추가 방지:
   • 동일한 뷰를 여러 번 addArrangedSubview로 추가하면 오류가 발생할 수 있습니다.

addArrangedSubview는 스택 뷰를 동적으로 구성할 때 유용하며, 코드 기반 UI를 설계할 때 강력한 도구로 활용됩니다.