如何在Swift中将两个元素（不知道它们的宽度）中心相邻？

Question

在我的swift应用中，我有一个UILabel和UIButton的视图。在故事板中它看起来像这样：

我知道我可以对这两个元素进行分组，然后对该组进行约束，但只有在UILabel具有恒定宽度时才会有效。

我想像这样显示这个组：

|      label X      |

或 - 当标签较长时，如下：

|   longerlabel X   |

我应该如何应用约束来达到这个效果？

Answer 1

起初我考虑过UILayoutGuides，但它比这更容易，只要你愿意编写一些代码。使用UILayoutAnchors，centerX和乘数：

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

当然，你需要布局多于此（特别是垂直位置），是的，你可以使用UILayoutGuides equal spacing。但只要你使用自动布局并了解如何为你需要编码的东西设置IBOutlets，这就行了。

顺便说一下，你可以准确地说，就像参考代码中的超级视图一样，它可以完美地集中它。）

Answer 2

您应该使用常规UIView作为容器。您可以使用以下代码设置您的视图：

// 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

随时可以询问是否有任何不清楚的地方！这是结果btw：