如何在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獲得相等的間距 。 但是，只要您正在使用自動布局，並且了解如何為您需要以這種方式編寫代碼的東西設置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

隨時詢問是否不清楚！ 結果是順便說一句：