how can I center two elements (without knowing their width) next to each other in Swift?

Question

In my swift app I have a view with a UILabel and a UIButton. In the storyboard it looks like this:

I know I can group those two elements and then put constraints on that group, but that will only work when the UILabel has constant width.

I want to display this group like this:

|      label X      |

or - when the label is longer, like this:

|   longerlabel X   |

How should I apply constraints to get that effect?

Answer 1

At first I considered UILayoutGuides, but it's much easier than that, as long as you are willing to code a few things. Use UILayoutAnchors, centerX, and a multiplier:

myLabel.centerXAnchor.constraint(equalTo: myView.centerXAnchor, multiplier: 0.33)    
myButton.centerXAnchor.constraint(equalTo: myView.centerXAnchor, multiplier: 0.667)

Of course, you need to layout more than this (vertical position in particular) and yes, you can use UILayoutGuides for equal spacing . But as long as you are using auto layout and understand how to set up IBOutlets for the things you need to code for that way, this will work.

BTW, you can be exact, as in reference the superview in code to center it perfectly.)

Answer 2

you should use a regular UIView as a container. you could set your views up in code like this:

// configure the content
let labelText = "Label"
let buttonTitle = "X"

// setup the views
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.text = labelText

let button = UIButton(type: .system)
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle(buttonTitle, for: .normal)
button.setContentCompressionResistancePriority(label.contentCompressionResistancePriority(for: .horizontal) + 1, for: .horizontal)

let container = UIView()
container.translatesAutoresizingMaskIntoConstraints = false
container.layer.borderColor = UIColor.lightGray.cgColor
container.layer.borderWidth = 1

// add the views
container.addSubview(label)
container.addSubview(button)
view.addSubview(container)

// create the container constraints
NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "|[lbl]-[btn]|", options: [.alignAllTop, .alignAllBottom], metrics: nil, views: ["lbl": label, "btn": button]))
NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "V:|[btn]|", options: [], metrics: nil, views: ["btn": button]))

// center the container
NSLayoutConstraint(item: container, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0).isActive = true
NSLayoutConstraint(item: container, attribute: .centerY, relatedBy: .equal, toItem: view, attribute: .centerY, multiplier: 1, constant: 0).isActive = true

// make sure the container does not extend the view's width
NSLayoutConstraint(item: container, attribute: .leading, relatedBy: .greaterThanOrEqual, toItem: view, attribute: .leading, multiplier: 1, constant: 20).isActive = true

feel free to ask if anything is unclear! this is the result btw: