[iOS - swift] UIStackView에 padding 넣는 방법 (UIStackView Margin, isLayoutMarginsRelativeArrangement, directionalLayoutMargins)

UIStackView의 padding

• 보통 UIStackView를 사용하면 UIStackView안의 아이템들 spacing은 setCustomSpacing(_:after:) 메소드를 사용하여 구현이 가능

stackView.setCustomSpacing(16, after: label1)

두 UILabel을 가지고 있는 UIStackView

• 만약 UIStackView에 추가한 아이템들과 UIStackView간의 padding을 아래처럼 주고 싶은 경우?

padding이 적용된 UIStackView

UIStackView에 padding 적용방법

• UIStackView의 isLayoutMarginsRelativeArrangement를 true로 설정
  • 이 프로퍼티는 margin을 사용하겠다는 플래그값을 의미 (default가 false이며 false이면 margin적용 x)
  • 해당 옵션은 UIStackView에만 있는 옵션

stackView.isLayoutMarginsRelativeArrangement = true

• directionalLayoutMargins 값을 이용하여 padding설정이 가능
  • UIEdgeInsets이 아닌 NSDirectionalEdgeInsets값임을 주의
  • UIEdgeInsets은 아럽어와 같은 RTL(Right-to-Left) 언어 대응이 안되지만 NSDirectionalEdgeInsets은 leading, trailing을 사용하여 RTL에도 대응이 되는 장점이 존재

stackView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 20, leading: 20, bottom: 20, trailing: 20)

• directionalLayoutMargins은 UIView의 메소드이며 iOS 11에서 나온 프로퍼티

extension UIView {
	...
    
    @available(iOS 11.0, *)
    open var directionalLayoutMargins: NSDirectionalEdgeInsets
    
}

padding이 적용된 UIStackView

참고) iOS 9에 나온 layoutMargins 프로퍼티를 사용해도 되지만 이 프로퍼티는 UIEdgeInsets 타입이며 leading, trailing이 아닌 left, right만 대응 되므로 가급적이면 directionalLayoutMargins 사용을 지향할 것

 

* 전체 코드: https://github.com/JK0369/ExStackViewMargin

* 참고

https://developer.apple.com/documentation/uikit/uilistcontentconfiguration/3600530-directionallayoutmargins

https://developer.apple.com/documentation/uikit/uistackview/1616220-islayoutmarginsrelativearrangeme