Programmatically adding views to a UIStackView

Question

I am attempting to add two dynamic UILabels to a UIStackLabel. The goal is center the two labels horizontally in the middle of the view.

The two UILabels are:

var nameLabel: UILabel!
var ageLabel: UILabel!

And the UIStackView is:

var stackedInfoView: UIStackView!

I have attempted to follow the guidelines provided in this answer, configuring my views as such:

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

My issue is that, stackedInfoView will not show up. Furthermore, when I print its frame, I get {{0, 0}, {0, 0}}. I also get a bunch of error messages about Unable to simultaneously satisfy constraints.

What am I doing incorrectly in making my UIStackView? Any guidance is much appreciated.

Solution

Two problems,

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

should be put after self.extendedNavView.addSubview(stackedInfoView). Because the stack view must be in the view hierarchy before configure the constraints.

Second, add stackedInfoView.translatesAutoresizingMaskIntoConstraints = false to tell UIKit you want to use auto layout to set the position of the stack view.

The following code should work if extendedNavView has no layout issue in the storyboard:

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

}

Comments

[daspianist]

Thanks! This helped a lot