How can we make a spacer view with automatic width between two views inside UIStackview? - uikit

Question

If we have 2 labels inside UIStackView, and I want to set a flexible width between them like this image:
what is the best way? in SwiftUI there is a function named: Spacer() , is there something similar in UIKit?

Answer 1

You can add a UIView to the stack to push each view in the UIStackView:
hStack:
hStack.axis = .horizontal
hStack.addArrangedSubview(label1)
hStack.addArrangedSubview(UIView.spacer(for: .horizontal))
hStack.addArrangedSubview(label2)
constraints:
hStack.translatesAutoresizingMaskIntoConstraints = false
hStack.topAnchor.constraint(equalTo: "depending on your view").isActive = true
hStack.bottomAnchor.constraint(equalTo: "depending on your view").isActive = true
hStack.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
and the extension to make this work:
// MARK: - Spacer
extension UIView {
static func spacer(size: CGFloat = .greatestFiniteMagnitude, for layout: NSLayoutConstraint.Axis = .horizontal) -> UIView {
let spacer = UIView()
if layout == .horizontal {
let constraint = spacer.widthAnchor.constraint(equalToConstant: size)
constraint.priority = .defaultLow
constraint.isActive = true
} else {
let constraint = spacer.heightAnchor.constraint(equalToConstant: size)
constraint.priority = .defaultLow
constraint.isActive = true
}
return spacer
}
}
Side note:
You may get an error that
This NSLayoutConstraint is being configured with a constant that
exceeds internal limits
... so I would rather recommend creating a UIView as a container and then pin each label to the sides of the container (leading, trailing) where each label also has a widthAnchor (if you don't want the text to extend).