[iOS] - UIStackView 코드로 작성하기

label을 세 개 가지는 UIStackView를 작성해보겠습니다.
UIView위 UILabel을 넣는것과 거의 유사합니다.

1. UILabel 만들기

let label1: UILabel = {
    let label = UILabel()
    
    label.text = "label1"
    labetl.translatesAutoresizingMaskIntoConstraints = false
    
    return label
}

let label2: UILabel = {
    let label = UILabel()
    
    label.text = "label2"
    labetl.translatesAutoresizingMaskIntoConstraints = false
    
    return label
}

let label3: UILabel = {
    let label = UILabel()
    
    label.text = "label3"
    labetl.translatesAutoresizingMaskIntoConstraints = false
    
    return label
}

2. UIStackView 만들기

let stackView: UIStackView = {
    let stackView = UIStackView()
    
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.axis = .vertical
    stackView.alignment = .fill
    stackView.distribution = .equalSpacing
    stackView.spacing = 8
    return stackView
}

• axis : 방향
  • vertical, horizontal
• alignment : subview들을 정렬하는 방법
  • fill, leading, top, center, trailing, botton, firstBaseline, LastBaseline
• distribution : subview들의 크기를 어떻게 분배할 지
  • fill, fill equally, fill proportionally, equal spacing, equal centering
• spacing : subview들 간의 간격

3. view에 stackView 추가하기

stackView는 view위에 올라가기 때문에

override func viewDidLoad() {
    self.view.addSubView(self.stackView)
}

• 다음과 같이 view에 stackView를 추가해 줍니다.

4. stackView에 label 추가하기

override func viewDidLoad() {
    self.view.addSubView(self.stackView)
    
    [label1, label2, label3].map {
    	self.stackView.addArrangedSubview($0)
    }
}

• 스택 뷰에 추가할 때는 addArrangedSubview() 메서드를 사용해야합니다.
  • 추가된 순서에 따라 스택 뷰에 추가됩니다.
  • 뷰에 추가할 때처럼 constraint를 넣어주지 않아도 label이 보여집니다. stackview의 spacing, alignment, distribution 등을 사용하여 subView들의 간격을 조정합니다.

+ label의 aspectRatio 설정하기

스택 뷰를 사용할 때는 비율을 많이 사용하게 되는데 label의 asepctRatio는 다음과 같이 설정할 수 있습니다.

override func viewDidLoad() {
    self.view.addSubView(self.stackView)
    
    [label1, label2, label3].map {
    	self.stackView.addArrangedSubview($0)
        $0.heightAnchor.constraint(equalTo: $0.widthAnchor, multiplier: 1.0).isActive = true
    }
}

• 각 label의 height와 width가 서로 1대 1의 비율을 가지도록 함
  • multiplier에 비율 작성