Swift：如何在垂直stackview中水平居中元素

Posted 2023-03-15

【中文标题】Swift：如何在垂直stackview中水平居中元素

【英文标题】：Swift: how to center elements horizontally in vertical stackview

【发布时间】：2017-06-28 19:08:41

【问题描述】：

我有四个需要水平居中的元素的stackview：

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!)

我添加了约束并将对齐设置为居中，但元素仍未居中（屏幕截图）。我应该怎么做才能使它们居中？

【参考方案1】：

替换：

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

与：

stackViewCenterXConstraint.isActive = true
stackViewCenterYConstraint.isActive = true

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

还需要先添加 subView 才能添加约束

将其移至 isActive 调用之上：

self.scrollView.addSubview(wantMorePage!)

像这样：

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

【讨论】：

我按照您的建议进行了更改，但没有任何改变

尝试在上面的imageViewCenterXContraint添加以下wantMorePage!.translatesAutoresizingMaskIntoConstraints = false

抱歉，Harry，我找到了导致问题的原因（作为答案发布），感谢您的 cmets！

【参考方案2】：

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