水平UIStackView -修复中心项目的大小和拉伸其他项目

Question

我正试图实现这样的布局：

​

​

本质上，我需要or标签保持在中间，占据一个固定的宽度和线延伸到屏幕的边缘。

以下是我在XIB中所做的工作：

• 创建了一个具有center对齐方式的水平UIStackview。
• 将堆栈视图的高度约束设置为20，将分布设置为
• 两个UIView元素(对于灰度线)，当高度约束设置为5时，
• 在上面的两个UIView元素之间添加了一个UILabel。
• 从superview添加了更多带有0的

UIView引脚，从0添加了带有5的路径到中间标签的

• 右引线，从中间标签添加了4，从中间标签添加了带有0的跟踪。H 225F 226

界面构建器看起来很好，但在不同的屏幕大小和景观上，我发现中间的"or“标签可以拉伸和踢开左、右UIViews，以弥补可用的空间，这似乎是正确的：

​

如果我在中间标签上设置了20的宽度约束，右边的UIView就会像下面这样不均匀地延伸：

​

​

我知道生防护中心的元素在一定程度上是重要的，我甚至尝试这样设置?生防护中心：

中间标签的

• CHP是251
• CHP左、右UIViews是250。

这仍然给我留下了不平衡的伸展的权利UIView。

我做错了什么？真知灼见，非常感谢！非常感谢!

Answer 1

不要设置任何前导或尾随约束..。

将“右视图”宽度约束设置为“左视图”宽度，并将堆栈视图的spacing值设为4或5。

故事板：

​

​

肖像：

​

​

景观：

​

​

Answer 2

您需要在widthConstraint和make leftView.widthAnchor = rightView.widthAnchor上设置UIStackView。或者，您可以在leading和trailing约束上设置UIStackView，然后设置leftView.widthAnchor = rightView.widthAnchor。

下面是您可以在操场上试用的示例代码

    let leftView = UIView()
    leftView.translatesAutoresizingMaskIntoConstraints = false
    leftView.backgroundColor = .lightGray

    let rightView = UIView()
    rightView.translatesAutoresizingMaskIntoConstraints = false
    rightView.backgroundColor = .lightGray

    let orLabel = UILabel()
    orLabel.translatesAutoresizingMaskIntoConstraints = false
    orLabel.textColor = .black
    orLabel.text = "or"

    let stackView = UIStackView(arrangedSubviews: [leftView, orLabel,  rightView])
    stackView.alignment = .center
    stackView.distribution = .fill
    stackView.axis = .horizontal
    stackView.spacing = 5
    stackView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(stackView)

    stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    stackView.heightAnchor.constraint(equalToConstant: 20).isActive = true
    stackView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true

    leftView.heightAnchor.constraint(equalToConstant: 5).isActive = true
    rightView.heightAnchor.constraint(equalToConstant: 5).isActive = true
    leftView.widthAnchor.constraint(equalTo: rightView.widthAnchor).isActive = true