如何根据内容更改 UIView 的大小？

Question

所以我有一个复选框和一个标签，我将它们放在一个 UIView 中，这样我以后就可以将复选框和标签用作一个组件，对于其他项目，问题是我希望视图更改大小 (具体宽度）根据标签文本长度。到目前为止，我似乎只能得到这个。红色部分是包含 Checkbox 和标签的 UIStackView，蓝色部分是包含 stackView 的 UIView Class。我该怎么做才能修改视图大小以匹配 Stackviews 大小，所以如果标签变短，视图也会变短。提前致谢！

Answer 1

您需要使用约束。在这种情况下，您希望 UIStackView 具有约束锚点，每个约束锚点在蓝色 UIView 的每一侧都设置为零 - 这将用 UIStackView 填充蓝色 UIView。

假设您希望复选框保持相同大小，您可以设置宽度和高度约束，UIStackView 左边缘的前导约束为 0。

最后，为 UIStackView 的顶部和底部边缘提供 0 的标签约束，并为前导和尾随约束提供一些数值，以便在它的任一侧都有一些填充（远离复选框和右边缘）。

UIStackView 约束

stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.topAnchor.constraint(equalTo: blueView.topAnchor, constant: 0).isActive = true
stackView.bottomAnchor.constraint(equalTo: blueView.bottomAnchor, constant: 0).isActive = true
stackView.leadingAnchor.constraint(equalTo: blueView.leadingAnchor, constant: 0).isActive = true
stackView.trailingAnchor.constraint(equalTo: blueView.trailingAnchor, constant: 0).isActive = true

复选框约束

checkBox.translatesAutoresizingMaskIntoConstraints = false
checkBox.topAnchor.constraint(equalTo: stackView.topAnchor, constant: 0).isActive = true
checkBox.leadingAnchor.constraint(equalTo: stackView.leadingAnchor, constant: 0).isActive = true
checkBox.heightAnchor.constraint(equalToConstant: given_height).isActive = true
checkBox.widthAnchor.constraint(equalToConstant: given_width).isActive = true

标签约束

label.translatesAutoresizingMaskIntoConstraints = false
label.topAnchor.constraint(equalTo: stackView.topAnchor, constant: 0).isActive = true
label.bottomAnchor.constraint(equalTo: stackView.bottomAnchor, constant: 0).isActive = true
label.leadingAnchor.constraint(equalTo: checkBox.trailingAnchor, constant: given_space).isActive = true
label.trailingAnchor.constraint(equalTo: stackView.trailingAnchor, constant: 0).isActive = true

In order for the view's height to adjust to the label (if its associated text is longer than one line), then add the following line of code: label.numberOfLines = 0

请注意，您的 blueView 也需要约束。

您可以了解有关约束的更多信息here。

或者，如果您更喜欢使用故事板，则不必以编程方式添加约束 - 请参阅此 tutorial。