以编程方式将视图添加到 UIStackView

Question

我正在尝试将两个动态 UILabels 添加到 UIStackLabel。目标是将两个标签水平居中在视图的中间。

这两个UILabels是：

var nameLabel: UILabel!
var ageLabel: UILabel!

UIStackView 是：

var stackedInfoView: UIStackView!

我已尝试遵循此answer 中提供的指南，将我的视图配置为：

nameLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 120.0, height: 24.0))
ageLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 80.0, height: 24.0))
nameLabel.text = "Harry Potter"
ageLabel.text = "100"


stackedInfoView = UIStackView(arrangedSubviews: [nameLabel, ageLabel])
stackedInfoView.axis = .horizontal
stackedInfoView.distribution = .equalSpacing
stackedInfoView.alignment = .center
stackedInfoView.spacing = 30.0
stackedInfoView.centerXAnchor.constraint(equalTo: self.extendedNavView.centerXAnchor).isActive = true
stackedInfoView.centerYAnchor.constraint(equalTo: self.extendedNavView.centerYAnchor).isActive = true

self.extendedNavView.addSubview(stackedInfoView) //extendedNavView is configured inside Storyboard

我的问题是，stackedInfoView 不会出现。此外，当我打印它的frame 时，我得到{{0, 0}, {0, 0}}。我还收到一堆关于Unable to simultaneously satisfy constraints. 的错误消息

我在创建UIStackView 时做错了什么？非常感谢任何指导。

Answer 1

两个问题，

stackedInfoView.centerXAnchor.constraint(equalTo:self.extendedNavView.centerXAnchor).isActive = true
stackedInfoView.centerYAnchor.constraint(equalTo:self.extendedNavView.centerYAnchor).isActive = true

应该放在self.extendedNavView.addSubview(stackedInfoView) 之后。因为堆栈视图必须在视图层次结构中才能配置约束。

其次，添加stackedInfoView.translatesAutoresizingMaskIntoConstraints = false告诉UIKit你想使用自动布局来设置堆栈视图的位置。

如果extendedNavView 在情节提要中没有布局问题，则以下代码应该可以工作：

override func viewDidLoad() {
    super.viewDidLoad()

    var nameLabel: UILabel!
    var ageLabel: UILabel!

    var stackedInfoView: UIStackView!

    nameLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 120.0, height: 24.0))
    ageLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 80.0, height: 24.0))
    nameLabel.text = "Harry Potter"
    ageLabel.text = "100"

    stackedInfoView = UIStackView(arrangedSubviews: [nameLabel, ageLabel])
    stackedInfoView.axis = .horizontal
    stackedInfoView.distribution = .equalSpacing
    stackedInfoView.alignment = .center
    stackedInfoView.spacing = 30.0

    stackedInfoView.translatesAutoresizingMaskIntoConstraints = false

    self.extendedNavView.addSubview(stackedInfoView) //extendedNavView is configured inside Storyboard

    stackedInfoView.centerXAnchor.constraint(equalTo: self.extendedNavView.centerXAnchor).isActive = true
    stackedInfoView.centerYAnchor.constraint(equalTo: self.extendedNavView.centerYAnchor).isActive = true

}