Swift: how to center elements horizontally in vertical stackview

Question

I have stackview with four elements that need to be centered horizontally:

let stackView = UIStackView()
stackView.axis = UILayoutConstraintAxis.vertical
stackView.distribution  = UIStackViewDistribution.equalSpacing
stackView.alignment = UIStackViewAlignment.center
stackView.spacing = 5.0
stackView.addArrangedSubview(browseButton)
stackView.addArrangedSubview(orLabel)
stackView.addArrangedSubview(createButton)
stackView.addArrangedSubview(imageView)
let imageViewCenterXConstraint = NSLayoutConstraint(item: imageView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: stackView, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)
stackView.addConstraint(imageViewCenterXConstraint)
stackView.translatesAutoresizingMaskIntoConstraints = false

let stackViewCenterXConstraint = NSLayoutConstraint(item: stackView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: wantMorePage!, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)
let stackViewCenterYConstraint = NSLayoutConstraint(item: stackView, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: wantMorePage!, attribute: NSLayoutAttribute.centerY, multiplier: 1, constant: 0)
wantMorePage?.backgroundColor = UIColor.gray

wantMorePage!.addSubview(stackView)

wantMorePage!.addConstraint(stackViewCenterXConstraint)
wantMorePage!.addConstraint(stackViewCenterYConstraint)

self.scrollView.addSubview(wantMorePage!)

I added constraints and set alignment to center, but elements are still not centered (screenshot). What should I do to center them?

Answer 1

Replace:

wantMorePage!.addConstraint(stackViewCenterXConstraint)
wantMorePage!.addConstraint(stackViewCenterYConstraint)

With:

stackViewCenterXConstraint.isActive = true
stackViewCenterYConstraint.isActive = true

https://developer.apple.com/documentation/uikit/uiview/1622523-addconstraint

Also you need to add the subView before you can add constraints to it

Move this above isActive calls:

self.scrollView.addSubview(wantMorePage!)

Like so:

wantMorePage!.addSubview(stackView)
self.scrollView.addSubview(wantMorePage!)

let imageViewCenterXConstraint = NSLayoutConstraint(item: imageView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: stackView, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)
imageViewCenterXConstraint.isActive = true

let stackViewCenterXConstraint = NSLayoutConstraint(item: stackView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: wantMorePage!, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)
let stackViewCenterYConstraint = NSLayoutConstraint(item: stackView, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: wantMorePage!, attribute: NSLayoutAttribute.centerY, multiplier: 1, constant: 0)

stackViewCenterXConstraint.isActive = true
stackViewCenterYConstraint.isActive = true

Answer 2

发现问题所在-视图的宽度不正确，在我的代码中，wantMorePage大于所需的大小，我将其设置为与父视图相同的大小，并解决了问题。