如何在 Swift 中将两个元素（不知道它们的宽度）居中？答案

【问题标题】：how can I center two elements (without knowing their width) next to each other in Swift?如何在 Swift 中将两个元素（不知道它们的宽度）居中？
【发布时间】：2017-05-26 21:02:17
【问题描述】：

在我的swift 应用程序中，我有一个带有 UILabel 和 UIButton 的视图。在情节提要中，它看起来像这样：

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

我想这样显示这个组：

|      label X      |

或者 - 当标签较长时，像这样：

|   longerlabel X   |

我应该如何应用约束来获得这种效果？

【问题讨论】：

“但这仅在 UILabel 具有恒定宽度时才有效”是什么意思？
@AndréSlotta 就我目前的尝试而言，只有当两个元素都具有 width 约束时，我才能将两个元素组合在一起

标签： ios swift storyboard uilabel nslayoutconstraint

【解决方案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 以实现您需要以这种方式编写代码的内容，这将起作用。

顺便说一句，您可以准确地说，就像在代码中引用超级视图以使其完美居中一样。）

【讨论】：

【解决方案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

如有任何不清楚的地方，请随时询问！顺便说一句，这是结果：

【讨论】：