6

I am trying to get elements inside a UIStackView to position themselves equally from the center.

This is the desired effect I would like:

enter image description here

As you can see, I would like the two text fields to be equally spaced from each other and aligned center within the stack view.

This stack view will have either 1 - 7 textfields that I need lined up.

Here is what is currently coming out:

enter image description here

This is how I am setting the Text Fields

let textLabel = UILabel()
textLabel.backgroundColor = UIColor.red
textLabel.widthAnchor.constraint(equalToConstant: 40.0).isActive = true
textLabel.heightAnchor.constraint(equalToConstant: 20.0).isActive = true
textLabel.text  = "Hi"
textLabel.textAlignment = .center

let textLabel1 = UILabel()
textLabel1.backgroundColor = UIColor.red
textLabel1.widthAnchor.constraint(equalToConstant: 40.0).isActive = true
textLabel1.heightAnchor.constraint(equalToConstant: 20.0).isActive = true
textLabel1.text  = "Hi"
textLabel1.textAlignment = .center

I am generating the stack view like so:

//Stack View
let stackView   = UIStackView()
stackView.axis  = UILayoutConstraintAxis.horizontal
stackView.distribution  = UIStackViewDistribution.equalCentering
stackView.alignment = UIStackViewAlignment.fill
stackView.spacing   = 16.0

stackView.addArrangedSubview(textLabel)
stackView.addArrangedSubview(textLabel1)
stackView.translatesAutoresizingMaskIntoConstraints = false;

self.view.addSubview(stackView)

//Constraints

stackView.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 50).isActive = true
stackView.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -50).isActive = true
stackView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 100).isActive = true

How do I get the elements inside to align center?

I thought it was

UIStackViewDistribution.equalCentering

However, that didn't do much.

1 Answer 1

8

Thats odd. Normally a horizontal UIStackView with center alignment and equal centering distribution should do exactly that:

enter image description here

enter image description here

enter image description here

But maybe I'm not understanding you correct and you actually want something like this:

enter image description here

In which case you have to chose Fill Equally as the distribution method and make the labels itself center their text:

enter image description here

5
  • I have found Interface Builder to show stale values for stack alignments and distributions, you might try restarting Xcode and see if it renders differently.
    – Norman
    May 27, 2017 at 15:57
  • I don't know what you mean, nor have I had problems with stackviews in IB. :/
    – xxtesaxx
    May 27, 2017 at 15:58
  • This was just a visual demo of the stackview modes.
    – xxtesaxx
    May 27, 2017 at 15:59
  • It's a really clear and helpful answer. I have experienced Interface Builder occasionally not reflecting the current alignment or distribution setting on the visual representation of the storyboard.
    – Norman
    May 27, 2017 at 16:05
  • Ah i see. What usually could help as well is change the device orientation in the storyboard or resize the view if it is free-forming.
    – xxtesaxx
    May 27, 2017 at 16:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.