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

【问题标题】：Horizontal UIStackView - fix center item's size and stretch other items水平 UIStackView - 修复中心项目的大小并拉伸其他项目
【发布时间】：2020-01-28 01:07:24
【问题描述】：

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

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

这是我在 XIB 中所做的：

创建了一个水平 UIStackview，与 center 对齐。
设置stackview的高度约束为20，分布为fill。
添加了两个 UIView 元素（用于灰线），高度限制设置为 5。
在上面的两个UIView 元素之间添加了一个UILabel。
添加了更多约束：
左 UIView 以0 从superview 引导，并以5 跟踪到中间标签
右 UIView 以4 从中间标签引导并以0 跟踪到superview。

在界面生成器上看起来不错，但在不同的屏幕尺寸和风景上，我发现中间的“or”标签可以拉伸并踢开左右 UIView 以弥补可用空间，这似乎是正确的：

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

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

中间标签的CHP为251
左右 UIView 的 CHP 为 250。

这仍然给我留下了右侧 UIView 的不均匀拉伸。

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

【问题讨论】：

标签： ios uiview xib uistackview

【解决方案1】：

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

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

故事板：

肖像：

风景：

【讨论】：

这是你第二次来救我了 :) 非常感谢！

【解决方案2】：

您需要在UIStackView 上设置widthConstraint 并设置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

【讨论】：