How to remove mysterious top margin in UIStackView when `isLayoutMarginsRelativeArrangement=true`? - swift

Question

I'm creating a simple "toolbar" component with a horizontal axis UIStackView. It looks fine, except when I switch on isLayoutMarginsRelativeArrangement, a strange margin is added to the top above the items, making the height of the stack view incorrect.
I've tried giving the stack view directionalLayoutMargins property many different values, including no value at all. Yet still this unwanted spacing remains. Why does this margin exist and how can I remove it?
override func viewDidLoad() {
super.viewDidLoad()
self.stackView = UIStackView(frame: CGRect.zero)
self.stackView.axis = .horizontal
self.stackView.alignment = .center
self.stackView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
self.stackView.isLayoutMarginsRelativeArrangement = true
self.stackView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(self.stackView)
NSLayoutConstraint.activate([
self.stackView.topAnchor.constraint(equalTo: view.topAnchor),
self.stackView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
self.stackView.widthAnchor.constraint(equalTo: view.widthAnchor),
self.stackView.heightAnchor.constraint(equalTo: view.heightAnchor)
])
let title = UILabel(frame: .zero)
title.text = "My Toolbar"
self.stackView.addArrangedSubview(title)
title.sizeToFit()
let button = MDCButton()
button.setTitle("Recipes", for: .normal)
button.applyContainedTheme(withScheme: containerScheme)
button.minimumSize = CGSize(width: 64, height: 48)
self.stackView.addArrangedSubview(button)
}

Answer 1

Here's a couple things to try...
First, StackBarViewControllerA which creates a newView (plain UIView) to hold the stack view with the label and button:
class StackBarViewControllerA: UIViewController {
var stackView: UIStackView!
override func viewDidLoad() {
super.viewDidLoad()
let newView = UIView()
newView.translatesAutoresizingMaskIntoConstraints = false
newView.backgroundColor = .cyan
view.addSubview(newView)
self.stackView = UIStackView(frame: CGRect.zero)
self.stackView.axis = .horizontal
self.stackView.alignment = .center
self.stackView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
self.stackView.isLayoutMarginsRelativeArrangement = true
self.stackView.translatesAutoresizingMaskIntoConstraints = false
newView.addSubview(self.stackView)
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
self.stackView.topAnchor.constraint(equalTo: newView.topAnchor),
self.stackView.bottomAnchor.constraint(equalTo: newView.bottomAnchor),
self.stackView.widthAnchor.constraint(equalTo: newView.widthAnchor),
self.stackView.heightAnchor.constraint(equalTo: newView.heightAnchor),
newView.topAnchor.constraint(equalTo: g.topAnchor),
newView.leadingAnchor.constraint(equalTo: g.leadingAnchor),
newView.trailingAnchor.constraint(equalTo: g.trailingAnchor),
])
let title = UILabel(frame: .zero)
title.text = "My Toolbar"
self.stackView.addArrangedSubview(title)
title.sizeToFit()
let button = UIButton() // MDCButton()
button.setTitle("Recipes", for: .normal)
button.backgroundColor = .blue
button.heightAnchor.constraint(equalToConstant: 48).isActive = true
//button.applyContainedTheme(withScheme: containerScheme)
//button.minimumSize = CGSize(width: 64, height: 48)
self.stackView.addArrangedSubview(button)
}
}
Second, StackBarViewControllerB using a custom StackBarView:
class StackBarView: UIView {
var stackView: UIStackView!
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
self.stackView = UIStackView(frame: CGRect.zero)
self.stackView.axis = .horizontal
self.stackView.alignment = .center
self.stackView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
self.stackView.isLayoutMarginsRelativeArrangement = true
self.stackView.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(self.stackView)
NSLayoutConstraint.activate([
self.stackView.topAnchor.constraint(equalTo: self.topAnchor),
self.stackView.bottomAnchor.constraint(equalTo: self.bottomAnchor),
self.stackView.widthAnchor.constraint(equalTo: self.widthAnchor),
self.stackView.heightAnchor.constraint(equalTo: self.heightAnchor)
])
let title = UILabel(frame: .zero)
title.text = "My Toolbar"
self.stackView.addArrangedSubview(title)
title.sizeToFit()
let button = UIButton() // MDCButton()
button.setTitle("Recipes", for: .normal)
button.backgroundColor = .blue
//button.applyContainedTheme(withScheme: containerScheme)
//button.minimumSize = CGSize(width: 64, height: 48)
button.widthAnchor.constraint(greaterThanOrEqualToConstant: 64).isActive = true
button.heightAnchor.constraint(greaterThanOrEqualToConstant: 48).isActive = true
button.setContentHuggingPriority(.defaultHigh, for: .horizontal)
self.stackView.addArrangedSubview(button)
}
}
class StackBarViewControllerB: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let v = StackBarView()
v.translatesAutoresizingMaskIntoConstraints = false
v.backgroundColor = .cyan
view.addSubview(v)
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
v.topAnchor.constraint(equalTo: g.topAnchor),
v.leadingAnchor.constraint(equalTo: g.leadingAnchor),
v.trailingAnchor.constraint(equalTo: g.trailingAnchor),
])
}
}
Both give this result (I gave it a cyan background so we can see the frame):

Answer 2

Looks like the problem is your anchor settings. Try removing your bottomAnchor and set your heightAnchor to the size you want for your buttons plus some padding, instead of just matching the heightAnchor of view:
NSLayoutConstraint.activate([
self.stackView.topAnchor.constraint(equalTo: view.topAnchor),
// self.stackView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
self.stackView.widthAnchor.constraint(equalTo: view.widthAnchor),
// self.stackView.heightAnchor.constraint(equalTo: view.heightAnchor),
self.stackView.heightAnchor.constraint(equalToConstant: 80)
])
Note: You may need to set an offset constant for your top anchor like: self.stackView.topAnchor.constraint(equalTo: view.topAnchor, constant: 50)