Question

我正在尝试实现这样的布局：

基本上，我需要or标签停留在中间并占据固定的宽度，并且线条向屏幕边缘延伸。

这就是我在XIB中所做的：

创建了center对齐的水平UIStackview。
将堆栈视图的高度约束设置为20，将分布约束设置为fill。
添加了两个UIView元素（用于灰色线），并将高度限制设置为5。
在上面的两个UIView元素之间添加了一个UILabel。
添加了更多约束：
左侧的UIView以0从超级视图开始，并以5跟踪到中间标签
正确的UIView以4从中间标签开始，以0跟随到超级视图。

在“界面”构建器上看起来不错，但是在不同的屏幕尺寸和横向上，我发现中间的“ or”标签可以拉伸并踢掉左右UIViews来弥补可用空间，这似乎对：

如果我在中间标签上设置了20的宽度约束，则右侧的UIView会像这样不均匀地拉伸：

我知道这里的元素的CHP在某种程度上很重要，我什至尝试设置以下CHP：

CHP为251
左右UIViews的CHP是250。

这仍然使正确的UIView伸展不均匀。

我做错了什么？见解非常感谢！非常感谢！

Answer 1

请勿设置任何前导或尾随约束...

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

故事板：

肖像：

风景：

Answer 2

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

下面是您可以在Playgrounds中试用的示例代码

    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

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

2 个答案: