使用锚的自动布局没有按照我想要的方式布置我的视图？

Question

所以我有一个相当简单的单元格视图，我正在尝试自定义它。我有一堆字段和标签，我想如下图所示进行布局

但是我最终使用我设置的约束看起来像这样......

indexLabelBackground（圆圈）

indexLabel（数字）

repsField（REPS左边的0）

repsLabel（REPS 字符串）

dividerLabel（“/”字符串）

weightField（POUNDS 左侧的 0）

weightLabel（磅字符串）

我一遍又一遍地查看我的约束，我找不到任何会让我认为我的约束是错误的，所以我希望一双新的眼睛可以帮助我找出这个令人费解的问题......

P.S.我什至创建了一个新项目并尝试使用故事板重新创建此布局，并使用看起来不错的相同约束。

private func setupViews() {
    addSubview(indexLabelBackground)
    indexLabelBackground.addSubview(indexLabel)
    addSubview(repsField)
    addSubview(repsLabel)
    addSubview(dividerLabel)
    addSubview(weightField)
    addSubview(weightLabel)

    indexLabelBackground.leftAnchor.constraint(equalTo: leftAnchor, constant: 24).isActive = true
    indexLabelBackground.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
    indexLabelBackground.heightAnchor.constraint(equalToConstant: 24).isActive = true
    indexLabelBackground.widthAnchor.constraint(equalToConstant: 24).isActive = true

    indexLabel.centerXAnchor.constraint(equalTo: indexLabelBackground.centerXAnchor).isActive = true
    indexLabel.centerYAnchor.constraint(equalTo: indexLabelBackground.centerYAnchor).isActive = true

    repsField.leftAnchor.constraint(equalTo: indexLabelBackground.rightAnchor, constant: 8).isActive = true
    repsField.rightAnchor.constraint(equalTo: repsLabel.leftAnchor, constant: -8).isActive = true
    repsField.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true

    repsLabel.rightAnchor.constraint(equalTo: dividerLabel.leftAnchor, constant: -16).isActive = true
    repsLabel.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true

    dividerLabel.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
    dividerLabel.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true

    weightField.leftAnchor.constraint(equalTo: dividerLabel.rightAnchor, constant: 16).isActive = true
    weightField.rightAnchor.constraint(equalTo: weightLabel.leftAnchor, constant: -8).isActive = true
    weightField.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true

    weightLabel.rightAnchor.constraint(equalTo: rightAnchor, constant: -16).isActive = true
    weightLabel.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
//  weightLabel.widthAnchor.constraint(equalToConstant: 60).isActive = true //note this fixes the problem but forces my label to be a fixed width
    }

所以要注意的是，如果您查看最后一行，这可以通过一种 hacky 方式“修复”，例如向 weightLabel 添加宽度约束。但是，我想避免这种情况，因为在正确的约束条件下，它看起来很笨拙且没有必要。

Answer 1

问题是您的单元格中有多个元素（字段和标签）可以拉伸以使布局正常工作，而您没有告诉 Auto Layout 哪些元素不要拉伸。

您希望您的标签坚持其固有的内容大小（尽可能大以显示文本，但不要更大）。您可以通过设置高内容拥抱优先级来指定这一点。默认情况下，当您以编程方式创建 UITextFields 和 UILabels 时，它们的内容拥抱优先级为低 (250)。由于它们都很低，Auto Layout 会以某种未知的顺序拉伸它们以使布局正常工作。

我建议添加这 3 行，为您的 3 个标签将 content 拥抱优先级 设置为 high (750)：

repsLabel.setContentHuggingPriority(UILayoutPriorityDefaultHigh, for: .horizontal)
dividerLabel.setContentHuggingPriority(UILayoutPriorityDefaultHigh, for: .horizontal)
weightLabel.setContentHuggingPriority(UILayoutPriorityDefaultHigh, for: .horizontal)

这样，您的标签将始终保持其文本所需的大小，然后它们可以锚定您的布局（双关语）。

我什至创建了一个新项目并尝试重新创建此布局 使用故事板使用相同的约束，看起来 不错。

在故事板中，UILabels 的默认内容拥抱优先级 (251) 比UITextFields (250) 高，所以它 正常工作。这让我感到震惊，为什么他们选择在以编程方式创建时全部 low (250)。