在 UIStackView 中垂直居中三个 UILabel

Posted 2023-03-15

【中文标题】在 UIStackView 中垂直居中三个 UILabel

【英文标题】：Center Vertically Three UILabels inside UIStackView

【发布时间】：2018-12-05 12:07:00

【问题描述】：

我在一个UIStackView 中有三个UILabels。其中一个有多行（最后一个），其他只有一行。我希望它们在UIStackView 内居中，以便顶部和底部空间可以是动态的。我究竟做错了什么？

headingLabel.translatesAutoresizingMaskIntoConstraints = false
headingLabel.textAlignment = .center
subHeadingLabel.translatesAutoresizingMaskIntoConstraints = false
subHeadingLabel.textAlignment = .center
subHeadingLabel.numberOfLines = 0
bodyLabel.translatesAutoresizingMaskIntoConstraints = false
bodyLabel.textAlignment = .center
bodyLabel.numberOfLines = 0
bodyLabel.text = "My very very long text \n to make it multiline"
textStackView.axis = .vertical
textStackView.distribution = .fillProportionally
textStackView.alignment = .center
textStackView.translatesAutoresizingMaskIntoConstraints = false

textStackView.addArrangedSubview(headingLabel)
textStackView.addArrangedSubview(subHeadingLabel)
textStackView.addArrangedSubview(bodyLabel)

现在的样子：

应该如何：

编辑：我也尝试使用 fillEqually，但它不会改变任何东西。我还设置了 UIStackView 的顶部和底部锚点。我想在这里实现的是，例如 UIStackView 的高度为 100，所有三个标签的高度均为 40。这 60 个以上的空间应该平均分布，如上下 30-30。

UIStackView 的约束

myStackView.anchor(contentImageView.bottomAnchor, left: self.view.leftAnchor, bottom: self.view.bottomAnchor, right: self.view.rightAnchor, topConstant: 0, leftConstant: 0, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 0)

一种解决方案： 我通过将 UIStackView 放在 UIView 中来解决它，并且不给 UIStackView 高度。只需居中 X 和 Y 锚点。它解决了我的问题，但我不确定它是否是一个正确的解决方案。

【问题讨论】：

你是如何通过代码或在 XIB 中设置 UIStackView 的？

按代码。我编辑了我的问题。

【参考方案1】：

确保UIStackView 底部约束在UIViewController 的视图中应大于等于零。这样，UIStackView 的高度就会根据里面的内容增加。

试试这个。

let myStackView = UIStackView()
view.addSubview(myStackView)
myStackView.translatesAutoresizingMaskIntoConstraints = false
myStackView.topAnchor.constraint(greaterThanOrEqualTo: view.topAnchor, constant: 0.0).isActive = true
myStackView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 0.0).isActive = true
myStackView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: 0.0).isActive = true
myStackView.bottomAnchor.constraint(greaterThanOrEqualTo: view.bottomAnchor, constant: 0.0).isActive = true
myStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0.0).isActive = true
myStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0.0).isActive = true

【参考方案2】：

我想在这里实现的是，例如 UIStackView 的高度为 100，所有三个标签的高度均为 40。这 60 个以上的空间应该像上下 30-30 一样平均分布。

堆栈视图不是这样工作的。如果你想要三个高度为 40 的标签，那么就这样做，不需要堆栈视图。或者将堆栈视图高度设置为 40 并将其居中。